bd-training-exam/src/components/tools/changePassword.vue

<template>
  <el-dialog v-model="dialogVisible" title="密码管理" width="600" center align-center>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      size="default"
      status-icon
    >
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          clearable
          placeholder="请输入原密码"
          type="password"
          show-password
          maxlength="16"
          autocomplete="off"
          v-model="ruleForm.oldPassword"
          @input="filter(ruleForm.oldPassword, 'oldPassword')"
          oncut="return false"
          onpaste="return false"
          oncopy="return false"
        />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-text class="mx-1" size="small" type="danger">
          密码必须包含数字、大小写字母以及特殊字符（!@#$%^&*），且长度在8-16位之间
        </el-text>
        <el-input
          clearable
          placeholder="请输入新密码"
          type="password"
          show-password
          maxlength="16"
          autocomplete="off"
          v-model="ruleForm.newPassword"
          @input="filter(ruleForm.newPassword, 'newPassword')"
          oncut="return false"
          onpaste="return false"
          oncopy="return false"
        />
      </el-form-item>
      <el-form-item label="确认新密码" prop="checkPass">
        <el-input
          clearable
          placeholder="请再次输入新密码"
          type="checkPass"
          show-password
          maxlength="16"
          autocomplete="off"
          v-model="ruleForm.checkPass"
          @input="filter(ruleForm.checkPass, 'checkPass')"
          oncut="return false"
          onpaste="return false"
          oncopy="return false"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="changePassword(ruleFormRef)">
          提交修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

import { encrypt } from "../../utils/aes";

import $http from "../../api/index";
import $url from "../../api/url";

const dialogVisible = ref(false);

const ruleFormRef = ref();
const ruleForm = reactive({
  oldPassword: "",
  newPassword: "",
  checkPass: "",
});

const filter = (value, label) => {
  if (/[=\s"'+-]/.test(value)) {
    if (ruleForm[label]) {
      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
    }
  }
};

const passwordRegex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,16}$/;

const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (!passwordRegex.test(value)) {
    callback(
      new Error(
        "密码必须包含数字、大小写字母以及特殊字符（!@#$%^&*），且长度在8-16位之间"
      )
    );
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass");
    }
    callback();
  }
};

const validateCheck = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== ruleForm.newPassword) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const rules = reactive({
  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newPassword: [{ required: true, validator: validatePass, trigger: "blur" }],
  checkPass: [{ required: true, validator: validateCheck, trigger: "blur" }],
});

const resetForm = (formEl) => {
  dialogVisible.value = false;
  if (!formEl) return;
  formEl.resetFields();
};

const changePassword = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      dialogVisible.value = false;
      let encryptForm = {
        oldPassword: encrypt(ruleForm.oldPassword),
        newPassword: encrypt(ruleForm.newPassword),
      };
      formEl.resetFields();
      const data = {
        passwordForm: encryptForm,
        uid: localStorage.data
      };
      $http
        .post($url.changePassword, data)
        .then((res) => {
          if (res.data.code === 200) {
            localStorage.clear();
            window.location.reload();
          } else {
            ElMessage.error("密码修改失败！");
          }
        });
    } else {
      ElMessage.error("提交失败！");
    }
  });
};

defineExpose({ dialogVisible });
</script>

<style scoped></style>