vee-validation example#3

form validation

by pdo99

HTML

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-rc.7/dist/vee-validate.js"></script>
<div id="app">
  <p>
    <h4>option: confirmed</h4>
    <input v-validate="'required|alpha|confirmed:confirmedNum01'" type="text" name="num01">
    <br>
    <input type="text" name="confirmedNum01">
    <br>
    <span v-if="errors.has('num01')">{{ errors.first('num01') }}</span>
  </p>
  <p>
    <h4>option: email</h4>
    <input v-validate="'email'" type="text" name="num02">
    <br>
    <span v-if="errors.has('num02')">{{ errors.first('num02') }}</span>
  </p>
  <p>
    <h4>option: url</h4>
    <input v-validate="'url:false'" type="text" name="num03">
    <br>
    <span v-if="errors.has('num03')">{{ errors.first('num03') }}</span>
  </p>
  <p>
    <h4>option: radio button</h4>
    <p class="control">
      <label class="radio">
        <input name="radio_group_1" v-validate="'required|in:1'" value="1" type="radio">
        Option 1
      </label>
      <label class="radio">
        <input name="radio_group_1" value="2" type="radio">
        Option 2
      </label>
    </p>
    <span class="help is-danger" v-show="errors.has('radio_group_1')">{{ errors.first('radio_group_1') }}</span>
  </p>
  <p>
    <h4>option: select box</h4>
      <p class="control">
        <label class="checkbox">
          <input name="terms" v-validate="'required'" type="checkbox">
          agree.
        </label>
        <br>
        <span class="help is-danger" v-show="errors.has('terms')">
          {{ errors.first('terms') }}
        </span>
      </p>
  </p>
</div>

JavaScript

Vue.use(VeeValidate);

var app = new Vue({
	el: '#app',
    methods: {
    },
});