實例代碼：

<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|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]*$/)‘">
  </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>

<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("|");
        // 監聽失去焦點的時候
        el.addEventListener(‘blur‘,function(event){
          //失去焦點進行驗證
          checkedfun();
        });
        // 循環進行驗證
        function checkedfun(){
          for(var i=0; i<validateRuleArr.length; ++i){
            let requiredRegex = /^required$/; // 判斷設置了required
            let emailRegex = /^email$/; // 判斷設置了email
            let phoneRegex = /^phone$/; // 判斷設置了 phone
            let minRegex = /min\(/; //判斷設置了min 最小值
            let maxRegex = /max\(/; //判斷設置了max 最大值
            let minlengthRegex = /minlength\(/; //判斷設置了 minlength 最大長度
            let maxlengthRegex = /maxlength\(/; //判斷設置了 maxlength 最大長度
            let 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();};
            };
          };
        }
        // 驗證是否是必填項
        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 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 removeTips(){
          if(document.getElementsByClassName(‘tipsDiv‘)[0]){
            document.getElementsByClassName(‘tipsDiv‘)[0].remove();
          };
        };
      }
    }
  }
}
</script>

<style>
#app{}
.input{padding-bottom:20px;}
.app input{width: 300px; height: 35px; outline:none; background:#ddd;}
.app 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--自定義指令進行驗證（1）