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

Vue-validator 是Vue的表單驗證插件

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

    
        

            

                username:
                
            
            

                comment:
                
            
            

                
請輸入你的名字
                
您的評論太長了
            
            
        
    

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

{
    // 表單整體驗證
    "valid": false, // 字段校驗是否通過 
    "invalid": true, // valid 取反
    "touched": false, // 校驗字段所在元素獲得通過焦點時返回true，否則返回false
    "untouched": true, // touched 取反
    "modified": false, // 當(dāng)元素值與初始值不同時返回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
    }
}

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

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

校驗字段名field

field用來標(biāo)識校驗字段，之后可以用該字段來引用校驗結(jié)果

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

數(shù)組字面量

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

    
        

            Zip: 

            

                郵政編碼是必填項
            
        
    

對象字面量

對象字面量語法適合需要額外參數(shù)的校驗器。如限制輸入長度的校驗器 minlength,需要說明限制長度多少。

    
        

            ID: 
            

            

                
ID不能為空
                
你的ID名字太短
                
你的ID名字太長
            
            
        
    

還可以用 對象字面量語法通過rule字段來自定義驗證規(guī)則

    
        

            ID: 
            

            

                
ID不能為空
                
你的ID名字太短
                
你的ID名字太長
            
            
        
    

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

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

  
    

        ID: 

      

          
不能為空
          
你的ID太短
          
你的ID太長
      
    
  

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

required -- 輸入值不能為空

pattern -- 必須匹配pattern表示的正則表達式

minlength -- 輸入值長度不能小于minlength表示的值

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

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

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

與v-model同時使用

vue-validator會自動校驗通過v-model動態(tài)設(shè)置的值。

    
        

            message: 
            

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

重置校驗結(jié)果

通過在Vue組件實例上調(diào)用$resetValidation();方法來動態(tài)重置校驗結(jié)果。

    
        

            

                username:
                
            
            

                comment:
                
            
            

                
用戶名不能為空
                
輸入文字超過256個
                
                Reset Validation
            
            
{{$validation | json}}
        
    

復(fù)選框checkbox

    
        

            
調(diào)查
            

                
                
請選擇水果
                
                    
                Apple
                
                Orange
                
                Grape
                
                Banana
                
                

                    

                        
{{msg | json}}
                    
                
            
        
    

下拉類表select

    
    
        

            
                請選擇語言
                javascript
                php
                node
            
            

                
不能為空！
            
        
    
    

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

    username
    <

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

    
        

            username: 

            password: 

            comfirm password: 
            

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