Vue小白练级之路---001表单验证功能的一般实现思路
思路 ：
- 先各自验证
- 非空校验
- 具体规则校验（正则）
- 后兜底校验（ 防止用户没输入信息直接登录 ）
实现 ：( 以 element-ui 为例 )
- 在 el-form 标签上用 model 动态绑定收集数据的对象（form）
- 在 el-form 标签上用 rules 动态绑定验证规则对象（formRule）
- 给 form 里的每一项需要验证的 el-form-item 绑定 prop 属性 , 值为验证规则 formRule 里的每一项
- 兜底校验
示例 ：（自定义数据名与 element-ui 不一致）
两次密码不一致的提示 ：
实现方式：
- 在data函数之中，return 对象之前定义校验函数 checkPwd，
- 在第二次密码校验的规则对象中 添加额外的规则对象
代码演示：
点击查看代码
data () {
const checkPwd = (rules, value, cb) => {
// 两次密码不一致的校验配置
// checkPwd就是validator属性的校验规则
// 三个参数：
// value: 收集的要校验的这一项的值，
// cb: 处理函数 cb()：成功就执行该函数。
if (value === this.regForm.password) {
cb()
} else {
cb(new Error('两次密码不一致!'))
}
}
return {
regForm: {
username: '',
password: '',
repassword: ''
},
regFormRules: {
username: [
{ required: true, message: '用户名为必填项!', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]{1,10}$/, message: '用户名需为1-10位的字母数字组合', trigger: 'blur' }
],
password: [
{ required: true, message: '密码为必填项!', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', trigger: 'blur' }
],
repassword: [
{ required: true, message: '确认密码为必填项!', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', trigger: 'blur' },
{ validator: checkPwd, trigger: 'blur' }
// { validator 属性: 值为校验的函数名， trigger 触发方式: 值也为blur }
]
}
}