vue elementui el-form rules動態(tài)驗證的實例代碼詳解
一、介紹
簡介：在使用elementUI el-form 中，對于業(yè)務(wù)不同的時候可能會產(chǎn)生不同表單結(jié)構(gòu)，但是都是存在同一個表單控件el-form中。
圖片介紹：
1、在用戶選擇單選或多選時會有A,B,C,D,E五個選項
2、在用戶選擇簡答題時只會題干，答案以及解析選項（主要是通過v-if來進行判斷）
問題引入：當(dāng)用戶選擇不同的題庫時會產(chǎn)生不同的form表單選項，這個時候在進行表單提交驗證的時候就需要根據(jù)不同試題類型進行判斷，這個時候就需要兩個rules來動態(tài)進行表單校驗。
解決方法：在頁面加載的時候在computed方法中進行動態(tài)判斷直接返回賦值。
代碼介紹：
// elementui信息
<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList">
<el-form>
// data中定義rules
updateQusRulesSel:[];
updateQusRules:[];
// computed方法
computed: {
// this.updateQusTable.showSelect自己定義的標(biāo)識
updateQusRulesList: function() {
if (this.updateQusTable.showSelect) {
return this.updateQusRulesSel;
} else {
return this.updateQusRules;
}
}
總結(jié)：在computed中進行值綁定，當(dāng)該表單顯示的時候就會觸發(fā)(一開始是隱藏的)，如果一開始頁面加載的時候就觸發(fā)會無法進行值判斷，從而報錯。其實能解決問題，通過該種方法。
二、最簡單解決方法
在el-form中定義的rules檢驗字段，如果你的rules中有字段通過v-if進行隱藏，rules是不會對隱藏的字段選項進行判斷，只要定義一個完整的rules就行，v-if隱藏的部分不會進入校驗方法中。
把簡單的問題復(fù)雜化了?。。。?！
感謝該用戶：
總結(jié)
以上所述是小編給大家介紹的vue elementui el-form rules動態(tài)驗證的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue組件生命周期，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue解析剪切板圖片并實現(xiàn)發(fā)送功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue中使用swiper,左右箭頭點擊沒有效果問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
上傳文件，基本上用了input框就可以解決，但大文件應(yīng)該怎樣上傳呢，一次性上傳明顯不現(xiàn)實，因為每次一斷網(wǎng)，那就會從頭開始上傳，所以切片勢在必行，關(guān)鍵就是如何切，怎么保障文件數(shù)據(jù)不會丟失，同時優(yōu)化上傳保障機制，本文就來給大家講講如何上傳大文件2023-07-07
詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸
本篇文章主要介紹了詳解用vue.js和laravel實現(xiàn)微信授權(quán)登陸，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue 實現(xiàn)數(shù)字滾動增加效果的實例代碼
最近做了個項目需要做數(shù)字滾動增加的效果，剛開始接到這個項目還真是懵了，后來發(fā)現(xiàn)實現(xiàn)代碼很簡單的，下面小編給大家?guī)砹藇ue 實現(xiàn)數(shù)字滾動增加效果的實例代碼，需要的朋友參考下吧2018-07-07
這篇文章主要介紹了Vue項目打包部署到apache服務(wù)器，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
解決vue3項目打包后部署后某些靜態(tài)資源圖片不加載問題
這篇文章主要給大家介紹了如何解決vue3項目打包后部署后某些靜態(tài)資源圖片不加載問題,文中通過圖文結(jié)合的方式講解的非常詳細,有需要的朋友可以參考下2024-05-05
本文主要介紹了一文詳解Vue中加上key后發(fā)生什么，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了在vue中實現(xiàn)禁止回退上一步,路由不存歷史記錄，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07