這段時間在進行一個新項目的前期搭建，新項目框架采用vue-cli3和typescirpt搭建。因為項目比較輕量，所以基本沒有使用額外的ui組件，有時候我們需要的一些基礎組件我就直接自己開發了。今天就來介紹一下如何利用vue的自定義指令directive來開發一個表單驗證插件的過程。
1.vue插件開發
關于vue的插件開發，官方文檔里有很清晰的說明，詳情可以去閱讀開發文檔。我自己開發的表單驗證插件validate.ts和loading，messageBox插件都是利用了這種方式。今天先來看表單驗證插件的開發。
vue全局指令
// myPlugin.jsexport default { install: (Vue, options) => { // 注冊一個my-directive指令 Vue.directive('my-directive', { bind(el, binding, vnode, oldVnode) { // 邏輯 } ... }) }}// main.jsimport Vue from 'vue';import myPlugin from 'myPlugin';Vue.use(myPlugin);上面是注冊一個vue指令插件的寫法。值得注意的是注冊自定義指令的時候，bind()函數為指令的鉤子函數，其中的參數el表示指令綁定的元素，可以直接操作DOM。binding表示一個對象，包括指令名稱，綁定值等信息。vnode和oldVnode表示Vue編譯生成的虛擬節點。
我們通過注冊一個全局指令v-validateParams指令，綁定到輸入表單的input標簽上來校驗當前輸入值是否符合要求。
2.v-validateParams指令
最開始我參考了網上的一些代碼?；A的實現如下：
整體框架
import Vue from 'vue'export default { install: (Vue, options) => { // 注冊一個全局自定義指令 `v-validateParams` Vue.directive('validateParams', { // 當被綁定的元素插入到 DOM 中時 inserted: function (el, binding, vNode) { // 給指令綁定的Dom元素添加事件監聽，監測輸入框失焦事件 // 每次當表單中的輸入框失焦時執行函數 el.addEventListener('blur', function (event) { // 1.首先重置所有錯誤提示 // 2.獲取自定義指令中傳入的校驗規則參數和表單輸入的值 // 3.依次判斷當前輸入的值是否符合校驗規則 }) } }) // 注冊一個全局自定義指令 `v-validateSubmit`，這個指令綁定到表單的提交button上 Vue.directive('validateSubmit', { // 當被綁定的元素插入到 DOM 中時 inserted: function (el, binding, vNode) { // 給提交button添加事件監聽 el.addEventListener('click', function (event) { // 獲取當前組件內所有含有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); } // 獲取當前組件下的所有錯誤提示元素 let errorInputs = vNode.context.$el.getElementsByClassName('input-error'); // 如果組件中沒有錯誤提示元素，則執行當前組件實例中的submit()函數 if(errorInputs.length === 0){ vNode.context.submit(); } }) } }) }}這里需要著重說明一下 validateSubmit 指令，這個指令綁定到提交按鈕上，在點擊的時候執行校驗，校驗通過之后執行提交操作。但是這里的實現方式不是特別友好:
1.需要獲取當前組件中的所有input元素，給他們綁定并執行 blur 事件，以此來執行 validateParams 指令中的校驗邏輯。
2.需要獲取當前組件中的所有錯誤提示元素，如果他們存在就不能執行提交操作。
3.當組件內不含任何錯誤提示元素時，就表示校驗通過，執行當前組件內的 submit 函數，所以每個表單組件的提交函數都只能命名為 submit
然后我們再看下指令 validateParams ，該指令需要綁定到表單 input 元素上，并把校驗規則當作參數寫入。當該input元素失焦時，會執行指令中給當前元素綁定的事件中的邏輯。這些邏輯分為三個步驟，我已經寫在注釋里了，現在我們來看下具體實現。
重置所有錯誤提示
/** * 重置當前節點樣式 * @param el: HTMLElement，傳入當前綁定的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是傳入自定義指令的參數，以數組的形式for (const rule of binding.value) { // 分別獲取到自己定義的校驗規則并執行 const { min, max, message, required, pattern } = rule; if ( min && InputEl.value.length < min ) { // 如果不符合校驗，執行報錯函數 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; }}校驗不符合，執行報錯函數
/** * 執行錯誤提示函數，用input-error 類名和含有錯誤信息的p元素表示未通過校驗 * @param el: HTMLElement，傳入當前綁定的input元素 * @param errorMsg: string，傳入錯誤提示信息 */const validateError = (el: HTMLElement, errorMsg: string) => { if (Array.prototype.includes.call(el.classList, 'input-error')) { //如果當前組件里已經有了錯誤提示信息，什么也不做 return; } else { const errorNode = document.createElement('p'); errorNode.className = 'error-tips'; errorNode.textContent = errorMsg; if (el.parentNode) { // 在當前input 元素后追加一個p元素，內容為錯誤提示 el.parentNode.appendChild(errorNode); } // 在當前input 元素上添加一個input-error類名 el.className += ' input-error'; }};現在我就把自己實現的這個表單校驗插件大致說完了，下面我們看下具體使用。
3.自定義校驗指令v-validateParams使用
首先新建校驗規則文件：
// rules.tsexport 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>確認</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('通過校驗'); }}</script>通過這個例子我們可以看到，使用時需要將校驗規則引入并賦給vue實例中的數據。然后在模板中，需要給 input 標簽添加 v-check 類名，再使用 v-validateParams 指令，并傳入參數。提交按鈕需要調用 v-checkSubmit 指令。按照這種方式就能夠使用自己開發的這個表單校驗插件。
3. 當前方式存在的問題
雖然表單校驗可以使用了，但是存在一些顯而易見的問題：
1.js和html耦合度較高，插件還需要獲取dom元素，組件的html模板中還需要添加指定的類名。
2.在vue中使用dom操作，不符合vue的設計思路，實現方式也不優雅。
3.校驗規則的校驗邏輯在指令定義時寫定了，添加或刪除都需要改動插件代碼。
4.提交指令根據當前組件內的是否含有特定dom來判斷當前校驗狀態，且執行提交的函數名稱也在指令邏輯中寫定了。
我根據現有一個demo結合著自己的需求來實現的這個表單校驗插件，開發的過程中我已經知道這么寫問題很多，甚至不能稱之為一個合格的插件。同時也清楚的認識到自己的javascript水平還很初級，需要很大進步。
當前開發的表單插件的主要問題在于如何將插件中的校驗狀態返回到組件內。我們可以在插件內維護一個事件處理函數，將校驗規則傳入并校驗，再將校驗結果直接傳給組件內。這樣就可以避免大量的dom操作。之后我需要盡快對這個插件進行更科學合理的重構。
總結
以上所述是小編給大家介紹的使用vue自定義指令開發表單驗證插件validate.js，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
