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:'只能輸入字母!'},
{ pattern: /^(0|[1-9][0-9]*)$/, message: "請輸入數字", trigger: "blur" },
/*自定義檢查方法.checkfun ,參數 rule, value, callback ,檢測成功 或不成功都需要手動調用 callback , 驗證不成功時 callback(new Error('提示信息')) :注意 當在下面的對象中有message時則驗證失敗只會顯示message的值 */
{ validator: checkfun, trigger: 'blur' }
]
}
常用登錄校驗
登錄頁面密碼校驗
rules: {
passwd: [
{
required: true, message: '請輸入密碼', trigger: 'blur' },
{
trigger: 'blur',
validator: (rule, value, callback) => {
var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/
if (!passwordreg.test(value)) {
callback(new Error('密碼必須由數字、字母、特殊字符組合,請輸入8-20位'))
}else{
callback()
}
}
}
]
}
原文連接：
https://www.cnblogs.com/itstac/p/11063125.html
