vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼詳解
一、介紹
簡介：在使用elementUI el-form 中，對(duì)于業(yè)務(wù)不同的時(shí)候可能會(huì)產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個(gè)表單控件el-form中。
圖片介紹：
1、在用戶選擇單選或多選時(shí)會(huì)有A,B,C,D,E五個(gè)選項(xiàng)
2、在用戶選擇簡答題時(shí)只會(huì)題干，答案以及解析選項(xiàng)（主要是通過v-if來進(jìn)行判斷）
問題引入：當(dāng)用戶選擇不同的題庫時(shí)會(huì)產(chǎn)生不同的form表單選項(xiàng)，這個(gè)時(shí)候在進(jìn)行表單提交驗(yàn)證的時(shí)候就需要根據(jù)不同試題類型進(jìn)行判斷，這個(gè)時(shí)候就需要兩個(gè)rules來動(dòng)態(tài)進(jìn)行表單校驗(yàn)。
解決方法：在頁面加載的時(shí)候在computed方法中進(jìn)行動(dòng)態(tài)判斷直接返回賦值。
代碼介紹：
// elementui信息
<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList">
<el-form>
// data中定義rules
updateQusRulesSel:[];
updateQusRules:[];
// computed方法
computed: {
// this.updateQusTable.showSelect自己定義的標(biāo)識(shí)
updateQusRulesList: function() {
if (this.updateQusTable.showSelect) {
return this.updateQusRulesSel;
} else {
return this.updateQusRules;
}
}
總結(jié)：在computed中進(jìn)行值綁定，當(dāng)該表單顯示的時(shí)候就會(huì)觸發(fā)(一開始是隱藏的)，如果一開始頁面加載的時(shí)候就觸發(fā)會(huì)無法進(jìn)行值判斷，從而報(bào)錯(cuò)。其實(shí)能解決問題，通過該種方法。
二、最簡單解決方法
在el-form中定義的rules檢驗(yàn)字段，如果你的rules中有字段通過v-if進(jìn)行隱藏，rules是不會(huì)對(duì)隱藏的字段選項(xiàng)進(jìn)行判斷，只要定義一個(gè)完整的rules就行，v-if隱藏的部分不會(huì)進(jìn)入校驗(yàn)方法中。
把簡單的問題復(fù)雜化了！?。。?！
感謝該用戶：
總結(jié)
以上所述是小編給大家介紹的vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析
這篇文章主要介紹了vue項(xiàng)目兩種方式實(shí)現(xiàn)豎向表格的思路分析，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue在mounted中window.onresize不生效問題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)
這篇文章主要介紹了Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue子組件改變父組件傳遞的prop值通過sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定(DEMO)
本文通過一個(gè)demo給大家介紹了vue子組件改變父組件傳遞的prop值通過sync實(shí)現(xiàn)數(shù)據(jù)雙向綁定,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
vue的路由動(dòng)畫切換頁面無法讀取meta值的bug記錄
這篇文章主要介紹了vue的路由動(dòng)畫切換頁面無法讀取meta值的bug記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios（統(tǒng)一管理http請(qǐng)求）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
今天小編就為大家分享一篇關(guān)于vue中的mvvm模式講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
VUE側(cè)邊導(dǎo)航欄實(shí)現(xiàn)篩選過濾的示例代碼
本文主要介紹了VUE側(cè)邊導(dǎo)航欄實(shí)現(xiàn)篩選過濾的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了在vue中import()語法不能傳入變量的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04