前言:我们在做vue项目和日常开发的时候,肯定会遇到正则表达式,比如手机号、邮箱、密码和数字。每次验证都要查询,既浪费时间又造成代码冗余,我也遇到过,所以自己打包一个,方便大家查询。上面代码:个人打包了一个公共js文件,名字为rule.js,如下://手机号验证telphone:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/g.test(value)if(!pass){callback(newError(rule.message||'正确格式:区号-电话号码或电话号码'))}callback()},phone:(规则,值,回调)=>{if(value===''){callback()return}constpass=/^(\\+86)?0?[1][34578][0-9]{9}$/g.test(value)if(!pass){callback(newError(rule.message||'请输入正确的电话号码'))}callback()},email:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/g.test(value)if(!pass){callback(newError(rule.message||'请输入正确的邮箱地址'))}约llback()},邮编:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^\d{6}$/g.test(value)if(!pass){callback(newError(rule.message||'必须是6位数字'))}callback()},notValidInputText:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^[^'/\\"()@$%^*<>&?]*$/g.test(value)if(!pass){callback(newError(rule.message||'不能包含特殊字符符^\'\\"()@$%^*<>&?*'))}callback()},isNumber:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^[0-9]*$/g.test(value)if(!pass){callback(newError(rule.message||'只能为数字'))}callback()},ip:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/g.test(value)if(!pass){callback(newError(rule.message||'请输入正确的ip地址'))}callback()},letterOrNumber:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^[0-9a-zA-Z]+$/g.test(value)if(!pass){callback(newError(rule.message||'onlynumbersandletters'))}callback()},letterOrNumberorUl:(rule,value,callback)=>{if(value===''){callback()返回}constpass=/^\w+$/.test(value)if(!pass){callback(newError(rule.message||'onlynumbersandlettersand_'))}callback()},id:(规则,值,回调)=>{if(value===''){callback()return}constpass=/^[a-zA-Z0-9-]{3,20}$/g.test(value)if(!pass){callback(newError(rule.message||'canonlybea3-20-digitstring'))}callback()},number:(rule,value,callback)=>{如果(值===''){callback()return}constpass=/^[0-9]{1,10}$/g.test(value)if(!pass){callback(newError(rule.message||'必须是一个number'))}callback()},positiveNumber:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^[0-9]\d*$/g.test(value)if(!pass){callback(newError(rule.message||'必须是正整数'))}callback()},posiNactiveNumber:(rule,value,callback)=>{if(value===''){callback()return}constpass=/^[+-]?\d+(\.\d+)?$/g.test(value)if(!pass){回调(newError(rule.message||'可以输入正数、负数和小数'))}callback()}}2.组件中引用:importrulefrom'@/util/rule.js'位置需要验证的输入框,直接调用rule.rulerules:{validate:[{required:true,message:'请输入验证信息',trigger:['change','blur']},{验证器:rule.notValidInputText,消息:'',trigger:['change','blur']}]}感谢您的支持!
