這段時間開發的時候使用到了這個表單校驗插件，用起來比較麻煩就不說了，還有較嚴重的缺陷。自己最終還是抽空把這個插件進行了一些優化，雖然優化的方式和當初自己定下的方向不怎么相同，但是就使用體驗上來說還是提高了很多。

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; } }}