前言
Ant Design of Vue中的表单如何使用自定义正则进行校验
内容
效果
代码
代码语言：javascript复制<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-Zd] $)(?![A-Z_!@#$%^&*`~()- =] $)(?![a-zd] $)(?![a-z_!@#$%^&*`~()- =] $)(?![d_!@#$%^&*`~()- =] $)[a-zA-Zd_!@#$%^&*`~()- =]{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>
