Vue后台系统登录密码强弱校验

需求描述：用户登录输入的密码较弱时（比如输入：123456），弹框提示修改密码

1、首先定义好弹框组件

<template>
  <el-dialog title="修改密码" :visible.sync="dialog.show" :show-close="false" :close-on-click-modal="false"
    :before-close="stopClose" width="800px">
    <el-alert title="系统检测到您的密码强度较弱，请立即更换强度较高的新密码" type="warning" style="margin-bottom: 20px" show-icon :closable="false">
    </el-alert>
    <el-form :model="formData" ref="form" label-width="100px" :rules="rules">
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="formData.newPassword" placeholder="密码由6-12位的数字、字母、下划线组成" maxlength="12"
          show-password />
        <ul class="pwd-strong">
          <li :class="{ weak: pwdLevel === 0 }">弱</li>
          <li :class="{ better: pwdLevel === 1 }">中</li>
          <li :class="{ strong: pwdLevel === 2 }">强</li>
        </ul>
        <div class="tip">
          <p>弱密码：仅包含简单数字</p>
          <p>中密码：由数字、小写字母组成</p>
          <p>强密码：密码长度超过6位，同时包含数字、大小写字母和下划线</p>
        </div>
      </el-form-item>
      <el-form-item prop="rePwd" label="确认新密码">
        <el-input v-model="formData.rePwd" maxlength="12" show-password></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="submit" :loading="dialog.loading">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialogMixin from "@/mixin/dialogMixin";
import { checkPwdStrong } from "@/utils/index";
import { cacheKey } from "@/utils/constant";
import userAPI from '@/api/system/user'

export default {
  name: "departmentCommon",
  mixins: [dialogMixin],
  data() {
    const validPwd = (rule, value, callback) => {
      if (this.formData.newPassword !== this.formData.rePwd) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    const validStrong = (rule, value, callback) => {
      if (!/^[0-9a-zA-Z_]{6,12}$/.test(value)) {
        callback(new Error("密码只能由6-12位的数字、字母和下划线组成"));
      } else if (this.pwdLevel === 0) {
        callback(new Error("密码强度较弱"));
      } else {
        callback();
      }
    };
    return {
      formData: {
        id: null,
        newPassword: null,
        oldPassword: null,
        rePwd: null,
      },
      userData: {},
      rules: {
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "密码长度在 6 到 12 个字符",
            trigger: "blur",
          },
          { validator: validStrong, trigger: "blur" },
        ],
        rePwd: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validPwd, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // 密码强度等级
    pwdLevel() {
      return checkPwdStrong(this.formData.newPassword);
    },
  },
  mounted() {
    const userInfo = this.$store.state.user.userInfo;
    if (userInfo) {
      this.formData.id = userInfo.userId;
      this.userData = userInfo
    }
    const pwd = sessionStorage.getItem(cacheKey.pwd)
    if (pwd !== null) {
      this.formData.oldPassword = pwd
    }
  },
  methods: {
    open() {
      this.dialog.show = true;
      this.dialog.loading = false;
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (!this.dialog.loading && valid) {
          this.saveOrUpdate()
        }
      })
    },
    saveOrUpdate() {
      this.dialog.loading = true
      this.userData.password = this.formData.newPassword
      userAPI
        .edit(this.userData)
        .then((res) => {
          this.$message.success("密码修改成功");
          sessionStorage.removeItem(cacheKey.weakPwd);
          sessionStorage.removeItem(cacheKey.pwd)
          this.dialog.show = false;
        })
        .catch((err) => {
          this.dialog.loading = false;
        })
    },
    stopClose(done) {
      done(false)
    }
  },
};
</script>

<style scoped lang="scss">
.pwd-strong {
  display: flex;
  margin-top: 20px;
  margin-bottom: 10px;
  list-style-type: none;

  li {
    margin-right: 10px;
    width: 50px;
    text-align: center;
    padding-top: 2px;
    border-top: 4px solid #ccc;
    font-size: 13px;
    color: #ccc;

    &.weak {
      border-top: 4px solid #f56c6c;
    }

    &.better {
      border-top: 4px solid #e6a23c;
    }

    &.strong {
      border-top: 4px solid #67c23a;
    }
  }
}

.tip {
  font-size: 13px;
  color: #999;
  line-height: 2;
}
</style>

/**
 * 检查密码强度
 * @param {*} pwd 
 * @returns 
 */
export function checkPwdStrong(pwd) {
  let score = 0
  // 必须同时包含数字和大小写字母
  if ((!pwd || pwd.length < 6) || (!/^(?=.*[0-9].*)(?=.*[a-z].*).{6,12}$/.test(pwd))) {
    return score
  }
  score++
  // 密码包含下划线
  if (/[_]/.test(pwd) || /^[A-Z]+$/.test(pwd)) {
    score++
  }
  return score
}

// 弱密码 key
export const cacheKey = {
  weakPwd: 'weakPwd',
  pwd: 'pwd'
}

2、页面中调用

<template>
  <div>
      <ResetPassword ref="pwd" />
  </div>
</template>

import ResetPassword from "@/components/ResetPassword.vue";
...

  components: {
    ResetPassword,
  },
...
 mounted() {
   const weakPwd = sessionStorage.getItem(cacheKey.weakPwd);
   if (weakPwd !== null) {
     this.$refs.pwd.open();
   }
 },