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

密码强度如上图片
涉及到的相关正则表达式：

export const PASSOWRD_REG_WEEK = /^[0-9]{6,8}$|^[A-Z]{6,8}$|^[a-z]{6,8}$|^[\[e-mail]#$%^&*`~()-+=]{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])(?=.*[\[e-mail]#$%^&*`~()-+=])(?=.*\d)[^]{10,16}$|^(?=.*[a-zA-Z])(?=.*[\[e-mail]#$%^&*`~()-+=])[^]{10,16}$|^(?=.*\d)(?=.*[\[e-mail]#$%^&*`~()-+=])[^]{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>
  <!-- @keyup.enter.native="handleLogin"<span class="show-pwd" @click="showPwd">
    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
  </span> -->
</el-form-item>