实现动态验证element输入框密码框

实现动态验证element输入框密码框

1.前提需求:

1.某个页面需要展示输入框的密码,但是更改过的密码后端给我们返回六个***

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RuhvNjza-1663292699990)(C:/Users/WXCHO/AppData/Roaming/Typora/typora-user-images/image-20220916092407155.png)]

2.没有更改过的我们就展示原始账号和密码

3.他们都是可以重新更改的

因为有两个不同的展示所以需要根据状态进行验证(因为密码不能有特殊符号*)

2.在html部分

  <el-form-item label="密码: "
                ref="passwordT"
                prop="password"
                :rules="passwordFocus?passwordF:defoutPasswords">
      <el-input style="width: 180px;"
                required='true'
                @input="inputPassword(formObj.password)"
                size="medium"
                v-model.trim="formObj.password"></el-input>
</el-form-item>

• 因为这部分和整个表单验证脱离开的,重新写了rules,记得加:冒号
• passwordFocus这个变量是控制该进行什么验证,我这边写了两个验证的方法passwordF和defoutPasswords(没有改变的就是保持六个*的时候)

3.两个密码验证方法规则

// 密码验证规则
      passwordF: [
        {
          required: true,
          validator: validatepass(自定义,不会的参考el文档),
          trigger: ['change', 'blur']
        }
      ],
      defoutPasswords(默认的): [
        { required: true, trigger: ['change', 'blur'] }
      ],

4.我是通过监控 @input输入值进行一个验证能不能发送请求和需要那个验证方法

inputPassword () {
      this.passwordFocus = true
      const val = this.formObj.password
      const resumePass = /\D/g
      if (val === '******') {
        this.passwordFocus = false
        this.passwordControl = true
      } else if ((resumePass.test(val) || val === '' || val.length < 6 || val.length > 19)) {
        this.passwordFocus = true
        this.passwordControl = false
      } else {
        this.passwordFocus = false
        this.passwordControl = true
      }
    },

• passwordControl这个变量是一个控制空发送请求的一个开关,为false的时候不发送请求,并提示用户(具体实现很简单的,就是一个开关思想,因为他这个验证脱离了整个表单用不了 this.$refs{[}^{\prime }for{m}^{\prime }].validate这个方法,需要另起一个来控制)是一个开关思想,因为他这个验证脱离了整个表单用不了this.$refs[‘form’].validate这个方法,需要另起一个来控制)
• passwordFocus这个就是前面提出来的一个动态验证的变量,通过三元运算进行一个选择