js 正则表达式禁止输入框输入特殊字符遇到的坑以及解决方案

Posted 2021-05-18 郝峰Vip

前言

---

最近在项目中有一个需求是禁止输入特殊字符，一开始我是在网上找的正则表达式直接用的，后来发现这个表达式同时也禁止了v,x,y,z,所以后来就想了一个比较笨的方法，把所有的特殊字符全部罗列出来，然后在匹配一下。最后在输入的时候禁止就好了。

项目都是在vue中的，所有方法都是在methods里边的。

step 一， 正则表达式解决方案

用这种方式替换，会导致v,x,y,z输入不进去，亲测。

    <el-input
          placeholder="I'm shopping for..."
          v-model="searchVal"
          id="right_radius_set"
          @keyup.native="prohibit_input"
          @keyup.enter.native="toSearch"
        >
          <a slot="suffix" @click="toSearch">
            <i class="el-input__icon el-icon-search"></i>
          </a>
        </el-input>
    prohibit_input() {
       if (this.searchVal != undefined) {
        this.searchVal = this.searchVal.replace(/[^u4e00-u9fa5w]/g, '')
       }

    },

step 二， 把所有的特殊字符都匹配出来

这种方法就可以完美解决禁止输入特殊，目前线上没有发现问题

    <el-input
          placeholder="I'm shopping for..."
          v-model="searchVal"
          id="right_radius_set"
          @keyup.native="prohibit_input"
          @keyup.enter.native="toSearch"
        >
          <a slot="suffix" @click="toSearch">
            <i class="el-input__icon el-icon-search"></i>
          </a>
        </el-input>
    prohibit_input() {
      this.searchVal = this.Prohibit_special_characters(this.searchVal)
    },
    Prohibit_special_characters(special) {
      var special_regular = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\\\[\\\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
      )
      var reflow_special = ''
      for (var i = 0; i < special.length; i++) {
        reflow_special = reflow_special + special.substr(i, 1).replace(special_regular, '')
      }
      return reflow_special
    },

结束语

开发中总是遇到奇奇怪怪的坑，所以还是要多多学习和总结。