Vue小白练级之路---001表单验证功能的一般实现思路

• Z时代
• 2024-01-10
• 分类：综合

思路：

1. 先各自验证

   • 非空校验
   • 具体规则校验

2. 后兜底校验（ 防止用户没输入信息直接登录 ）

实现：( 以 element-ui 为例 )

1. 在 标签上用 model 动态绑定收集数据的对象（form）

2. 在 标签上用 rules 动态绑定验证规则对象（formRule）

3. 给 form 里的每一项需要验证的 绑定 prop 属性 , 值为验证规则 formRule 里的每一项

4. 兜底校验（里面也可以写一些自定义校验规则）

示例：（自定义数据名与 element-ui 不一致）

两次密码不一致的提示：

实现步骤：

1. 在data函数之中，return 对象之前定义校验函数 checkPwd，
2. 在第二次密码校验的规则对象中 添加额外的规则对象
   

   { validator 属性: 值为校验的函数名，
   

   triggle 触发方式: 值也为blur }
   

   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: '用户名为必填项!', triggle: 'blur' },
   

   { pattern: /^[1]{1,10}$/, message: '用户名需为1-10位的字母数字组合', triggle: 'blur' }
   

   ],
   

   password: [
   

   { required: true, message: '密码为必填项!', triggle: 'blur' },
   

   { pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', triggle: 'blur' }
   

   ],
   

   repassword: [
   

   { required: true, message: '确认密码为必填项!', triggle: 'blur' },
   

   { pattern: /^\S{6,15}$/, message: '密码需为6-15位的非空字符串', triggle: 'blur' },
   

   { validator: checkPwd, triggle: 'blur' }
   

   ]
   

   }
   

   }