1. 程式人生 > 其它 >vue + Element UI 之 rules校驗

vue + Element UI 之 rules校驗

vue + Element UI 之 rules校驗

rules: {    
  name: [         
    /*required 是否必填  trigeer 觸發檢查的方式 blur 失去焦點時檢查 change 值發生改變時觸發*/
    { required: true, message: '請輸入活動名稱', trigger: 'blur' },

    /*min  最小值   max 最大值 注意: type預設為string min和max則為最小長度和最大長度  當需要設定成數字的最小值和最大值時 type:'number' 需要在繫結時寫  v-model.number='age' 但input的type 不能設定為number否則獲取的值會一直被視為是字串 */
    { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' } ,

    /*type的用法 ,其它的使用請參考文件*/        
    { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }, 

    /*使用正則*/        
    {pattern:/^[a-z]+$/,message:'只能輸入字母!'}, 

    /*自定義檢查方法.checkfun ,引數 rule, value, callback ,檢測成功 或不成功都需要手動呼叫 callback , 驗證不成功時 callback(new Error('提示資訊')) :注意 當在下面的物件中有message時則驗證失敗只會顯示message的值 */        
    { validator: checkfun, trigger: 'blur' } 
  ]
}

原文連線:
https://www.cnblogs.com/itstac/p/11063125.html