<input class="form-control"
                       v-validate="'required|email'"
                       type="text"
                       name="syntax_email"
                       placeholder="Email"/>
                <div class="text-danger">{{{ "{{ errors.first('syntax_email') }}" }}}</div>
            

            <input class="form-control"
                   v-validate="{ alpha: true }"
                   type="text"
                   name="syntax_alpha"
                   placeholder="Alpha"/>
            <div class="text-danger">{{{ "{{ errors.first('syntax_alpha') }}" }}}</div>
          

Multiple error messages

• {{ error }}

            <input class="form-control"
                   v-validate.continues="'required|alpha|min:5'"
                   type="text"
                   name="diserrs_multiple"
                   placeholder="Multiple error messages"/>
            <ul v-if="errors">
              <li class="text-danger" v-for="error in errors.collect('diserrs_multiple')">{{{ "{{ error }}" }}}</li>
            </ul>
          

All error messages

• {{ error }}

              <input class="form-control"
                     v-validate.continues="'required|alpha|min:5'"
                     type="text"
                     name="diserrs_all"
                     placeholder="All error messages"/>
              <ul v-if="errors">
                <li class="text-danger" v-for="error in errors.all()" track-by="$index">{{{ "{{ error }}" }}}</li>
              </ul>
            

Group error messages

• • {{ error }}

              <input class="form-control"
                     v-validate.continues="'required|alpha|min:5'"
                     type="text"
                     name="diserrs_group"
                     placeholder="Group error messages"/>
              <ul v-if="errors">
                <li v-for="group in errors.collect()">
                  <ul>
                    <li class="text-danger" v-for="error in group" track-by="$index">{{{ "{{ error }}" }}}</li>
                  </ul>
                </li>
              </ul>
            

Immediate

              <input class="form-control"
                     v-validate.immediate="'required|email'"
                     type="text"
                     name="modifiers_immediate"
                     placeholder="Immediate"/>
              <div class="text-danger">{{{ "{{ errors.first('modifiers_immediate') }}" }}}</div>
            

Disable

              verify(name) {
                this.$validator.validate(name);
              }
            

              <input class="form-control"
                     v-validate.disable="'required|email'"
                     type="text"
                     name="modifiers_disable"
                     placeholder="Disable"/>
              <div class="text-danger">{{{ "{{ errors.first('modifiers_disable') }}" }}}</div>
              <a class="btn btn-primary mt-3" @click="verify('modifiers_disable')">verify</a>
            

Continues

• {{ error }}

              <input class="form-control"
                     v-validate.continues="'required|alpha|min:5'"
                     type="text"
                     name="modifiers_continues"
                     placeholder="Continues"/>
              <ul v-if="errors">
                <li class="text-danger" v-for="error in errors.collect('modifiers_continues')">{{{ "{{ error }}" }}}</li>
              </ul>
            

Checkbox

              <label>
                <input name="form_checkbox"
                       v-validate="'required'"
                       type="checkbox"/>
                I agree to the terms and conditions.
              </label>
              <div class="text-danger">{{{ "{{ errors.first('form_checkbox') }}" }}}</div>
            

Radio

              <label>
                <input name="form_radio"
                       type="radio"
                       value="1"
                       v-validate="'required|included:1,2'"/>
                Option 1
              </label>
              <label>
                <input name="form_radio"
                       type="radio"
                       value="2"
                       v-validate="'required|included:1,2'"/>
                Option 2
              </label>
              <label>
                <input name="form_radio"
                       type="radio"
                       value="3"
                       v-validate="'required|included:1,2'"/>
                Option 3
              </label>
              <div class="text-danger">{{{ "{{ errors.first('form_radio') }}" }}}</div>
            

vv-as

              <input class="form-control"
                     v-validate="'required|email'"
                     data-vv-as="myEmail"
                     name="vv_as"
                     placeholder="Email"/>
              <div class="text-danger">{{{ "{{ errors.first('vv_as') }}" }}}</div>
            

