使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件問題
這段時(shí)間開發(fā)的時(shí)候使用到了這個(gè)表單校驗(yàn)插件,用起來(lái)比較麻煩就不說(shuō)了,還有較嚴(yán)重的缺陷。自己最終還是抽空把這個(gè)插件進(jìn)行了一些優(yōu)化,雖然優(yōu)化的方式和當(dāng)初自己定下的方向不怎么相同,但是就使用體驗(yàn)上來(lái)說(shuō)還是提高了很多。
1. 實(shí)際開發(fā)中遇到的問題
在上面的文章中提及了一些表單插件的問題,主要針對(duì)的是插件開發(fā)本身存在的問題。下面我總結(jié)下使用中存在的問題:
每個(gè)使用表單校驗(yàn)的元素都需要添加 v-check
類名,比較麻煩。
必須在提交表單按鈕上使用 v-checkSubmit
指令進(jìn)行表單校驗(yàn),提交函數(shù)必須命名為 submit()
,而且二者還是綁定的。
無(wú)法在一個(gè)組件里面多次使用校驗(yàn)函數(shù),無(wú)法自定義校驗(yàn)的表單范圍。(嚴(yán)重問題)
2. 對(duì)問題進(jìn)行分析
一開始我的目標(biāo)是按照之前計(jì)劃的方向,研究如何使用事件訂閱發(fā)布來(lái)實(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 <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); // 會(huì)打印出A } } </script>
下面我們實(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元素,以此來(lái)判斷檢驗(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 <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">確認(rèn)</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('請(qǐng)不要超過20個(gè)字符'); private inputNameMin = min('請(qǐng)不要小于3個(gè)字符'); private inputNameRequired = required('請(qǐng)輸入用戶名'); private inputNamePattern = pattern('請(qǐng)輸入符合要求的用戶名', /^[a-zA-Z0-9_-]{4,16}$/); private submit() { const validRes = this.GValidate(); // 全局校驗(yàn) const userNameValidRes = this.GValidate(this.$refs.userName); // 單獨(dú)校驗(yàn)?zāi)硞€(gè)表單 if (validRes && userNameValidRes) { alert('通過校驗(yàn)'); } else { alert('校驗(yàn)失敗'); } } } </script>
我們可以看到這種方式提供了一個(gè)可以訪問當(dāng)前組件的公共方法。當(dāng)我們想校驗(yàn)的時(shí)候,只需要引入并使用這個(gè)方法即可。通過這種方式的改造,將表單插件內(nèi)部邏輯和校驗(yàn)過程獨(dú)立開了。校驗(yàn)函數(shù)只返回校驗(yàn)的結(jié)果,我們可以拿到這個(gè)校驗(yàn)結(jié)果接著寫任何自己想要的邏輯,使用起來(lái)更方便。
總結(jié)
以上所述是小編給大家介紹的使用vue中的混入mixin優(yōu)化表單驗(yàn)證插件,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03vue實(shí)現(xiàn)el-select默認(rèn)選擇第一個(gè)或者第二個(gè)
這篇文章主要介紹了vue實(shí)現(xiàn)el-select默認(rèn)選擇第一個(gè)或者第二個(gè),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09