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

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位
                
密碼不一致