问题描述

我们前端搭建好一个项目的基本架子以后，就要开始开发页面了。为了看着高大上一些，产品大佬说，加上一个敲击回车键就能登录的效果。好嘞，话不多少，代码为证：

补充

其实还有一种方式，也可以实现敲击回车，自己搞两个input框框，一个按钮，然后给按钮绑定键盘回车事件，但是吧，产品大佬要求我们敏捷开发，所以怎么快，怎么来。哈哈哈

记录一下

问题描述

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

问题

关于如何解除网页不让复制的方式有很多，本篇文章也是其中一种方式。如果帮助到您，欢迎点个赞吧。

问题描述图示

解决方案图示

最终效果

共同交流进步

以前工作写代码遇到不熟悉的，通过思考、查资料、咨询大佬，解决了以后常常喜欢自己用笔记存一份，并不喜欢公开。现在想想的确是不太好，毕竟程序员开发这个行业，在工作中会遇到很多坑。当大家都来分享自己是如何采坑的，就可以减少彼此的踩坑成本，提升开发效率和时间。毕竟很多大佬的优秀项目也都在git上开源。所以以后有空就在思否上写点博客吧。与大家共同分享，共同进步。
写的不好，多见谅