常用的正则规则---整数0到99999正则,XXXXX-XXXXX正则,正整数正则,小数点后两位正则(含0不含0)...
时间:2023-04-05 16:35:27
HTML5
问题描述大家早上好,我们的前端在在做项目的过程中,经常会遇到一些输入框检查,比如限制用户随意输入内容。方法有很多,我该怎么办?这时候,如果能利用好规律性,可能会事半功倍。那么,什么是规律性?我对所谓规律性的理解是前人封装的对象。这个对象有它自己的属性和方法。通常采用常规测试方法进行验证。它根据是否满足条件返回一个布尔值,可以用来判断用户是否在乱敲东西。话不多说,让我们上代码吧!代码思路html部分正则保持两位数(含0)正整数保留两位(不包括0)正整数(不包括0)折扣小数(0-1]折扣小数(0-1)整数[0,99999]XXXXX-XXXXX常规
js部分导出默认{name:"app",data(){return{/*总结:对于正则表达式来说,基本上可以帮我们匹配出合适的效果,但是在某些情况下。正则匹配不行,需要手动转换判断控件*/num0:"",num1:"",num2:"",num3:"",num4:"",num5:"",num6:"",};},methods:{//正则性保留两位数(包括0)check0(){letreg=/^((0{1}\.\d{1,2})|([1-9]\d*\.\d{1,2})|([1-9]+\d*)|0)$/;/*输入的内容可以分为以下几种情况1.值为02.值不是02.1不是0但是是数字2.1.1不是0但是是数字但是保留两位小数就是0.002.1.2不为0就是一个数保留两位小数就不是0类型转换后就变成NaN了,定期检查NaN就是false,所以直接和*/不一致//因为用户输入的数据可能是0或者0.000000的形式,所以这种情况可以直接转为0if(Number(this.num0)==0){this.num0=0;}//如果用户输入不为0,则判断是否为数字else{//如果为数字,按正则处理后保留两位小数if(reg.test(parseFloat((this.num0*1.0).toFixed(2)))){//如果用户输入有两位小数的0.0003,则变成0.00,此时让它显示为0Canif((this.num0*1).toFixed(2)==0){this.num0=0}else{this.num0=(this.num0*1).toFixed(2);}}//不符合的情况是用户输入了一个非数字else{console.log("Notconforming");this.num0="";}}},//整数正则保留两位数(不包括0)check1(){letreg=/^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/if(reg.test(this.num1*1)){console.log("conforms");}//这种写法比较严格,只要没有小数点后两位,直接清零即可else{console.log("Notconforming");this.num1=""}},//正整数(不包括0)check2(){letreg=/^[1-9]\d*$/if(reg.test(this.num2*1)){console.log("满足要求");}else{console.log("不符合要求");this.num2=""}},//discount(0,1]decimalcheck3(){letreg=/^(0\.\d+|1)$/if(reg.test(this.num3*1)){console.log("满足要求");}else{console.log("不满足要求");this.num3=""}},//discount(0,1)decimalcheck4(){letreg=/^(0\.\d+)$/if(reg.test(this.num4*1)){console.log("满足要求");}else{console.log("不符合要求符合要求”);this.num4=""}},//[0,99999]正整数check5(){//console.log(this.num5*1);//下面的正则表达式确实可以匹配到[0,99999]正整数,但是有一个BUG//它也会匹配010020156等类似的数字,所以我们需要转换letreg=/^(0|\+?[1-9][0-9]{0,4})$/if(reg.test(this.num5*1)){console.log("满足要求");//如果字符串0020乘以1,结果为20,则字符串转数字this.num5=this.num5*1+""//最后转回数字,方便传给后台}else{console.log("不符合要求");this.num5=""}},//常规check6(){letreg1=/^([0-9]{5})-([0-9]{5})$/letreg2=/^([0-9]{3})&([0-9]{4})$/if(reg1.test(this.num6)|reg2.test(this.num6)){console.log("满足要求");}else{console.log("不符合要求");this.num6=""}}},};总结在某些情况下,正则可以处理大部分情况,但有时正则会比较死板,结合一些常用的js技巧,可以对输入框进行校验控制实现了。PS:女士们先生们,我在代码里写了很多注释。如果我那里没写清楚,欢迎评论@我,我会再回复的。哈哈哈