element 表单验证

手机号验证

phone: [
{
required: true,
message: '联系电话不能为空',
trigger: 'blur'
},
{
required: true,
pattern: /^[1]([3-9])[0-9]{9}$/,
message: '输入正确的手机号',
trigger: 'blur'
}
],

输入数字验证，配合v-model.number使用

	v-model.number="form.phone"
linkPhone: [
{
required: true,
message: '联系电话不能为空',
trigger: 'blur'
},
{
type: 'number',
message: '请输入数字',
trigger: 'change'
}
]

验证中文

rules: {
account: [
{//第一种验证方式
trigger: "blur",
validator: (rule, value, callback) => {
//中文验证
var reg = /[^u4e00-u9fa5]/;
if (value === "") {
callback(new Error("请输入账号"));
} else if (!reg.test(value)) {
callback(new Error("账号不能为中文"));
} else {
callback();
}
}
}
],
phone: [
{//第二种验证方式
required: true,
message: "请填写当前用户的手机号码！",
trigger: "blur"
},
{
pattern: /^(1[2-9][0-9])d{8}$/,
message: "手机号码格式不正确！",
trigger: "blur"
}
],
}

验证正整数，上面那种也可以，注意初始化值

 seat: [
{
required:false,
validator: (rule, value, callback) => {
if (/^(?:[0-9]d*)$/.test(value) == false) {
callback(new Error("请输入正整数"));
} else {
callback();
}
},
trigger: "change",
},
]

验证文字长度
使用max

companyName: [
{
required: true,
message: "物流公司名称不能为空",
trigger: "blur",
},
{
max: 30,
message: "最长不超过30个字符",
trigger: "change",
},
注释的这样也可以实现
// {
//
validator: (rule, value, callback) => {
//
if (value.length >= 20) {
//
callback(new Error("最长不超过20个字符"));
//
} else {
//
callback();
//
}
//
},
// },
],

最后

以上就是慈祥灰狼为你收集整理的element 表单验证的全部内容，希望文章能够帮你解决element 表单验证所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。