放轻松，享受生活。不知道怎么办的时候，相信自己的直觉。
目录?
一、常见的form表单校验
1.添加form表单校验
基础：参考Element UI??Element - The world's most popular Vue UI framework
// 在form表单中添加如下语句 并给表单起名为ruleForm
:rules="rules" ref="ruleForm"2.基础校验?
// 1.必填校验
{ required: true, message: '请输入活动名称', trigger: 'blur' },
// 2.长度校验
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
// 3.选择select校验
{ required: true, message: '请选择活动区域', trigger: 'change' }
// 4.手机号校验
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的电话",
trigger: "blur",
},
// 5.邮箱校验
{ type: "email", message: "请输入正确的邮箱", trigger: "blur" },
3.密码校验
密码一般需要符合一定的要求，并且需要校验两次输入密码相同
pwdRules: {
pwd: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ validator: checkData, trigger: "blur" },
{
min: 8,
max: 20,
message: "长度在8到20个字符",
trigger: "blur",
},
{
required: true,
pattern:
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]{8,20}$/,
message: "包含大小写字母、数字和特殊字符的三种",
trigger: "blur",
},
],
pwd1: [
{ required: true, message: "请输入确认密码", trigger: "blur" },
{ validator: validatePass2, trigger: "blur" },
],
},// 两次密码相同校验
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.pwdForm.pwd) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
// 不能输入汉字校验
var checkData = (rule, value, callback) => {
if (value) {
if (/[\u4E00-\u9FA5]/g.test(value)) {
callback(new Error("密码不能输入汉字!"));
} else {
callback();
}
}
callback();
};如果需要修改，直接修改pattern中的正则表达式就可以了
二、异步调接口校验手机号唯一性
由于项目设置手机号登录，因此需要判断新建账号的手机号唯一。后端可以在添加时报错提示，但是用户友好的方式就是在注册时直接显示’手机号已经被注册‘。
1.【前端】添加校验方式checkTelCode
phonenumber: [
{ required: true, message: "请输入电话号码", trigger: "blur" },
{ validator: checkTelCode, trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的电话",
trigger: "blur",
},
],data(){
const checkTelCode = async (rule, value, callback) => {
if (value) {
await validPhoneUnique({ phonenumber: value }).then((response) => {
if (response.code == 200) {
callback();
} else {
callback(new Error("手机号已存在"));
}
});
}
};
return {....}
}?2.【接口】调接口异步校验
// 验证手机号唯一
export function validPhoneUnique(phonenumber) {
return request({
url: "/execute/info/validPhoneUnique",
method: "get",
params: phonenumber
});
}