vue--自定义验证指令

参考文档：

https://cn.vuejs.org/v2/guide/custom-directive.html
https://www.cnblogs.com/ilovexiaoming/p/6840383.html

实例代码：

<template>
  <div id="app" class="app">
  <h3>{{msg}}</h3>
  <div class="input">
    <input type="text" v-input v-focus ><span>{{msg1}}</span>
  </div>
  <div class="input">
    <input type="text" v-input v-required ><span>{{msg2}}</span>
  </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|min(6)|max(3)|minlength(2)|minlength(10)|regex([0~6])'"> -->
    <input type="text" v-input v-validate="'required|min(2)|max(20)|minlength(6)|maxlength(12)'"><span>{{tipsMsg}}</span>
  </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      msg: '指令',
      tipsBorderColor:'red',
      msg1: '最简单的指令',
      msg2: '验证不能为空的指令',
      msg3: '进行正则验证',
      tipsMsg:'',
    }
  },
  directives: {
    // 修饰input框的指令
    input: {
      // 当被绑定的元素插入到DOM上的时候
      inserted: function(el){
        el.style.width = "300px";
        el.style.height = "35px";
        el.style.lineHeight = "35px";
        el.style.background = "#ddd";
        el.style.fontSize = "16px";
        el.style.border = "1px solid #eee";
        el.style.textIndent = "5px";
        el.style.textIndent = "8px";
        el.style.borderRadius = "5px";
      }
    },
    // input框默认选中的指令
    focus:{
      inserted:function(el){
        el.focus();
      }
    },
    // 不能为空的指令
    required:{
      inserted: function(el){
        el.addEventListener('blur',function(event){
          if(el.value == '' || el.value == null){
            el.style.border = "1px solid red";
            console.log('我不能为空');
          };
        });
      }
    },
    // 验证指令
    checked:{
      inserted: function(el){

      }
    },
    // 验证
    validate: {
      inserted:function(el,validateStr){
        // 将验证规则拆分为验证数组
        let validateRuleArr = validateStr.value.split("|");
        console.log(validateStr);
        console.log(validateRuleArr);
        // 监听失去焦点的时候
        el.addEventListener('blur',function(event){
          console.log(typeof(el.value));
          //失去焦点进行验证
          checkedfun();
        });
        // 循环进行验证
        function checkedfun(){
          for(var i=0; i<validateRuleArr.length; ++i){
            let requiredRegex = /^required$/; // 判断设置了required
            let minRegex = /min(/; //判断设置了min 最小值
            let maxRegex = /max(/; //判断设置了max 最大值
            let minlengthRegex = /minlength(/; //判断设置了 minlength 最大长度
            let maxlengthRegex = /maxlength(/; //判断设置了 maxlength 最大长度
            // 判断是否是 required 调用 require的方法
            if(requiredRegex.test(validateRuleArr[i])){
              if(!required()){break;};
            };
            // 判断是否设置了最小值
            if(minRegex.test(validateRuleArr[i])){
              if(!eval(validateRuleArr[i])){break;};
            };
            // 判断是否设置了最大值
            if(maxRegex.test(validateRuleArr[i])){
              if(!eval(validateRuleArr[i])){break;};
            };
            // 判断设置了最小长度
            if(minlengthRegex.test(validateRuleArr[i])){
              if(!eval(validateRuleArr[i])){break;};
            };
            // 判断设置了最大长度
            if(maxlengthRegex.test(validateRuleArr[i])){
              if(!eval(validateRuleArr[i])){break;};
            };
          };
        }
        // 验证是否是必填项
        function required(){
          if(el.value == '' || el.value == null){
            console.log("不能为空");
            return false;
          };
          return true;
        }
        // 最小值验证
        function min(num){
          if(el.value < num){
            console.log('最小值不能小于'+num);
            return false;
          };
          return true;
        };
        // 最大值验证
        function max(num){
          if(el.value > num){
            console.log('最大值不能大于'+num);
            return false;
          };
          return true;
        };
        // 最小长度验证
        function minlength(length){
          if(el.value.length < length){
            console.log('最小长度不能小于'+length);
            return false;
          };
          return true;
        };
        // 最大长度进行验证
        function maxlength(length){
          if(el.value.length > length){
            console.log('最大长度不能大于'+length);
            return false;
          };
          return true;
        }
      }
    }
  }
}
</script>

<style>
#app{}
.input{padding-bottom:20px;}
.app input{width: 300px; height: 35px; outline:none; background:#ddd;}
.app span{padding-left:20px;}
</style>