vue自定义指令实现表单过滤以及验证

操作 实现字符串过滤-去除两边空格

全局指令编写

Vue.directive('trim',{
  bind:function(e,b,n){
    n.elm.addEventListener('blur',()=>{
      // console.log('失去焦点')
      e.value = n.elm.value.trim();
      e.dispatchEvent(new Event('input'));//调用input事件使vue v-model绑定更新
    });
  },
  inserted:function(){
    // console.log('inserted指令')
    // console.log(this)        //  指令内部this指向window
  },
  update:function(e,b,n){
    console.log('参数发生改变')
    console.log(n.data.domProps.value)
  }
});

使用

等同于

实现其它功能 自动获取焦点

局部指令编写

directives: {
	focus: {
      inserted: function (el) {
        el.focus();
      }
    }
}

使用

指令输入框样式

局部指令编写

  directives: {
    // 修饰input框的指令
    input_style: {
      // 当被绑定的元素插入到DOM上的时候
      inserted: function (el) {
        el.style.width = "300px";
        el.style.height = "60px";
        el.style.background = "#fafafa";
        el.style.fontSize = "16px";
        el.style.border = "1px solid #cccccc";
        el.style.textIndent = "5px";
      }
    }
 }

使用

实现验证表单

directives: {
      // 验证
    validate: {
      inserted: function (el, validateStr) {
        // 将验证规则拆分为验证数组
        let validateRuleArr = validateStr.value.split("|");
        // 移除提示信息
        function removeTips() {
          if (document.getElementsByClassName('tipsDiv')[0]) {
            document.getElementsByClassName('tipsDiv')[0].remove();
          }

        }
        // 添加提示信息
        function tipMsg(msg) {
          removeTips();
          let tipsDiv = document.createElement('div');
          let curDate = Date.parse(new Date());
          tipsDiv.innerText = msg;
          tipsDiv.className = "tipsDiv";
          tipsDiv.id = curDate;
          tipsDiv.style.position = "absolute";
          tipsDiv.style.top = el.offsetTop + 45 + 'px';
          tipsDiv.style.left = el.offsetLeft + 'px';
          document.body.appendChild(tipsDiv);
          //setTimeout(function(){
          //  document.getElementById(curDate).remove();
          //},2000);
        }
        // 验证是否是必填项
        function required() {
          if (el.value === '' || el.value === null) {
            // console.log("不能为空");
            tipMsg("不能为空");
            return false;
          }
          return true;
        }
        // 验证是否是邮箱
        function email() {
          let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
          if (!emailRule.test(el.value)) {
            tipMsg("请输入正确的邮箱地址");
            return false;
          }
          return true;
        }
        // 验证是否是手机号码
        function phone() {
          let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
          if (!phoneRule.test(el.value)) {
            tipMsg("请输入正确的手机号码");
            return false;
          }
          return true;
        }
        // 最小值验证
        function min(num) {
          if (el.value  num) {
            tipMsg("最大值不能大于" + num);
            //console.log('最大值不能大于'+num);
            return false;
          }
          return true;
        }
        // 最小长度验证
        function minlength(length) {
          if (el.value.length  length) {
            //console.log('最大长度不能大于'+length);
            tipMsg("最大长度不能大于" + length);
            return false;
          }
          return true;
        }
        // 进行正则表达式的验证
        function regex(rules) {
          if (!rules.test(el.value)) {
            tipMsg("请输入正确的格式");
            return false;
          }
          return true;
        }
        // 循环进行验证
        function checkedfun() {
          for (let i = 0; i 
      
      {{msg3}}
    
    
      
      
    
    
      
      
    
    
      
    
  


  .input {
    padding-bottom: 20px;
    float: left;
    clear: both;
    margin-left: 500px;
    display: block;
  }
  .check input {
    width: 300px;
    height: 35px;
    outline: none;
    background: #ddd;
  }
  .check span {
    padding-left: 20px;
  }
  .tipsDiv {
    height: 27px;
    line-height: 25px;
    border: 1px solid #333;
    background: #333;
    padding: 0px 5px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
  }
  .tipsDiv:before {
    content: '';
    display: block;
    border-width: 0 5px 8px;
    border-style: solid;
    border-color: transparent transparent #000;
    position: absolute;
    top: -9px;
    left: 6px;
  }

vue官方文档自定义指令https://cn.vuejs.org/v2/guide/custom-directive.html