基本使用

将要验证的表单包裹在validator自定义元素指令中，而在要验证的表单控件元素的v-validate属性上绑定相应的校验规则。
验证结果会保存在组建实例的$validation属性下。$validation是由validator元素和name属性和$ 前缀组件

验证结果结构

{
    // 表单整体验证
    "valid": false, // 字段校验是否通过 
    "invalid": true, // valid 取反
    "touched": false, // 校验字段所在元素获得通过焦点时返回true，否则返回false
    "untouched": true, // touched 取反
    "modified": false, // 当元素值与初始值不同时返回true，否则返回false
    "dirty": false, // 字段值改变过至少一次返回true，否则返回false 
    "pristine": true, // dirty 取反
    // 字段单一验证
    "username": {
        "required": true,
        "modified": false,
        "pristine": true,
        "dirty": false,
        "untouched": true, 
        "touched": false,
        "invalid": true,
        "valid": false
    },
    "comment": {
        "maxlength": false,
        "modified": false,
        "pristine": true,
        "dirty": false,
        "untouched": true,
        "touched": false,
        "invalid": false,
        "valid": true
    }
}

校验结果由两部分组成。表单整体校验结果和单个字段校验结果。

验证器语法

v-validate指令语法：
v-validate[:field]="array literal | object literfal | binding"

校验字段名field

field用来标识校验字段，之后可以用该字段来引用校验结果

v-validate指令用来定义校验规则，其值可以是数组字面量，对象字面量，组件实例数组属性名。

数组字面量

当校验器不需要额外参数时，可以使用数组字面量形式，如required校验器，只要出现就带I表该校验器所在元素是必填项。

对象字面量

对象字面量语法适合需要额外参数的校验器。如限制输入长度的校验器 minlength,需要说明限制长度多少。

还可以用对象字面量语法通过rule字段来自定义验证规则

实例数据属性

v-validate的值可以是组建实例的数据属性。这样可以用来动态绑定校验规则。


  
    
        ID: 

      
          不能为空
          你的ID太短
          你的ID太长

内置校验规则

vue-validator 内置一些常用的验证规则：

required -- 输入值不能为空
pattern -- 必须匹配pattern表示的正则表达式
minlength -- 输入值长度不能小于minlength表示的值
maxlength -- 输入的值不能大于maxlength表示的值
min -- 输入值不能小于min表示的值
max -- 输入值不能大于max表示的值

与v-model同时使用

vue-validator会自动校验通过v-model动态设置的值。


    
        
            message: 
            

            message不能为空
            message输入太长位数

重置校验结果

通过在Vue组件实例上调用$resetValidation();方法来动态重置校验结果。


    
        
            
                username:
                
            
            
                comment:
                
            
            
                用户名不能为空
                输入文字超过256个
                
                
            
            {{$validation | json}}

复选框checkbox


    
        
            调查
            
                
                请选择水果
                
                    
                Apple
                
                Orange
                
                Grape
                
                Banana
                
                
                    
                        {{msg | json}}

下拉类表select

校验状态class

各校验状态都有其对应的class(默认) 也可以自定义校验状态class


    username
    <

分组校验

vue-validator支持分组校验。例如重复密码功能。


    
        
            username: 

            password: 

            comfirm password: 
            
                用户名不能为空
                密码不能为空
                密码不能少于8位
                重复密码不能为空
                密码不能少于8位
                密码不一致

Vue_VueValidator