使用vue中的混入mixin優(yōu)化表單驗證插件問題

更新時間：2019年07月02日 08:59:43 作者：genetalks_大數(shù)據(jù)

這篇文章主要介紹了使用vue中的混入mixin優(yōu)化表單驗證插件,本文是小編給大家總結的一些表單插件的問題，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

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

1. 實際開發(fā)中遇到的問題

在上面的文章中提及了一些表單插件的問題，主要針對的是插件開發(fā)本身存在的問題。下面我總結下使用中存在的問題:

每個使用表單校驗的元素都需要添加 v-check 類名，比較麻煩。

必須在提交表單按鈕上使用 v-checkSubmit 指令進行表單校驗，提交函數(shù)必須命名為 submit() ，而且二者還是綁定的。

無法在一個組件里面多次使用校驗函數(shù)，無法自定義校驗的表單范圍。（嚴重問題）

2. 對問題進行分析

一開始我的目標是按照之前計劃的方向，研究如何使用事件訂閱發(fā)布來實現(xiàn)表單校驗，但是評估之后這種方式會對現(xiàn)有的代碼改動較大，因為我項目已經(jīng)幾處用了當前的校驗方法，遂放棄這個方向。

經(jīng)過查閱資料和思考，我發(fā)現(xiàn)vue本身是沒有直接處理、生成dom元素的api。所以當前的這種方法（根據(jù)校驗結果添加類名 input-error ，并追加錯誤信息元素）雖然不優(yōu)雅，但是確實最簡單有效的方式了。在這個基礎上針對上面列出的幾個問題，我分別整理了解決的思路：

v-check

3. 實現(xiàn)

綁定自定義指令的時候添加 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.ts
import { 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方法，可以接受一個元素節(jié)點參數(shù)
 * 參數(shù)定義了表單函數(shù)校驗的范圍
 */
 public GValidate(validateEl?: HTMLElement) {
 // 默認是查找當前組件實例內(nèi)的.v-check元素，this.$el表示當前組件
 let elements = this.$el.querySelectorAll('.v-check');
 if ( validateEl ) {
  // 有參數(shù)時，規(guī)定了校驗的范圍
  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. 優(yōu)化后的使用

// 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" 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>

我們可以看到這種方式提供了一個可以訪問當前組件的公共方法。當我們想校驗的時候，只需要引入并使用這個方法即可。通過這種方式的改造，將表單插件內(nèi)部邏輯和校驗過程獨立開了。校驗函數(shù)只返回校驗的結果，我們可以拿到這個校驗結果接著寫任何自己想要的邏輯，使用起來更方便。

總結

以上所述是小編給大家介紹的使用vue中的混入mixin優(yōu)化表單驗證插件,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: