使用vue自定義指令開發(fā)表單驗(yàn)證插件validate.js

// myPlugin.js
export default {
 install: (Vue, options) => {
 // 注冊一個my-directive指令
 Vue.directive('my-directive', {
  bind(el, binding, vnode, oldVnode) {
  // 邏輯
  }
  ...
 })
 }
}
// main.js
import Vue from 'vue';
import myPlugin from 'myPlugin';
Vue.use(myPlugin);

import Vue from 'vue'
export default {
 install: (Vue, options) => {
 // 注冊一個全局自定義指令 `v-validateParams`
 Vue.directive('validateParams', {
  // 當(dāng)被綁定的元素插入到 DOM 中時
  inserted: function (el, binding, vNode) {
  // 給指令綁定的Dom元素添加事件監(jiān)聽，監(jiān)測輸入框失焦事件
  // 每次當(dāng)表單中的輸入框失焦時執(zhí)行函數(shù)
  el.addEventListener('blur', function (event) {
   // 1.首先重置所有錯誤提示
   // 2.獲取自定義指令中傳入的校驗(yàn)規(guī)則參數(shù)和表單輸入的值
   // 3.依次判斷當(dāng)前輸入的值是否符合校驗(yàn)規(guī)則
  })
  }
 })
 // 注冊一個全局自定義指令 `v-validateSubmit`，這個指令綁定到表單的提交button上
 Vue.directive('validateSubmit', {
  // 當(dāng)被綁定的元素插入到 DOM 中時
  inserted: function (el, binding, vNode) {
  // 給提交button添加事件監(jiān)聽
  el.addEventListener('click', function (event) {
   // 獲取當(dāng)前組件內(nèi)所有含有v-check類名的元素
   let elements = vNode.context.$el.getElementsByClassName('v-check')
   var evObj = vNode.context.$el.createEvent('Event')
   evObj.initEvent('blur', true, true)
   for (let element of elements) {
   // 給所有v-check元素綁定blur事件
   element.dispatchEvent(evObj);
   }
   // 獲取當(dāng)前組件下的所有錯誤提示元素
   let errorInputs = vNode.context.$el.getElementsByClassName('input-error');
   // 如果組件中沒有錯誤提示元素，則執(zhí)行當(dāng)前組件實(shí)例中的submit()函數(shù)
   if(errorInputs.length === 0){
   vNode.context.submit();
   }
  })
  }
 })
 }
}

/**
 * 重置當(dāng)前節(jié)點(diǎn)樣式
 * @param el: HTMLElement，傳入當(dāng)前綁定的input元素
 */
const resetError = (el: HTMLElement) => {
 el.className = el.className.replace('input-error', '').trim();
 if ( el.parentNode ) {
 const ErrorNode = el.parentNode.querySelector('.error-tips');
 if (ErrorNode) {
  el.parentNode.removeChild(ErrorNode);
 }
 }
};

// binding.value是傳入自定義指令的參數(shù)，以數(shù)組的形式
for (const rule of binding.value) {
 // 分別獲取到自己定義的校驗(yàn)規(guī)則并執(zhí)行
 const { min, max, message, required, pattern } = rule;
 if ( min && InputEl.value.length < min ) {
 // 如果不符合校驗(yàn)，執(zhí)行報錯函數(shù)
 validateError(InputEl, message);
 break;
 }
 if ( max && InputEl.value.length > max ) {
 validateError(InputEl, message);
 break;
 }
 if ( !!required && !InputEl.value ) {
 validateError(InputEl, message);
 break;
 }
 if ( pattern && !pattern.test(InputEl.value) ) {
 validateError(InputEl, message);
 break;
 }
 if ( rule && typeof rule === 'function' ) {
 rule(vNode.context, InputEl.value, validateError, InputEl);
 break;
 }
}

/**
 * 執(zhí)行錯誤提示函數(shù)，用input-error 類名和含有錯誤信息的p元素表示未通過校驗(yàn)
 * @param el: HTMLElement，傳入當(dāng)前綁定的input元素
 * @param errorMsg: string，傳入錯誤提示信息
 */
const validateError = (el: HTMLElement, errorMsg: string) => {
 if (Array.prototype.includes.call(el.classList, 'input-error')) {
 //如果當(dāng)前組件里已經(jīng)有了錯誤提示信息，什么也不做
 return;
 } else {
 const errorNode = document.createElement('p');
 errorNode.className = 'error-tips';
 errorNode.textContent = errorMsg;
 if (el.parentNode) {
  // 在當(dāng)前input 元素后追加一個p元素，內(nèi)容為錯誤提示
  el.parentNode.appendChild(errorNode);
 }
 // 在當(dāng)前input 元素上添加一個input-error類名
 el.className += ' input-error';
 }
};

// rules.ts
export const required = (message) => ({
 message,
 required: true
});
export const min = (message, length=3) => ({
 message,
 min: length
})
export const max = (message, length=15) => ({
 message,
 max: length
})
export const pattern = (message, reg) => ({
 message,
 pattern: reg
})
// form.vue
<template>
 <div>
 <div class="form-item">
  <label for="userEmail">用戶名：</label>
  <input id="userEmail" class='v-check' type="text" v-model="userName"
  v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]">
 </div>
 <button class="btn" v-if="show" type="success" v-checkSubmit>確認(rèn)</button>
 </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator';
import { max, min, required, name, pattern} from 'rules';

@Component({
 components: {},
})
export default class Auth extends Vue {
 private show: boolean = true;
 private userName: string = '';
 private inputNameMax = max('請不要超過20個字符');
 private inputNameMin = min('請不要小于3個字符');
 private inputNameRequired = required('請輸入用戶名');
 private inputNamePattern = pattern('請輸入符合要求的用戶名', /^[a-zA-Z0-9_-]{4,16}$/);
 private submit() {
 alert('通過校驗(yàn)');
 }
}
</script>