vant组件一个文本框添加多项校验

发布时间 2023-12-06 17:50:28作者: HLLZ

下图为用户密码校验表单,需要对密码是否为空,密码长度,以及密码强度进行校验。

但是 “密码格式不正确!”这个校验信息并不是我想要的,我想在isPassWordStrength方法中区分开密码长度提示和密码强度提示,方便用户知道具体是什么问题导致校验不通过。

<van-field
   required
   v-model="formCustom.loginPwd"
   :type="passwordType"
   :rules="[
     { required: true, message: '请输入登录密码!'},
     { validator: isPassWordStrength, message: '密码格式不正确!'}
    ]"
    label="登录密码"
>
</van-field>

解决方法:isPassWordStrength方法第一个参数为用户输入的值,第二个参数为校验规则,可自行打印看下,就不展示了。当我们在方法中通过逻辑判断,知道密码存在的问题后,手动修改rule中的message属性为自己想要的字符串,然后return false;,

报错信息即可在表单校验中展现。如果密码没问题,return true;就可以。

isPassWordStrength: (value, rule) => {
  //value: 用户在文本框中输入的内容
 //rule: 表单校验规则,其中需要用到的就是里面的 message属性
    if(密码长度不够){
      rule.message = '密码长度应不小于12位!'
      return false;
    } else if(密码强度不够){
      rule.message = '密码必须包含数字、大写或小写字母和特殊字符四种中的三种!'
      return false;
    } else {
      //校验通过
      return true;
    }
},