一、介紹

創(chuàng)新互聯(lián)主營永修網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),永修h5微信平臺(tái)小程序開發(fā)搭建,永修網(wǎng)站營銷推廣歡迎永修等地區(qū)企業(yè)咨詢

簡介：在使用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信息


 
// 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ù)雜化了！?。。。?/p>

感謝該用戶：

總結(jié)

以上所述是小編給大家介紹的vue elementui el-form rules動(dòng)態(tài)驗(yàn)證的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！