摘要：验证结果会保存在组建实例的属性下。表单整体校验结果和单个字段校验结果。邮政编码是必填项对象字面量对象字面量语法适合需要额外参数的校验器。如限制输入长度的校验器需要说明限制长度多少。这样可以用来动态绑定校验规则。例如重复密码功能。

Vue-validator 是Vue的表单验证插件

Vue版本：1.0.24
Vue-validator版本：2.1.3

    
        

            

                username:
                
            
            

                comment:
                
            
            

                
请输入你的名字
                
您的评论太长了
            
            
        
    

将要验证的表单包裹在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表该校验器所在元素是必填项。

    
        

            Zip: 

            

                邮政编码是必填项
            
        
    

对象字面量

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

    
        

            ID: 
            

            

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

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

    
        

            ID: 
            

            

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

实例数据属性

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个
                
                Reset Validation
            
            
{{$validation | json}}
        
    

复选框checkbox

    
        

            
调查
            

                
                
请选择水果
                
                    
                Apple
                
                Orange
                
                Grape
                
                Banana
                
                

                    

                        
{{msg | json}}
                    
                
            
        
    

下拉类表select

    
    
        

            
                请选择语言
                javascript
                php
                node
            
            

                
不能为空！
            
        
    
    

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

    username
    <

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

    
        

            username: 

            password: 

            comfirm password: 
            

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