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)
  }
});

使用

<input type="text" v-model="text" v-trim>
等同于
<input type="text" v-model.trim="text">

实现其它功能

自动获取焦点

局部指令编写

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

使用

<input v-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";
      }
    }
 }

使用

<input type="text" v-input_style>

实现验证表单

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 max(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 maxlength(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 < validateRuleArr.length; ++i) {
            let requiredRegex = /^required$/, // 判断设置了required
              emailRegex = /^email$/, // 判断设置了email
              phoneRegex = /^phone$/, // 判断设置了 phone
              minRegex = /min\(/, //判断设置了min 最小值
              maxRegex = /max\(/, //判断设置了max 最大值
              minlengthRegex = /minlength\(/, //判断设置了 minlength 最大长度
              maxlengthRegex = /maxlength\(/, //判断设置了 maxlength 最大长度
              regexRegex = /regex\(/;
            // 判断设置了required
            if (requiredRegex.test(validateRuleArr[i])) {
              if (!required()) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断设置了email
            if (emailRegex.test(validateRuleArr[i])) {
              if (!email()) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断设置了 phone
            if (phoneRegex.test(validateRuleArr[i])) {
              if (!phone()) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断是否设置了最小值
            if (minRegex.test(validateRuleArr[i])) {
              if (!eval(validateRuleArr[i])) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断是否设置了最大值
            if (maxRegex.test(validateRuleArr[i])) {
              if (!eval(validateRuleArr[i])) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断设置了最小长度
            if (minlengthRegex.test(validateRuleArr[i])) {
              if (!eval(validateRuleArr[i])) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断设置了最大长度
            if (maxlengthRegex.test(validateRuleArr[i])) {
              if (!eval(validateRuleArr[i])) {
                break;
              } else {
                removeTips();
              }
            }
            // 判断测试正则表达式
            if (regexRegex.test(validateRuleArr[i])) {
              if (!eval(validateRuleArr[i])) {
                break;
              } else {
                removeTips();
              }
            }
          }
        }
        // 监听失去焦点的时候
        el.addEventListener('blur', function () {
          //失去焦点进行验证
          checkedfun();
        });
      }
    }
}

使用

<template>
   <div>
    <div class="input">
      <!-- required：true/false 表示这个是必填项 -->
      <input type="text" v-input v-checked="{required:true,}"><span>{{msg3}}</span>
    </div>
    <div class="input">
      <!-- <input type="text" v-input v-validate="'required|email|phone|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'">
      required  验证是否是必填项
      email 验证是否是邮箱
      phone 验证是否是电话号码
      min(5) 验证最小值
      max(3) 验证最大值
      minlength(6) 验证最小长度
      maxlength(12) 验证最大长度
      regex(/^[0-9]*$/) 进行正则验证
      -->
      <input type="text" v-input
             v-validate="'required|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'" placeholder="多选验证">
    </div>
    <div class="input">
      <!--
      验证必须是数字：/^[0-9]*$/
      验证由26个英文字母组成的字符串：/^[A-Za-z]+$/
      验证手机号： /^[1][3,4,5,7,8][0-9]{9}$/;
      验证邮箱：/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      -->
      <input type="text" v-input v-validate="'required|phone'" placeholder="验证手机号码">
    </div>
    <div class="input">
      <input type="text" v-input v-validate="'required|email'" placeholder="验证邮箱">
    </div>
  </div>
</template>
<style>
  .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;
  }
</style>

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