摘要：驗(yàn)證結(jié)果會(huì)保存在組建實(shí)例的屬性下。表單整體校驗(yàn)結(jié)果和單個(gè)字段校驗(yàn)結(jié)果。郵政編碼是必填項(xiàng)對(duì)象字面量對(duì)象字面量語(yǔ)法適合需要額外參數(shù)的校驗(yàn)器。如限制輸入長(zhǎng)度的校驗(yàn)器需要說(shuō)明限制長(zhǎng)度多少。這樣可以用來(lái)動(dòng)態(tài)綁定校驗(yàn)規(guī)則。例如重復(fù)密碼功能。

Vue-validator 是Vue的表單驗(yàn)證插件

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

    
        

            

                username:
                
            
            

                comment:
                
            
            

                
請(qǐng)輸入你的名字
                
您的評(píng)論太長(zhǎng)了
            
            
        
    

將要驗(yàn)證的表單包裹在validator自定義元素指令中，而在要驗(yàn)證的表單控件元素的v-validate屬性上綁定相應(yīng)的校驗(yàn)規(guī)則。
驗(yàn)證結(jié)果會(huì)保存在組建實(shí)例的$validation屬性下。$validation是由validator元素和name屬性和$ 前綴組件

{
    // 表單整體驗(yàn)證
    "valid": false, // 字段校驗(yàn)是否通過(guò) 
    "invalid": true, // valid 取反
    "touched": false, // 校驗(yàn)字段所在元素獲得通過(guò)焦點(diǎn)時(shí)返回true，否則返回false
    "untouched": true, // touched 取反
    "modified": false, // 當(dāng)元素值與初始值不同時(shí)返回true，否則返回false
    "dirty": false, // 字段值改變過(guò)至少一次返回true，否則返回false 
    "pristine": true, // dirty 取反
    // 字段單一驗(yàn)證
    "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
    }
}

校驗(yàn)結(jié)果由兩部分組成。表單整體校驗(yàn)結(jié)果和單個(gè)字段校驗(yàn)結(jié)果。

v-validate指令語(yǔ)法：
v-validate[:field]="array literal | object literfal | binding"

校驗(yàn)字段名field

field用來(lái)標(biāo)識(shí)校驗(yàn)字段，之后可以用該字段來(lái)引用校驗(yàn)結(jié)果

v-validate指令用來(lái)定義校驗(yàn)規(guī)則，其值可以是數(shù)組字面量，對(duì)象字面量，組件實(shí)例數(shù)組屬性名。

數(shù)組字面量

當(dāng)校驗(yàn)器不需要額外參數(shù)時(shí)，可以使用數(shù)組字面量形式，如required校驗(yàn)器，只要出現(xiàn)就帶I表該校驗(yàn)器所在元素是必填項(xiàng)。

    
        

            Zip: 

            

                郵政編碼是必填項(xiàng)
            
        
    

對(duì)象字面量

對(duì)象字面量語(yǔ)法適合需要額外參數(shù)的校驗(yàn)器。如限制輸入長(zhǎng)度的校驗(yàn)器 minlength,需要說(shuō)明限制長(zhǎng)度多少。

    
        

            ID: 
            

            

                
ID不能為空
                
你的ID名字太短
                
你的ID名字太長(zhǎng)
            
            
        
    

還可以用 對(duì)象字面量語(yǔ)法通過(guò)rule字段來(lái)自定義驗(yàn)證規(guī)則

    
        

            ID: 
            

            

                
ID不能為空
                
你的ID名字太短
                
你的ID名字太長(zhǎng)
            
            
        
    

實(shí)例數(shù)據(jù)屬性

v-validate的值可以是組建實(shí)例的數(shù)據(jù)屬性。這樣可以用來(lái)動(dòng)態(tài)綁定校驗(yàn)規(guī)則。

  
    

        ID: 

      

          
不能為空
          
你的ID太短
          
你的ID太長(zhǎng)
      
    
  

vue-validator 內(nèi)置一些常用的驗(yàn)證規(guī)則：

required -- 輸入值不能為空

pattern -- 必須匹配pattern表示的正則表達(dá)式

minlength -- 輸入值長(zhǎng)度不能小于minlength表示的值

maxlength -- 輸入的值不能大于maxlength表示的值

min -- 輸入值不能小于min表示的值

max -- 輸入值不能大于max表示的值

與v-model同時(shí)使用

vue-validator會(huì)自動(dòng)校驗(yàn)通過(guò)v-model動(dòng)態(tài)設(shè)置的值。

    
        

            message: 
            

            
message不能為空
            
message輸入太長(zhǎng)位數(shù)
        
    

重置校驗(yàn)結(jié)果

通過(guò)在Vue組件實(shí)例上調(diào)用$resetValidation();方法來(lái)動(dòng)態(tài)重置校驗(yàn)結(jié)果。

    
        

            

                username:
                
            
            

                comment:
                
            
            

                
用戶名不能為空
                
輸入文字超過(guò)256個(gè)
                
                Reset Validation
            
            
{{$validation | json}}
        
    

復(fù)選框checkbox

    
        

            
調(diào)查
            

                
                
請(qǐng)選擇水果
                
                    
                Apple
                
                Orange
                
                Grape
                
                Banana
                
                

                    

                        
{{msg | json}}
                    
                
            
        
    

下拉類(lèi)表select

    
    
        

            
                請(qǐng)選擇語(yǔ)言
                javascript
                php
                node
            
            

                
不能為空！
            
        
    
    

各校驗(yàn)狀態(tài)都有其對(duì)應(yīng)的class(默認(rèn)) 也可以自定義校驗(yàn)狀態(tài)class

    username
    <

vue-validator支持分組校驗(yàn)。例如重復(fù)密碼功能。

    
        

            username: 

            password: 

            comfirm password: 
            

                
用戶名不能為空
                
密碼不能為空
                
密碼不能少于8位
                
重復(fù)密碼不能為空
                
密碼不能少于8位
                
密碼不一致