Form组件常用校验规则-2(持续更新中~)

186 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 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来处理,所以学习校验规则一个很重要的方向就是正则表达式。下次有机会就整理总结一下正则表达式相关的知识点。其实这个呢以前也想着学过,总是容易忘,看看有没有什么办法方便记忆和使用!