文章目录
新建规则: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表单验证的写法。