form表单校验

<template>
  <el-form
    class="login-box1"
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
  >
    <el-form-item label="用户名" prop="useName">
      <el-input v-model="ruleForm.useName" disabled></el-input>
    </el-form-item>
    <el-form-item label="原密码" prop="oldPassword">
      <el-input
        v-model="ruleForm.oldPassword"
        type="password"
        show-password
        placeholder="请输入原密码"
      ></el-input>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input
        v-model="ruleForm.newPassword"
        type="password"
        show-password
        placeholder="请输入新密码"
      ></el-input>
    </el-form-item>
    <el-form-item label="确认新密码" prop="confirmPassword">
      <el-input
        v-model="ruleForm.confirmPassword"
        type="password"
        show-password
        placeholder="请再次输入新密码"
      ></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')"
      >立即更新</el-button
    >
    <el-button type="primary" @click="back()">退出</el-button>
  </el-form>
</template>
<script>
const reg = /^(?=.*[1-9])(?=.*[a-z])(?=.*[A-Z])/; // 必须包含大写字母、小写字母、数字
const { log } = console;
export default {
  name: "UpdatePassword",
  data() {
    var passwordVerify = (_, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else if (value.length < 8) {
        return callback(new Error("密码不能少于8位"));
      } else if (!reg.test(value)) {
        return callback(new Error("密码需为大小写字母与数字的组合"));
      } else if (value == this.ruleForm.oldPassword) {
        return callback(new Error("新旧密码不能相同"));
      } else {
        return callback();
      }
    };
    var confirmPasswordVerify = (_, value, callback) => {
      if (!value) {
        return callback(new Error("确认密码不能为空"));
      } else if (value != this.ruleForm.newPassword) {
        return callback(new Error("两次密码输入需一致"));
      } else {
        callback();
      }
    };
    var oldPasswordVerify = (_, value, callback) => {
      if (!value) {
        return callback(new Error("旧密码不能为空"));
      } else if (value.length < 8) {
        return callback(new Error("旧密码长度小于8位"));
      } else {
        return callback();
      }
    };
    return {
      ruleForm: {
        useName: localStorage.getItem("username") || "",
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      rules: {
        useName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        oldPassword: [
          { required: true, validator: oldPasswordVerify, trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: passwordVerify, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, validator: confirmPasswordVerify, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    /**
     * 表单校验
     * @date 2022-09-19
     * @returns {any}
     */
    submitForm() {
      this.$refs.ruleForm.validate().then((valid) => {
        if (valid) {
          this.handleUpdatePassword();
        } else {
          return false;
        }
      });
    },

    /**
     * 更新密码
     * @date 2022-09-19
     * @returns {any}
     */
    handleUpdatePassword() {
      try {
        let params = {
          oldPassword: this.encoding_v2(this.ruleForm.oldPassword),
          newPassword: this.encoding_v2(this.ruleForm.newPassword),
        };
        account
          .updatePassword(params)
          .then((res) => {
            const { code, msg, result } = res;
            if (code == 10000) {
              this.$message.success("更新成功，请使用新密码进行登录");
              this.$router.push({
                name: "login",
              });
              localStorage.removeItem("username");
            } else {
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } catch (error) {
        log("更新密码错误");
      }
    },
  },
};
</script>