這段時間開發的時候使用到了這個表單校驗插件，用起來比較麻煩就不說了，還有較嚴重的缺陷。自己最終還是抽空把這個插件進行了一些優化，雖然優化的方式和當初自己定下的方向不怎么相同，但是就使用體驗上來說還是提高了很多。
1. 實際開發中遇到的問題
在上面的文章中提及了一些表單插件的問題，主要針對的是插件開發本身存在的問題。下面我總結下使用中存在的問題:
每個使用表單校驗的元素都需要添加 v-check 類名，比較麻煩。
必須在提交表單按鈕上使用 v-checkSubmit 指令進行表單校驗，提交函數必須命名為 submit() ，而且二者還是綁定的。
無法在一個組件里面多次使用校驗函數，無法自定義校驗的表單范圍。（嚴重問題）
2. 對問題進行分析
一開始我的目標是按照之前計劃的方向，研究如何使用事件訂閱發布來實現表單校驗，但是評估之后這種方式會對現有的代碼改動較大，因為我項目已經幾處用了當前的校驗方法，遂放棄這個方向。
經過查閱資料和思考，我發現vue本身是沒有直接處理、生成dom元素的api。所以當前的這種方法（根據校驗結果添加類名 input-error ，并追加錯誤信息元素）雖然不優雅，但是確實最簡單有效的方式了。在這個基礎上針對上面列出的幾個問題，我分別整理了解決的思路：
v-check
3. 實現
綁定自定義指令的時候添加 v-check
import Vue from 'vue'export default { install: (Vue, options) => { Vue.directive('validateParams', { inserted: function (el, binding, vNode) { /* * 解決辦法只需添加下面這一行代碼即可 * el即為當前指令綁定的元素，classList.add可以給元素添加類名 */ el.classList.add('v-check'); el.addEventListener('blur', function (event) { // ... }) } }); }}定義公共的表單校驗方法
如何在vue typescript中使用mixin呢
// mixin.tsimport { Component, Vue } from 'vue-property-decorator';@Component({})export class Demo extends Vue { public A: string = 'A'; public doSomething () { }}// component<template></template><script lang="ts">import { Component, Vue, Mixins } from 'vue-property-decorator';import { Demo } from 'mixin.ts';@Component({})export class App extends Mixins(Demo) { private created() { console.log(this.A); // 會打印出A }}</script>下面我們實踐，在表單插件中定義這個被mixin的校驗方法
@Component({})export class ValidatorMixin extends Vue { /* * 定義一個GValidate方法，可以接受一個元素節點參數 * 參數定義了表單函數校驗的范圍 */ public GValidate(validateEl?: HTMLElement) { // 默認是查找當前組件實例內的.v-check元素，this.$el表示當前組件 let elements = this.$el.querySelectorAll('.v-check'); if ( validateEl ) { // 有參數時，規定了校驗的范圍 elements = validateEl.querySelectorAll('.v-check'); } const evObj = document.createEvent('Event'); evObj.initEvent('blur', true, true); if (elements) { for (const element of elements) { element.dispatchEvent(evObj); } } // 還是查找.input-error元素，以此來判斷檢驗結果 let errorInputs = this.$el.querySelectorAll('.input-error'); if (validateEl) { errorInputs = validateEl.querySelectorAll('.input-error'); } // 將校驗的結果返回 if (errorInputs.length !== 0) { return false; } else { return true; } }}定義了上面的校驗方法之后，可以將原插件里面定義 v-checkSubmit 指令的部分刪除了。
4. 優化后的使用
// 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" ref="userName"> <label for="userEmail">用戶名：</label> <input id="userEmail" type="text" v-model="userName" v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]"> </div> <button class="btn" type="success" @click="submit">確認</button> </div></template><script lang='ts'>import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';import { max, min, required, name, pattern} from 'rules';import { yourMixin } from 'yourMixin.ts';@Component({})export default class Auth Mixins(youMixin) { 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() { const validRes = this.GValidate(); // 全局校驗 const userNameValidRes = this.GValidate(this.$refs.userName); // 單獨校驗某個表單 if (validRes && userNameValidRes) { alert('通過校驗'); } else { alert('校驗失敗'); } }}</script>我們可以看到這種方式提供了一個可以訪問當前組件的公共方法。當我們想校驗的時候，只需要引入并使用這個方法即可。通過這種方式的改造，將表單插件內部邏輯和校驗過程獨立開了。校驗函數只返回校驗的結果，我們可以拿到這個校驗結果接著寫任何自己想要的邏輯，使用起來更方便。
總結
以上所述是小編給大家介紹的使用vue中的混入mixin優化表單驗證插件,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
