實例代碼：
<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>