CV大法-快速用vue指令实现input限制输入

在vue项目中，新增的情况下，需要限制input的输入。一个两个还好说，但架不住上十上百个。怎么办？ 目前项目中使用的是vue指令模式。如下：

inputLimit.js

export default {
  install: function(Vue, options) {
    Vue.$saas = {
      getTargetNode: function(el) {
        return el.nodeName != "INPUT"
          ? el.getElementsByTagName("input")[0]
          : el;
      },
    };
    /**
     * v-limit 必须有值；有以下值可选 ： 
      cens、cen、ens、cns、en、cn、ce、n、c、e、email
      其中c表示中文；e表示英文；n表示数字；s表示符号；email是邮箱的限制，这个比较特殊
      比如cens 表示限制规则为限制只能输入中文、英文、数字、符号
      单一的规则是比较好处理的，
      复杂组合的规则则需要特殊处理，比如只能输入数字，且保留两位小数，不能有多个点，不能是0开头
     */
    var opt = {
      limit: {
        email: /[^(a-zA-Z)(\d)@\.]/,
        cens: /[^a-zA-Z\u4e00-\u9fa5\d\._\-\/]/,
        cen: /[^a-zA-Z\u4e00-\u9fa5\d]/,
        ens: /[^a-zA-Z\d\._\-\/]/,
        cns: /[^\u4e00-\u9fa5\d\._\-\/]/,
        ces: /[^a-zA-Z\u4e00-\u9fa5\._\-\/]/,
        en: /[^a-zA-Z\d]/,
        cn: /[^\u4e00-\u9fa5\d]/,
        cs: /[^\u4e00-\u9fa5\._\-\/]/,
        es: /[^a-zA-Z\._\-\/]/,
        ns: /[^\d\._\-\/]/,
        ce: /[^a-zA-Z\u4e00-\u9fa5]/,
        n: /[^\d]/g,
        c: /[^\u4e00-\u9fa5]/,
        e: /[^a-zA-Z]/,
      }
    };

    Vue.directive("limit", {
      inserted: function(el, binding) {
        var ele = Vue.$saas.getTargetNode(el);
        ele.oninput = function() {
          this.value = this.value.replace(opt.limit[binding.value], "");
        };
      },
    });
    
    /* 使用方法: 
        v-limit="'n'" 
        表示只能输入数字
     */

    Vue.directive("int", {
      inserted: function(el, binding) {
        var ele = Vue.$saas.getTargetNode(el);
        ele.oninput = function() {
          let val = this.value;
          // 开头只能输入一个0
          val = val.replace(/^0+\d+?/g, "0");
          val = val.replace(opt.limit[binding.value], "");
          this.value = val;
        };
      },
    });
    
     /* 使用方法: 
        v-int
        表示只是正整数不能是0开头
    */

    Vue.directive("intTwoDecimal", {
      inserted: function(el, binding) {
        var ele = Vue.$saas.getTargetNode(el);
        ele.oninput = function() {
          let val = this.value;
          // 解决macos 输入。在特定情况下识别为.
          val = val.replace(/。/g, ".");

          // 先把非数字的都替换掉，除了数字和.
          val = val.replace(/[^\d.]/g, "");

          // 保证只有出现一个.而没有多个.
          val = val.replace(/\.{2,}/g, ".");

          // 必须保证第一个为数字而不是.
          val = val.replace(/^\./g, "");

          // 保证.只出现一次，而不能出现两次以上
          val = val
            .replace(".", "$#$")
            .replace(/\./g, "")
            .replace("$#$", ".");

          // 只能输入两个小数
          val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");

          // 开头只能输入一个0
          val = val.replace(/^0+\d+?/g, "0");
          this.value = val;
        };
      },
    });
    
    只能是数字且保留两位，且不能以0开头
     v-inttwodec 
  },
};