Antd——表单使用自定义正则进行校验

前言

Ant Design of Vue中的表单如何使用自定义正则进行校验

内容

效果

代码

<template>
     <!--省略代码-->
     <div @click="changePassword">
      <a-icon style="margin-right: 8px" type="edit" />
      <span>修改密码</span>
    </div>
    <!--省略代码-->
    <a-modal
        title="修改密码"
        :visible="createDialogVisible"
        @ok="modelConfirm"
        @cancel="modalCancel"
    >
      <a-form-model
          ref="passwordFrom"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
      >
        <a-form-model-item
            ref="password"
            label="旧密码"
            prop="password"
        >
          <a-input-password
              v-model="form.password"
              placeholder="旧密码"
          />
        </a-form-model-item>
        <a-form-model-item
            ref="newPassword"
            label="新密码"
            prop="newPassword"
        >
          <a-input-password
              v-model="form.newPassword"
              placeholder="新密码"
          />
        </a-form-model-item>
        <a-form-model-item
            ref="reNewPassword"
            label="确认密码"
            prop="reNewPassword"
        >
          <a-input-password
              v-model="form.reNewPassword"
              placeholder="请再次输入新密码"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-layout-header>
</template>

<script>

export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        password: "",
        newPassword: "",
        reNewPassword: "",
        _id: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "change" },
          // 表单自定义校验
          { validator: this.checkPassword }
        ],
        reNewPassword: [
            { required: true, message: "请再次输入新密码", trigger: "change" },
            { validator: this.checkPassword }
        ]
      },
      createDialogVisible: false,
      searchActive: false,
    };
  },

  methods: {
    // 校验密码复杂度
    checkPassword(rule, value, callback) {
      if (value && !/^(?![a-zA-Z]+$)(?![A-Z\d]+$)(?![A-Z_!@#$%^&*`~()-+=]+$)(?![a-z\d]+$)(?![a-z_!@#$%^&*`~()-+=]+$)(?![\d_!@#$%^&*`~()-+=]+$)[a-zA-Z\d_!@#$%^&*`~()-+=]{8,16}$/.test(value)) {
        callback(new Error('密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 16位'))
      }
      // 回调一定不要忘记了
      callback()
    },

    // 修改密码
    changePassword() {
      this.createDialogVisible = true;
    },

    // model 确认按钮
    modelConfirm() {
      this.$refs.passwordFrom.validate((valid) => {
        if (valid) {
          // 只做前端进行判断两次密码输入是否一致 | 后端不进行判断 [我也不清楚咋想的]
          if (this.form.newPassword !== this.form.reNewPassword) {
            this.$message.error('您两次输入的新密码不一致,请检查后重新输入'); return
          }
          this.form._id = JSON.parse(localStorage.getItem('userInfo')).user._id
          let payload = {
            data: {
              ...this.form,
            },
          };
          this.$mqtt.doPublish(
              {
                pubTopic: "<topic>",
                payload,
              },
              (topic, data) => {
                if (data.code == 200) {
                  this.$message.success("密码更新成功");
                  this.logout()
                }

                if (data.code == 1002 ) {
                  this.$message.error("您输入的旧密码错误");
                  this.modalCancel()
                }

                if (data.code == 1022 ) {
                  this.$message.error("您输入的密码复杂度不满足");
                  this.modalCancel()
                }

                if (data.code == 1000 ) {
                  this.$message.error("卧槽,您的账号竟然不存在~");
                  this.createDialogVisible = false;
                }
              },
              this
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    // model 取消按钮
    modalCancel() {
      this.$refs.passwordFrom.resetFields();
      this.createDialogVisible = false;
    },

    // 退出登录
    logout() {
      logout();
      this.$router.push("/login");
    }
  },
};
</script>