正则表达式--使用

最近，做项目的时候的一个需求：一个输入框，限制只能输入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 属性

<input pattern="/^([1-9]|[1-5][0-9]|60)$/">

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

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

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