自定义指令一【输入金额格式化、输入验证、提交验证】

1【输入金额格式化】

// 输入金额格式化
Vue.directive('rmb', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (dm, binding, vNode) {
    let el = dm.children[0];


    el.addEventListener('keyup', function (event) {
      let s = el.value.replace(/,/g,"");
      let n = 3;
      if(!s){
        dm.children[0].value = 0
      }else{
        n = n > 0 && n <= 20 ? n : 2;
        s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) 

+ "";
        var l = s.split(".")[0].split("").reverse(), r = s.split

(".")[1];
        var t = "";
        for (var i = 0; i < l.length; i++) {
          t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," 

: "");
        }
        dm.children[0].value = t.split("").reverse().join("");
      }



      // if(!value) {
      //   dm.children[0].value ="0.00"
      // }
      // let intPart = Number(value).toFixed(0); //获取整数部分
      // let intPartFormat = intPart.toString().replace(/(\d)(?=(?:

\d{3})+$)/g, '$1,'); //将整数部分逢三一断
      //
      // let floatPart = ".00"; //预定义小数部分
      // let value2Array = value.split(".");
      //
      // //=2表示数据有小数位
      // if(value2Array.length == 2) {
      //   floatPart = value2Array[1].toString(); //拿到小数部分
      //
      //   if(floatPart.length == 1) { //补0,实际上用不着
      //     dm.children[0].value =  intPartFormat + "." + floatPart 

+ '0';
      //   } else {
      //     dm.children[0].value = intPartFormat + "." + floatPart;
      //   }
      //
      // } else {
      //   dm.children[0].value =  intPartFormat + floatPart;
      // }
    })



  }
});

2【输入验证】

//main.js
import Vue from 'vue'
const IP_REGEX = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
const regEn =/[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
// 输入验证
Vue.directive('checkParam', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (dm, binding, vNode) {
    let el = dm.children[0]
    el.addEventListener('keyup', function (event) {

      // 首先去除已有样式
      dm.className = dm.className.replace('input-error', '').trim();
      console.log(event.keyCode);
      // 判断正则
      let regex = binding.value.regex;
      if (regex === 'IpRegex') {
        console.log(IP_REGEX.test(el.value))
        if (IP_REGEX.test(el.value) || regEn.test(el.value)) {
          dm.className += ' input-error'
          console.log(dm.className)
        }
      }
      else if (!regex.test(el.value)) {
        console.log(regex.test(el.value))
        dm.className += ' input-error'
      }
      if (!event.keyCode) { // 加上这个判断就是在提交时，才会校验
        // 判断是否是否必填
        let isRequired = binding.value.required;
        if (isRequired) {
          if (!el.value || el.value === '') {
            dm.className += ' input-error'
          }
        }

        // 判断正则
        let regex = binding.value.regex;
        if (regex === 'IpRegex') {
          console.log(IP_REGEX.test(el.value));
          if (IP_REGEX.test(el.value) || regEn.test(el.value)) {
            dm.className += ' input-error'
          }
        }
        else if (!regex.test(el.value)) {
          dm.className += ' input-error'
        }
      }

      let isRequired = binding.value.required;
      if (isRequired) {
        if (!el.value || el.value === '') {
          dm.className += ' input-error'
        }
      }


    })
  }
});
//test.vue
<el-input v-model="name"  v-checkParam="{required:true,value:'营销任务名称'}" 

3【提交验证】

// 提交验证 main.js
Vue.directive('checkSubmit', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding, vNode) {
    el.addEventListener('click', function (event) {
      let elements = document.getElementsByClassName('v-check');
      var evObj = document.createEvent('Event');
      console.log(Event)
      evObj.initEvent('keyup', true, true);
      for (let element of elements) {
        element.children[0].dispatchEvent(evObj)
      }
      let errorInputs = document.getElementsByClassName('input-error');
      if(errorInputs.length === 0){
        vNode.context.submit();
      }
    })
  }
});
//test.vue
<button class="btn repeat"  v-checkSubmit>添加机构任务明细</button>