详解vue如何使用rules对表单字段进行校验
1、在代码中,添加属性::rule
2.新建一个文件(validate.js)定义验证规则
/**这个文件只允许放表单验证方法**/ //验证手机号 exportfunctionisPhone(rule,value,callback){ if(!value){ returncallback(newError('输入不可以为空')); } varpattern=/^1[34578]\d{9}$/ if(pattern.test(value)){ returncallback() } returncallback(newError('输入的手机号错误')) }
3、在页面(xx.vue)中引入验证规则定义的文件,并在exportdefault中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发}validator
rules:{ phone:[ {required:true,message:'手机号不能为空',trigger:'blur'}, {type:'string',min:11,message:'手机号不允许小于11位',trigger:'blur'}, {validator:isPhone,trigger:'blur'}, ], password:[ {required:true,message:'密码不能为空',trigger:'blur'}, {type:'string',min:6,message:'密码不允许小于6位',trigger:'blur'}, ], code:[ {required:true,message:'验证码不能为空',trigger:'blur'}, {type:'string',min:4,message:'验证码必须是4位',trigger:'blur'}, ], },
以下是validator.js文件的部分验证方法
/*是否是公司邮箱*/ exportfunctionisWscnEmail(str){ constreg=/^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wallstreetcn\.com$/i; returnreg.test(str.trim()); } /*合法uri*/ exportfunctionvalidateURL(textval){ consturlregex=/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/; returnurlregex.test(textval); } //验证是否整数 exportfunctionisInteger(rule,value,callback){ if(!value){ returncallback(newError('输入不可以为空')); } setTimeout(()=>{ if(!Number(value)){ callback(newError('请输入正整数')); }else{ constre=/^[0-9]*[1-9][0-9]*$/; constrsCheck=re.test(value); if(!rsCheck){ callback(newError('请输入正整数')); }else{ callback(); } } },1000); } //验证是否是[0-1]的小数 exportfunctionisDecimal(rule,value,callback){ if(!value){ returncallback(newError('输入不可以为空')); } setTimeout(()=>{ if(!Number(value)){ callback(newError('请输入数字')); }else{ if(value<0||value>1){ callback(newError('请输入[0,1]之间的数字')); }else{ callback(); } } },1000); } //验证端口是否在[0,65535]之间 exportfunctionisPort(rule,value,callback){ if(!value){ returncallback(newError('输入不可以为空')); } setTimeout(()=>{ if(value==''||typeof(value)==undefined){ callback(newError('请输入端口值')); }else{ constre=/^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/; constrsCheck=re.test(value); if(!rsCheck){ callback(newError('请输入在[0-65535]之间的端口值')); }else{ callback(); } } },1000); } /*小写字母*/ exportfunctionvalidateLowerCase(str){ constreg=/^[a-z]+$/; returnreg.test(str); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。