问题形容
诸位看官上午好，咱们前端在做我的项目的过程中，经常遇到一些input框测验，比方限度用户不能乱输出内容。形式有很多种，咋办啊？此时，若能善用正则，或者会事倍功半，那么，什么是正则呢？
所谓正则我的了解，就是一个前人封装好的对象，此对象自带属性和办法，咱们罕用的用来校验的就是正则的test办法，依据是否符合条件返回布尔值，可用于判断用户是否在乱输出内容。
话不多说，上代码！
代码思路
html局部
<div id="app"> 负数正则 保留两位（包含0）<el-input v-model.trim="num0" @change="check0" size="mini"></el-input> 负数正则 保留两位（不包含0）<el-input v-model.trim="num1" @change="check1" size="mini"></el-input> 正整数 (不包含0)<el-input v-model.trim="num2" @change="check2" size="mini"></el-input> 折扣 (0-1] 的小数<el-input v-model.trim="num3" @change="check3" size="mini"></el-input> 折扣 (0-1) 的小数<el-input v-model.trim="num4" @change="check4" size="mini"></el-input> 整数 [0,99999]<el-input v-model.trim="num5" @change="check5" size="mini"></el-input> XXXXX-XXXXX正则<el-input v-model.trim="num6" @change="check6" size="mini"></el-input> </div>js局部
export default { name: "app", data() { return { /* 总结：对应正则表达式而言，基本上能够帮咱们匹配到适合的成果 然而有些状况下。正则匹配的不够用，须要咱们手动转换判断管制一下 */ num0: "", num1:"", num2:"", num3:"", num4:"", num5:"", num6:"", }; }, methods: { // 负数正则 保留两位（包含0） check0() { let reg = /^((0{1}\.\d{1,2})|([1-9]\d*\.\d{1,2})|([1-9]+\d*)|0)$/; /* 输出的内容可分为以下状况 1. 值为0 2. 值为非0 2.1 非0然而是数字 2.1.1 非0是数字，然而保留两位小数就为0.00了 2.1.2 非0是数字，保留两位小数仍不为0 2.2 非0然而不是数字 非数字类型的转化后就变成NaN了，正则查看NaN就为false，所以也是间接不合乎 */ // 因为用户可能输出0或0.000000这样模式的数据，故此情景间接转换为0即可 if (Number(this.num0) == 0) { this.num0 = 0; } // 如果用户输出的不是0，再看看是数字还是不是数字 else { // 如果是数字，且解决后保留两位小数合乎正则 if (reg.test(parseFloat((this.num0 * 1.0).toFixed(2)))) { // 若用户输出0.0003保留两位小数就变成了0.00了，故此时就让其显示为0即可 if((this.num0 * 1).toFixed(2) == 0){ this.num0 = 0 }else{ this.num0 = (this.num0 * 1).toFixed(2); } } // 不合乎的状况就是用户输出非数字 else { console.log("不合乎"); this.num0 = ""; } } }, // 整数正则 保留两位（不包含0） check1(){ let reg = /^((0{1}\.\d{1,2})|([1-9]\d*\.{1}\d{1,2})|([1-9]+\d*))$/ if(reg.test(this.num1*1)){ console.log("合乎"); } // 这样的写法就比拟严格，只有不是两位小数，就间接清空 else{ console.log("不合乎"); this.num1 = "" } }, // 正整数 (不包含0) check2(){ let reg = /^[1-9]\d*$/ if(reg.test(this.num2*1)){ console.log("符合要求"); }else{ console.log("不符合要求"); this.num2 = "" } }, // 折扣(0,1]小数 check3(){ let reg = /^(0\.\d+|1)$/ if(reg.test(this.num3*1)){ console.log("符合要求"); }else{ console.log("不符合要求"); this.num3 = "" } }, // 折扣(0,1)小数 check4(){ let reg = /^(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 // 就是也会匹配到 01 002 0156 等 相似这样的数，所以须要咱们转换一下 let reg = /^(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 = "" } }, // XXXXX-XXXXX或XXX&XXXX等类似的产品编号模式的正则 check6(){ let reg1 = /^([0-9]{5})-([0-9]{5})$/ let reg2 = /^([0-9]{3})&([0-9]{4})$/ if(reg1.test(this.num6) | reg2.test(this.num6)){ console.log("符合要求"); }else{ console.log("不符合要求"); this.num6 = "" } } },};总结
有些时候，用正则能够搞定大多数的状况，不过有的时候正则又会比拟死板，再联合js的一些罕用的小技巧，就能够实现了input框框的校验管制啦。
PS:各位看官，我的代码的正文写的也不少哦。如果那里我没写明确，欢送评论@我，我再回复呢。哈哈哈