vue自定义组件控制输入框禁止输入某些文字与只允许输入某些类型的文字

vue中实现输入框禁止输入某些文字和普通js实现略有不同。

---

在普通js中，我们只需要监听键盘输入事件，将value重赋值为过滤后的字符串即可。

但vue中略有不同。

vue为input,textarea等输入类型的弄了个双向绑定v-model。

双向绑定的数据，父子组件的值是相同的。所以为了保证父子组件v-model的值相同，每当input标签的value改变后，我们还需要改变父组件中data的值。

vue中，我们可以通过子组件发送input事件，来达到这个目的。（v-model 和 v-bind的区别就是v-model 是加强版，是 v-bind + @input = ‘value = event..target.value’ 的组合）

下面代码实现了只允许输入纯数字、电话、身份证（中国） 的输入框或文本区：

<!--
限制input组件。说明：
使用形式
<limit-input v-model="applyInfo.phone" placeholder="请输入联系电话" only="tel" :clear="/[\d]/"></limit-input>
only限制只可以输入以及限制父组件绑定的数据。参数可以为tel（0-9*-+#）|number（0-9）|idCard（0-9Xx）。默认不限制。
clear接受单个正则表达式或正则数组，用于去掉符合条件的字符。only的补充。正则表达式会直接被用在replace中，如果需要全部替换掉符合条件的字符串，注意加上正则的/g。
注意，组件只是限制输入的字符，并不意味着，输入完就一定是合法、不用校验的。
-->
<style>
</style>
<template>
  <!--只要有输入，inputVal就会改变，此时watch观察到，对之进行过滤-->
  <input :value="inputVal" @input="inputVal=$event.target.value" v-if="ty==='input'"/>
  <textarea :value="inputVal" @input="inputVal=$event.target.value" v-else="ty==='textarea'"></textarea>
</template>
<script>

  export default {
    name: "LimitInput",
    props: {
      value: {},
      ty:{
        default:'input',
        validator(val){
          return ['input','textarea'].indexOf(val.trim())!==-1;
        }
      },
      only: {
        type: String,
        validator(val) {
          return ['number', 'tel', 'idCard'].indexOf(val.trim()) !== -1;
        }
      },
      clear: {
        default: () => [],
        type: RegExp | Array
      }
    },
    data() {
      return {
        inputVal: "",
      }
    },
    created() {
      //初始时，改变inputVal的值，触发watch以进行一些输入限制
      this.inputVal = this.value;
    },
    methods: {
      limit(val) {
        if (!val) {
          return
        }

        let only = this.only;

        //处理only的方式
        if ('number' === only) {//只允许输入数字
          val = val.replace(/[^\d]/g, '')
        } else if ('tel' === only) {
          val = val.replace(/[^\d-+\*\#]/g, '');
        } else if ('idCard' === only) {
          val = val.replace(/[^\dxX]/g, '');
        }

        //处理clear正则替换
        if (this.clear.length>0) {//正则数组
          for (let i = 0; i < this.clear.length; i++) {
            val = val.replace(this.clear[i], '');
          }
        } else {//空的数组或单个正表达式
          if (this.clear.length !== 0) {
            val = val.replace(this.clear, '');
          }
        }

        return val;
      },

    },
    watch: {
      value(nVal, oVal) {//监听父组件传进来的value
        // console.log(nVal)
        //改变input框中的内容
        this.inputVal = this.limit(nVal)
        // //重发事件，改变父组件v-model绑定的值
        this.$emit('input', this.inputVal);
      },
      inputVal(nVal, oVal) {//监听当前value
        //改变input框中的内容
        this.inputVal = this.limit(nVal)
        // //重发事件，改变父组件v-model绑定的值
        this.$emit('input', this.inputVal);
      }
    }
  }
</script>