element手机验证格式_elementui 表单公共方法验证

文章目录

新建规则：common> rules>index.js

建议工程目录中创建common文件夹，存放公共调用的文件，比如验证方法。

用验证手机号举例：

const validatePhone = (rule, value, callback) => {

let patter = new RegExp("^1[0-9]{10}$");//简单验证11位手机号

if (!patter.test(value)) {

return callback(new Error("请输入正确格式的手机号！"));

} else {

callback();//必须有此项回调，否则验证会一直不通过

}

};

export default {

mobilePhone:[{

required: true,

message: "手机号不能为空"

},{

validator: validatePhone,

trigger: "blur",

message: "请输入正确的证件号"

}]

}

上面的export default内可以分类填写验证，更便于管理，可以按照页面或者功能分类，看个人喜好了：export default {

common:{//公共验证方法

mobilePhone:[{

required: true,

message: "手机号不能为空"

},{

validator: validatePhone,

trigger: "blur"

}]

},

activity:{//活动策划表单验证

name:[{

required: true,

message: "活动名称不能为空"

},{

//...

}]

},

//更多...

}

挂载：main.js引入rulesimport rules from "./common/rules";

Vue.prototype.$rules = rules;

挂载到vue上，这样我们就可以在单文件实例中通过$rules来调用需要的验证了。

*.vue 调用

验证form，注意prop、rules指定的名字需一致：

测试

也可以单独指定具体某一验证：:rules="$rules.Login.userName"

elementui表单验证的几种方法

这里可以看下总结的集中elementui表单验证的写法。