elementui表单密码强度自定义验证

约定不等于承诺〃 2022-11-27 08:54 350阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]  
密码强度如上图片  
涉及到的相关正则表达式：

export const PASSOWRD_REG_WEEK = /^[0-9]{6,8}$|^[A-Z]{6,8}$|^[a-z]{6,8}$|^[\W_!@#$%^&*`~()-+=]{6,8}$/;
    // eslint-disable-next-line no-control-regex
    export const PASSOWRD_REG_MIDDLE = /^(?!\d+$)(?![a-zA-Z]+$)[\da-zA-Z]{8,10}$|^(?!\d+$)(?![\x00-\xff]+$)[\d\x00-\xff]{8,10}$|^(?!a-zA-Z+$)(?![\x00-\xff]+$)[a-zA-Z\x00-\xff]{8,10}$/;
    export const PASSOWRD_REG_POWER = /^(?=.*[a-zA-Z])(?=.*[\W_!@#$%^&*`~()-+=])(?=.*\d)[^]{10,16}$|^(?=.*[a-zA-Z])(?=.*[\W_!@#$%^&*`~()-+=])[^]{10,16}$|^(?=.*\d)(?=.*[\W_!@#$%^&*`~()-+=])[^]{10,16}$|^(?=.*[a-zA-Z])(?=.*\d)[^]{10,16}$/;

vue 页面相关js部分

data() { 
    const validatePassword = (rule, value, callback) => { 
          if (this.activeName === 'first') { 
            if (value.length < 6 || value.length > 16) { 
              this.$refs.tip.style.display = 'none'
              callback(new Error('密码位数为6位 ~ 16位'));
            } else if (value === '') { 
              callback(new Error('请输入新密码'));
            } else if (validate.PASSOWRD_REG_WEEK.test(value)) { 
              this.$refs.level.innerText = '弱'
              this.$refs.tip.style.display = 'block'
              callback();
            } else if (validate.PASSOWRD_REG_MIDDLE.test(value)) { 
              this.$refs.level.innerText = '中'
              this.$refs.tip.style.display = 'block'
              callback();
            } else if (validate.PASSOWRD_REG_POWER.test(value)) { 
              this.$refs.level.innerText = '强'
              this.$refs.tip.style.display = 'block'
              callback();
            }
          } else { 
            if (value.length < 6 || value.length > 16) { 
              this.$refs.tip2.style.display = 'none'
              callback(new Error('密码位数为6位 ~ 16位'));
            } else if (value === '') { 
              callback(new Error('请输入新密码'));
            } else if (validate.PASSOWRD_REG_WEEK.test(value)) { 
              this.$refs.level2.innerText = '弱'
              this.$refs.tip2.style.display = 'block'
              callback();
            } else if (validate.PASSOWRD_REG_MIDDLE.test(value)) { 
              this.$refs.level2.innerText = '中'
              this.$refs.tip2.style.display = 'block'
              callback();
            } else if (validate.PASSOWRD_REG_POWER.test(value)) { 
              this.$refs.level2.innerText = '强'
              this.$refs.tip2.style.display = 'block'
              callback();
            }
          }
        }
    	return { 
    		loginRules: { 
    	        userPassword: [
    	          {  required: true, message: '请输入新密码', trigger: 'blur' },
    	          {  validator: validatePassword }
    	        ],
          	},
    	}
    }

html部分

<el-form-item prop="userPassword">
      <span class="svg-container">
        <svg-icon icon-class="password" />
      </span>
      <el-input :key="passwordType" ref="userPassword" v-model="resetForm.userPassword" :type="passwordType" placeholder="请输入新密码" name="userPassword" tabindex="2" auto-complete="on" @blur="clearLevel" />
      <span class="el-form-item__error" ref="tip2" style="display:none;color:#666;">密码安全等级：<span ref="level2"></span></span>
      
    </el-form-item>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/f27b2639b3db4902a51f83a0a909cbe9.png