关于html5:常用正则之整数0到99999正则XXXXXXXXXX正则正整数正则保留两位小数正则含0和不含0

54次阅读

共计 2772 个字符,预计需要花费 7 分钟才能阅读完成。

问题形容

诸位看官上午好,咱们前端在做我的项目的过程中,经常遇到一些 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: 各位看官,我的代码的正文写的也不少哦。如果那里我没写明确,欢送评论 @我,我再回复呢。哈哈哈

正文完
 0