一、前言

在使用el-form的过程中会遇到密码修改的时候，此时需要对密码强度进行校验，本篇文章主要使用正则来对密码强度进行校验

二、需求

设置密码要求：8~16位，数字、字母和符号，三种选一种为弱模式，选两种为中模式，选三种为强模式

三、具体代码

html部分

<el-form ref="psdform" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="新密码:" prop="newPassword">
        <el-input
          :type="newPsdtype"
          v-model="form.newPassword"
          placeholder="8-16位密码，区分大小写"
        >
          <span slot="suffix" class="show_pwd" @click="showPwd">
            <svg-icon
              :icon-class="newPsdtype == 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-input>

        <div class="intensity">
          <span class="psdText">密码强度</span>
          <span
            class="line"
            :class="[level.includes('low') ? 'low' : '']"
          ></span>
          <span
            class="line"
            :class="[level.includes('middle') ? 'middle' : '']"
          ></span>
          <span
            class="line"
            :class="[level.includes('high') ? 'high' : '']"
          ></span>
          <div class="warningtext">
            密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
          </div>
        </div>
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPassword">
        <el-input
          :type="confirmPsdtype"
          v-model="form.confirmPassword"
          placeholder="确认密码"
        >
          <span slot="suffix" class="show_pwd" @click="showconfirmPwd">
            <svg-icon
              :icon-class="confirmPsdtype == 'password' ? 'eye' : 'eye-open'"
            /> </span
        ></el-input>
      </el-form-item>
<el-form>

js部分

data() {
    return {
      form: {
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        newPassword: [
          { required: true, validator: this.checkPassword, trigger: 'change' }
        ],
        confirmPassword: [
          {
            required: true,
            validator: this.checkConfirmPassword,
            trigger: 'blur'
          }
        ],
      },
      level: []
    }
  },
  methods: {
    //点击小眼睛
    showPwd() {
      if (this.newPsdtype === 'password') {
        this.newPsdtype = ''
      } else {
        this.newPsdtype = 'password'
      }
    },
    //点击小眼睛
    showconfirmPwd() {
      if (this.confirmPsdtype === 'password') {
        this.confirmPsdtype = ''
      } else {
        this.confirmPsdtype = 'password'
      }
    },
    // 校验密码
    checkPassword(rule, value, callback) {
      this.level = []
      if (!value) {
        return callback('密码不能为空')
      }
      if (value.length < 8) {
        return callback('密码不少于8位')
      }
      if (value.length > 16) {
        return callback('密码不大于16位')
      }
      // 校验是数字
      const regex1 = /^\d+$/
      // 校验字母
      const regex2 = /^[A-Za-z]+$/
      // 校验符号
      const regex3 =
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
      if (regex1.test(value)) {
        this.level.push('low')
      } else if (regex2.test(value)) {
        this.level.push('low')
      } else if (regex3.test(value)) {
        this.level.push('low')
      } else if (/^[A-Za-z\d]+$/.test(value)) {
        this.level.push('low')
        this.level.push('middle')
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
          value
        )
      ) {
        this.level.push('low')
        this.level.push('middle')
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
          value
        )
      ) {
        this.level.push('low')
        this.level.push('middle')
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
          value
        )
      ) {
        this.level.push('low')
        this.level.push('middle')
        this.level.push('high')
      }
      return callback()
    },
    // 确认密码
    checkConfirmPassword(rule, value, callback) {
      if (!value) {
        return callback('请输入确认密码')
      }
      if (value != this.form.newPassword) {
        return callback('两次密码输入不一致，请重新输入')
      }
    },

css部分

.show_pwd {
  cursor: pointer;
  user-select: none;
  padding-right: 5px;
}
.intensity {
  .psdText {
    font-size: 14px;
    margin-right: 10px;
  }
  .line {
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;
    &.low {
      background: #f4664a;
    }
    &.middle {
      background: #ffb700;
    }
    &.high {
      background: #2cbb79;
    }
  }
  .level {
    margin: 0 16px 0 8px;
  }
  .warningtext {
    color: #5a5a5a;
    font-size: 12px;
    margin-top: 5px;
  }
}

四、实现效果

以上代码是使用三种颜色来判断密码强度，具体效果如下

五、尾声

上面图片分别演示了不同情况下的密码强度判断，并未演示长度校验，但功能已经实现，可自行验证