vv-delay

              <input class="form-control"
                     v-validate="'required|email'"
                     data-vv-delay="1000"
                     name="vv_delay"
                     placeholder="Email"/>
              <div class="text-danger">{{{ "{{ errors.first('vv_delay') }}" }}}</div>
            

vv-scope

              validateForm(scope) {
                this.$validator.validateAll(scope).then((result) => {
                  if (result) {
                    alert('Form Submitted!');
                  }
                });
              }
            

              <div class="form-inline">
                <form data-vv-scope="vv_scope_form-1" @submit.prevent="validateForm('form-1')">
                  <label>email</label>
                  <input class="form-control" v-validate="'required|email'" name="email"/>
                  <div class="text-danger">{{{ "{{ errors.first('vv_scope_form-1.email') }}" }}}</div>
                  <label>password</label>
                  <input class="form-control" v-validate="'required|min:6'" name="password"/>
                  <div class="text-danger">{{{ "{{ errors.first('vv_scope_form-1.password') }}" }}}</div>
                  <input class="form-control" type="submit"/>
                </form>
              </div>
              <div class="form-inline">
                <form @submit.prevent="validateForm('form-2')">
                  <label>email</label>
                  <input class="form-control" v-validate="'required|email'" name="email" data-vv-scope="vv_scope_form-2"/>
                  <div class="text-danger">{{{ "{{ errors.first('vv_scope_form-2.email') }}" }}}</div>
                  <label>password</label>
                  <input class="form-control" v-validate="'required|min:6'" name="password" data-vv-scope="vv_scope_form-2"/>
                  <div class="text-danger">{{{ "{{ errors.first('vv_scope_form-2.password') }}" }}}</div>
                  <input class="form-control" type="submit"/>
                </form>
              </div>
            

Unit

              VeeValidate.Validator.extend('unit', {
                getMessage: (field, [unit]) => `${field} must be in units of ${unit}`,
                validate: (value, [unit]) => parseInt(value) % parseInt(unit) === 0
              });
            

              <input class="form-control"
                     v-validate="'unit:1000'"
                     name="custom_unit"
                     placeholder="Unit"/>
              <div class="text-danger">{{{ "{{ errors.first('custom_unit') }}" }}}</div>
            

Confirmed

use v-validate-ref replace ref

              <label>Password</label>
              <input class="form-control"
                     v-validate="'required|min:3'"
                     type="text"
                     name="pwd"
                     v-validate-ref="'pwdref'"
                     placeholder="Password"/>
              <div class="text-danger">{{{ "{{ errors.first('pwd') }}" }}}</div>
              <label>Password Confirm</label>
              <input class="form-control"
                     v-validate="'required|confirmed:pwdref'"
                     type="text"
                     name="pwd_confirm"
                     placeholder="Password Confirm"/>
              <div class="text-danger">{{{ "{{ errors.first('pwd_confirm') }}" }}}</div>
            

Unbind

              <input v-model="toggleUnbind" type="checkbox" id="toggleUnbind" checked="checked"/>
              <label for="toggleUnbind">toggleUnbind</label>
              <div v-if="toggleUnbind">
                <input class="form-control" v-validate="'required|email'" name="unbind_email"/>
                <div class="text-danger">{{{ "{{ errors.first('unbind_email') }}" }}}</div>
              </div>
            

Dynamic Rule

              <label>Rule</label>
              <input class="form-control"
                     v-model="dynamicRule"
                     type="text"
                     value="required|email"/>
            <label>Email</label>
            <input class="form-control"
                   v-validate="dynamicRule"
                   name="dynamic_rule"/>
              <div class="text-danger">{{{ "{{ errors.first('dynamic_rule') }}" }}}</div>
            

Custom Component

              <text-input label="custom_component"
                          type="email"
                          v-validate="'required|email'"></text-input>
              <div class="text-danger">{{{ "{{ errors.first('custom_component') }}" }}}</div>
            

Variable name

              <input class="form-control"
                     v-validate="'required|email'"
                     :name="`name-${randId}`"/>
              <div class="text-danger">{{{ "{{ errors.first(`name-${randId}`) }}" }}}</div>