編寫校驗規則
常規校驗
const rules = {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 5, max: 16, message: '長度在 5 到 16 個字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ min: 5, max: 16, message: '長度在 5 到 16 個字符', trigger: 'blur'}]
}
自定義校驗:檢查兩次輸入的密碼是否一致
//校驗密碼的函數
const validateConfirmPassword = (rule, value, callback) => {if (value === '') {callback(new Error('請再次輸入密碼'))} else if (value !== registerData.value.password) {callback(new Error('兩次密碼不一致'))} else {callback()}
}
//在校驗規則中引用
confirmPassword: [{validator: validateConfirmPassword, trigger: 'blur'}]
注冊表單綁定校驗規則
el-form 標簽使用:rules="rules"綁定校驗規則,el-form-item使用prop 指定校驗項