正则表达式--使用

女爷i 2022-11-13 14:26 246阅读 0赞

最近，做项目的时候的一个需求：一个输入框，限制只能输入1~60的数字

开始的考虑自己写判断，但是这样太麻烦了，那么为什么不使用正则表达式呢？

以前没有使用过正则表达式，查了些资料，现在总结一下：

我们可以这样做：

这是一个element的input组件

<el-input 
      v-model="input" 
      placeholder="请输入内容" 
      @input="inputChange()">
    </el-input>

inputChange方法：， ；

inputChange($event) {
      //方法一：查找输入框中是否存在1~60的数字，如果没有，提示
      if(!this.input.replace(/^([1-9]|[1-5][0-9]|60)$/)alert('不能输入1-60范围外的数字！')"
      //方法二：如果输入不是1~60之间的数字，提示
       if {
            /^([1-9]|[1-5][0-9]|60)$/.test(
              this.input
            )} 
       else{
            this.$toast("不能输入1-60范围外的数字！");
            this.input = "";
       }
      //方法三：在输入框内检索1~60的值，如果结果为null，提示
      this.input=this.input.match(/^([1-9]|[1-5][0-9]|60)$/g)
      if(this.input==null){
        this.$toast("不能输入1-60范围外的数字！");
      }

解析：

先说一下方法一的replace()方法，他原本是用于在字符串中用一些字符替换另外一些字符，或替换一个与正则表达式匹配的字串的；用在这里，我们变换了一下使用方式，如果我们的输入没有匹配上这个正则表达式，那么提示

接下来是方法二的test()方法，如果不满足这个正则表达式，输入被被置为'’

方法三的match()方法，在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，在这里我们使用的是正则的，如果找不到正则的匹配，提示

另外还可以有一个方法四，就是HTML 5 <input> pattern 属性

以上是小编了解到的四种使用正则表达式的方法。

在小编写这个需求的实现的时候，难题不是怎么使用这个正则表达式，而是正则表达式的写法，因为开始找到了一个以为正确的表达式，但是实现不了效果，就找自身的原因，找了好久，最后才怀疑是表达式的问题，真的是好难过。。。

下一篇，小编将为大家介绍一些常用的正则语法