vue使用rules实现表单校验——校验用户名和密码

编写校验规则

常规校验

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 指定校验项