怎么在vue中利用mixin優(yōu)化表單驗(yàn)證插件
這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中利用mixin優(yōu)化表單驗(yàn)證插件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站制作、南岸網(wǎng)絡(luò)推廣、小程序設(shè)計(jì)、南岸網(wǎng)絡(luò)營(yíng)銷、南岸企業(yè)策劃、南岸品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供南岸建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
1. 實(shí)際開發(fā)中遇到的問題
在上面的文章中提及了一些表單插件的問題，主要針對(duì)的是插件開發(fā)本身存在的問題。下面我總結(jié)下使用中存在的問題:
每個(gè)使用表單校驗(yàn)的元素都需要添加 v-check 類名，比較麻煩。
必須在提交表單按鈕上使用 v-checkSubmit 指令進(jìn)行表單校驗(yàn)，提交函數(shù)必須命名為 submit() ，而且二者還是綁定的。
無法在一個(gè)組件里面多次使用校驗(yàn)函數(shù)，無法自定義校驗(yàn)的表單范圍。（嚴(yán)重問題）
2. 對(duì)問題進(jìn)行分析
一開始我的目標(biāo)是按照之前計(jì)劃的方向，研究如何使用事件訂閱發(fā)布來實(shí)現(xiàn)表單校驗(yàn)，但是評(píng)估之后這種方式會(huì)對(duì)現(xiàn)有的代碼改動(dòng)較大，因?yàn)槲翼?xiàng)目已經(jīng)幾處用了當(dāng)前的校驗(yàn)方法，遂放棄這個(gè)方向。
經(jīng)過查閱資料和思考，我發(fā)現(xiàn)vue本身是沒有直接處理、生成dom元素的api。所以當(dāng)前的這種方法（根據(jù)校驗(yàn)結(jié)果添加類名 input-error ，并追加錯(cuò)誤信息元素）雖然不優(yōu)雅，但是確實(shí)最簡(jiǎn)單有效的方式了。在這個(gè)基礎(chǔ)上針對(duì)上面列出的幾個(gè)問題，我分別整理了解決的思路：
v-check
3. 實(shí)現(xiàn)
綁定自定義指令的時(shí)候添加 v-check
import Vue from 'vue'
export default {
install: (Vue, options) => {
Vue.directive('validateParams', {
inserted: function (el, binding, vNode) {
/*
* 解決辦法只需添加下面這一行代碼即可
* el即為當(dāng)前指令綁定的元素，classList.add可以給元素添加類名
*/
el.classList.add('v-check');
el.addEventListener('blur', function (event) {
// ...
})
}
});
}
}定義公共的表單校驗(yàn)方法
如何在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
下面我們實(shí)踐，在表單插件中定義這個(gè)被mixin的校驗(yàn)方法
@Component({})
export class ValidatorMixin extends Vue {
/*
* 定義一個(gè)GValidate方法，可以接受一個(gè)元素節(jié)點(diǎn)參數(shù)
* 參數(shù)定義了表單函數(shù)校驗(yàn)的范圍
*/
public GValidate(validateEl?: HTMLElement) {
// 默認(rèn)是查找當(dāng)前組件實(shí)例內(nèi)的.v-check元素，this.$el表示當(dāng)前組件
let elements = this.$el.querySelectorAll('.v-check');
if ( validateEl ) {
// 有參數(shù)時(shí)，規(guī)定了校驗(yàn)的范圍
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元素，以此來判斷檢驗(yàn)結(jié)果
let errorInputs = this.$el.querySelectorAll('.input-error');
if (validateEl) {
errorInputs = validateEl.querySelectorAll('.input-error');
}
// 將校驗(yàn)的結(jié)果返回
if (errorInputs.length !== 0) {
return false;
} else {
return true;
}
}
}定義了上面的校驗(yàn)方法之后，可以將原插件里面定義 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
用戶名：
確認(rèn)
關(guān)于怎么在vue中利用mixin優(yōu)化表單驗(yàn)證插件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
當(dāng)前文章：怎么在vue中利用mixin優(yōu)化表單驗(yàn)證插件
文章地址：http://m.jiaotiyi.com/article/jdighi.html