Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

 前言：

网站中的input输入框使用非常广泛，因业务场景不同需要对输入框做合法性校验或限制输入，比如电话号码、邮件、区号、身份证号等。input框的不合法内容主要有两种方式处理：1.用户输入内容后，通过规则验证告知用户不合法，2.禁止输入不符合规则字符。下面基于第2种情况，针对Vue中的input控件通过自定义指令(directive)，使用正则表达式限制input控件的输入。

工作流程：

input控件绑定v-model ---> 通过自定义指令（v-restrict）设定验证的正则表达式 ---> 监控控件的keyup、keydown、paste事件，验证字符合法性 ---> 替换非法字符 ---> 替换后的结果更新绑定到v-model的变量里

控件元素代码：

<v-text-field label="Test"
      v-model="testtext"
      v-restrict="/[^a-zA-Z0-9]/g"
</v-text-field>

自定义指令（directive）代码：

import Vue from "vue";

Vue.directive("restrict", {
  bind(el, binding) {
    const target =
      el instanceof HTMLInputElement ? el : el.querySelector("input");
    target.addEventListener("keydown", e => {
      if (binding.value) {
        // Regex check
        if (binding.value.test(e.target.value)) {
          e.target.value = e.target.value.replace(binding.value, "");
          e.target.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新,下面相同
        }
      }
    });
    target.addEventListener("paste", e => {
      if (binding.value) {
        // Regex check
        if (binding.value.test(e.target.value)) {
          e.target.value = e.target.value.replace(binding.value, "");
          e.target.dispatchEvent(new Event("input"));
        }
      }
    });
    target.addEventListener("keyup", e => {
      if (binding.value) {
        // Regex check
        if (binding.value.test(e.target.value)) {
          e.target.value = e.target.value.replace(binding.value, "");
          e.target.dispatchEvent(new Event("input"));
        }
      }
    });
  } // end bind
}); // end directive

v-model本质及实现原理

通过下面两行代码给input输入框绑定值并添加事件钩子：

这实际上就是 input 实现 v-model 的精髓，通过修改 AST 元素，给 el 添加一个 prop，相当于我们在 input 上动态绑定了 value，又给 el 添加了事件处理，相当于在 input 上绑定了 input 事件，其实转换成模板如下：

其实就是动态绑定了 input 的 value 指向了 messgae 变量，并且在触发 input 事件的时候去动态把 message 设置为目标值，这样实际上就完成了数据双向绑定了，所以说 v-model 实际上就是语法糖。

通过下面的window.getEventListeners(obj)就能看出在这个控件上绑定了input方法，当通过监听事件修改e.target.value时，并未调用input方法，所以v-model的值没有变化，需要通过代码（e.target.dispatchEvent(new Event("input"));）手动触发input事件。

 

下面代码可以验证e.target.value变化与v-model的联动变化过程：

Vue template code:
<v-text-field label="Test"
      v-model="testtext"
      @keyup="testkeyup($event)">
      <v-icon medium
        slot="append"
        @click.native="test()">save</v-icon>
</v-text-field>

Vue script code:
 data{testtext: "zsl"}
 methods: {
    test() {
      this.testtext += "a";
    },
    testkeyup(e) {
      e.target.value += "b";
      var eventb = new Event("input");
      e.target.dispatchEvent(eventb);
      console.log(
        "e.target.value: " +
          e.target.value +
          " | this.testtext: " +
          this.testtext
      );
    }
}

 

获取某元素绑定的所有事件（Listener）

通过Chrome中，在Console窗口里，通过window.getEventListeners(obj)获取某个元素绑定的所有事件（listener）

 

e.target.value的修改（change）不会自动调用vue的input方法，通过dispatchEvent的方式手动调用

e.target.dispatchEvent(new Event("input"));