vue element rules电话号、邮箱校验

最新推荐文章于 2024-05-13 12:06:05 发布

原创最新推荐文章于 2024-05-13 12:06:05 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

本文介绍了一个包含身份证号、手机号及邮箱验证的表单验证规则实现方法。身份证号验证需符合二代身份证格式，手机号验证需符合中国大陆手机号格式，而邮箱验证则需符合标准电子邮件格式。

data() {
// 身份证号校验
const checkIdNum = (rule, value, callback) => {
if (!value) {
return callback(new Error('身份证不能为空'))
}
if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
callback(new Error('请输入正确的二代身份证号码'))
} else {
callback()
}
}

return {
// 表单校验
rules: {
idCard: [{
required: true,
message: "身份证号码不能为空",
trigger: "blur"
}, {
validator: checkIdNum,
trigger: 'blur'
}, ],
phone: [{
required: true,
message: "手机号不能为空",
trigger: "blur"
}, {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}],
email: [{
required: true,
message: "电子信箱不能为空",
trigger: "blur"
}, {
validator: function(rule, value, callback) {
if (
/^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
value
) == false
) {
callback(new Error("邮箱格式错误"));
} else {
callback();
}
},
trigger: "blur"
}],
},
};
},