携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情
前言
上一篇主要是铺垫,介绍了一些常见的用法;这次总结一下前辈们归纳的可以直接用的Form校验规则~
常用规则
最近项目中用到的几乎都是必填项校验,偶尔会有位数的校验(max、min),所以这些得需要结合具体的需求适当进行改造。在这篇总结中就会列出一些开发中比较基础规范的校验模板。例如:身份证号、手机号、邮箱等;
身份证号
id:[
{required: true,message: '请输入身份证号',trigger: 'blur'},
{pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式不正确' }],
]
手机号
phone:[
{ required: true,message: '请输入手机号码',trigger: 'blur'},
{validator:function(rule,value,callback){
if(/^1[34578]\d{9}$/.test(value) == false){
callback(new Error("请输入正确的手机号"));
}else{
callback();
}
}, trigger: 'blur'},
// 或者直接使用pattern
//{ pattern:/^1[3456789]\d{9}$/, message: "手机号格式不对", trigger: "blur" },
],
座机号
telephone:[
{ pattern:/^\d{3,4}\-\d{7,8}$/,message:"座机不正确,格式为:区号-座机号,例如: 07558886666",trigger:"blur"},
]
邮箱
email:[
{required: true, message: '请输入邮箱号', trigger: 'blur'},
{validator:function(rule,value,callback){
if (value === '') {
callback(new Error('请正确填写邮箱'));
} else {
if (value !== '') {
var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
if(!reg.test(value)){
callback(new Error('请输入有效的邮箱'));
}
}else{
callback();
}
}, trigger: 'blur'}
],
车牌号
carId:[
{required: true, message: '请输入车牌号', trigger: 'blur'},
{pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,message: '常规格式:晋B12345'},
],
数字
number:[
{ pattern:/^[0-9]*$/ , message:'请输入数字' ,trigger:'blur' },
]
汉字
character:[
{ pattern:/^[\u4e00-\u9fa5]{0,}$/ ,message:"姓名格式错误,请检查",trigger:"blur" }
]
总结
今天就先到这里,之后会陆续等新遇到的规则。其实能发现主要还是依赖正则表达式,除了像{min:2,max:6,...}这样的一些特殊属性外,大多数的校验都要由pattern来处理,所以学习校验规则一个很重要的方向就是正则表达式。下次有机会就整理总结一下正则表达式相关的知识点。其实这个呢以前也想着学过,总是容易忘,看看有没有什么办法方便记忆和使用!