vue-基于 Element-ui form 数据表单字段验证


在代码中form,添加属性::rule
el-form:model="form":rules="rules"ref="form"label-width="80px"/el-form并且,在el-form-item中添加prop属性,对应rules中的规则


新开一个文件夹()定义验证规则


使用规则

在页面()中引入验证规则定义的文件,并在exportdefault中定义rule规则,使用语法:{validator:验证方法,trigger:验证触发}


最后文件的部分验证方法
/***Createdbyjiachenpanon16/11/18.*//*是否合法IP地址*/exportfunctionvalidateIP(rule,value,callback){if(value==''||value==undefined||value==null){callback();}else{constreg=/^(\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])$/;if((!(value))value!=''){callback(newError('请输入正确的IP地址'));}else{callback();}}}/*是否手机号码或者固话*/exportfunctionvalidatePhoneTwo(rule,value,callback){constreg=/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;;if(value==''||value==undefined||value==null){callback();}else{if((!(value))value!=''){callback(newError('请输入正确的电话号码或者固话号码'));}else{callback();}}}/*是否固话*/exportfunctionvalidateTelphone(rule,value,callback){constreg=/0\d{2}-\d{7,8}/;if(value==''||value==undefined||value==null){callback();}else{if((!(value))value!=''){callback(newError('请输入正确的固话(格式:区号+号码,如)'));}else{callback();}}}/*是否手机号码*/exportfunctionvalidatePhone(rule,value,callback){constreg=/^[1][3,4,5,7,8][0-9]{9}$/;if(value==''||value==undefined||value==null){callback();}else{if((!(value))value!=''){callback(newError('请输入正确的电话号码'));}else{callback();}}}/*是否身份证号码*/exportfunctionvalidateIdNo(rule,value,callback){constreg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;if(value==''||value==undefined||value==null){callback();}else{if((!(value))value!=''){callback(newError('请输入正确的身份证号码'));}else{callback();}}}/*是否邮箱*/exportfunctionvalidateEMail(rule,value,callback){constreg=/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;if(value==''||value==undefined||value==null){callback();}else{if(!(value)){callback(newError('请输入正确的邮箱地址'));}else{callback();}}}/*合法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.,?'\\+%$#=~_-]+))*$/;(textval);}/*验证内容是否英文数字以及下划线*/exportfunctionisPassword(rule,value,callback){constreg=/^[_a-zA-Z0-9]+$/;if(value==''||value==undefined||value==null){callback();}else{if(!(value)){callback(newError('密码仅由英文字母,数字以及下划线组成'));}else{callback();}}}/*自动检验数值的范围*/exportfunctioncheckMax20000(rule,value,callback){if(value==''||value==undefined||value==null){callback();}elseif(!Number(value)){callback(newError('请输入[1,20000]之间的数字'));}elseif(value1||value20000){callback(newError('请输入[1,20000]之间的数字'));}else{callback();}}//验证数字输入框最大数值,32767exportfunctioncheckMaxVal(rule,value,callback){if(value0||value32767){callback(newError('请输入[0,32767]之间的数字'));}else{callback();}}//验证是否1-99之间exportfunctionisOneToNinetyNine(rule,value,callback){if(!value){returncallback(newError('输入不可以为空'));}setTimeout(()={if(!Number(value)){callback(newError('请输入正整数'));}else{constre=/^[1-9][0-9]{0,1}$/;constrsCheck=(value);if(!rsCheck){callback(newError('请输入正整数,值为【1,99】'));}else{callback();}}},0);}//验证是否整数exportfunctionisInteger(rule,value,callback){if(!value){returncallback(newError('输入不可以为空'));}setTimeout(()={if(!Number(value)){callback(newError('请输入正整数'));}else{constre=/^[0-9]*[1-9][0-9]*$/;constrsCheck=(value);if(!rsCheck){callback(newError('请输入正整数'));}else{callback();}}},0);}//验证是否整数,非必填exportfunctionisIntegerNotMust(rule,value,callback){if(!value){callback();}setTimeout(()={if(!Number(value)){callback(newError('请输入正整数'));}else{constre=/^[0-9]*[1-9][0-9]*$/;constrsCheck=(value);if(!rsCheck){callback(newError('请输入正整数'));}else{callback();}}},1000);}//验证是否是[0-1]的小数exportfunctionisDecimal(rule,value,callback){if(!value){returncallback(newError('输入不可以为空'));}setTimeout(()={if(!Number(value)){callback(newError('请输入[0,1]之间的数字'));}else{if(value0||value1){callback(newError('请输入[0,1]之间的数字'));}else{callback();}}},100);}//验证是否是[1-10]的小数,即不可以等于0exportfunctionisBtnOneToTen(rule,value,callback){if(typeofvalue=='undefined'){returncallback(newError('输入不可以为空'));}setTimeout(()={if(!Number(value)){callback(newError('请输入正整数,值为[1,10]'));}else{if(!(value=='1'||value=='2'||value=='3'||value=='4'||value=='5'||value=='6'||value=='7'||value=='8'||value=='9'||value=='10')){callback(newError('请输入正整数,值为[1,10]'));}else{callback();}}},100);}//验证是否是[1-100]的小数,即不可以等于0exportfunctionisBtnOneToHundred(rule,value,callback){if(!value){returncallback(newError('输入不可以为空'));}setTimeout(()={if(!Number(value)){callback(newError('请输入整数,值为[1,100]'));}else{if(value1||value100){callback(newError('请输入整数,值为[1,100]'));}else{callback();}}},100);}//验证是否是[0-100]的小数exportfunctionisBtnZeroToHundred(rule,value,callback){if(!value){returncallback(newError('输入不可以为空'));}setTimeout(()={if(!Number(value)){callback(newError('请输入[1,100]之间的数字'));}else{if(value0||value100){callback(newError('请输入[1,100]之间的数字'));}else{callback();}}},100);}//验证端口是否在[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=(value);if(!rsCheck){callback(newError('请输入在[0-65535]之间的端口值'));}else{callback();}}},100);}//验证端口是否在[0,65535]之间,非必填,isMust表示是否必填exportfunctionisCheckPort(rule,value,callback){if(!value){callback();}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=(value);if(!rsCheck){callback(newError('请输入在[0-65535]之间的端口值'));}else{callback();}}},100);}/*小写字母*/exportfunctionvalidateLowerCase(str){constreg=/^[a-z]+$/;(str);}/*保留2为小数*/exportfunctionvalidatetoFixedNew(str){returnstr;}/*验证key*///exportfunctionvalidateKey(str){//varreg=/^[a-z_\-:]+$/;//(str);//}/*大写字母*/exportfunctionvalidateUpperCase(str){constreg=/^[A-Z]+$/;(str);}/*大小写字母*/exportfunctionvalidatAlphabets(str){constreg=/^[A-Za-z]+$/;(str);}

版权声明:本站所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流,不声明或保证其内容的正确性,如发现本站有涉嫌抄袭侵权/违法违规的内容。请举报,一经查实,本站将立刻删除。

相关推荐