一、介紹

簡介：在使用elementUI el-form 中，對于業務不同的時候可能會產生不同表單結構，但是都是存在同一個表單控件el-form中。

圖片介紹：

1、在用戶選擇單選或多選時會有A,B,C,D,E五個選項

2、在用戶選擇簡答題時只會題干，答案以及解析選項（主要是通過v-if來進行判斷）

問題引入：當用戶選擇不同的題庫時會產生不同的form表單選項，這個時候在進行表單提交驗證的時候就需要根據不同試題類型進行判斷，這個時候就需要兩個rules來動態進行表單校驗。

解決方法：在頁面加載的時候在computed方法中進行動態判斷直接返回賦值。

代碼介紹：

// elementui信息<el-form :model="addQueTable" ref="addQueTable" :rules="addQueRulesList"><el-form> // data中定義rulesupdateQusRulesSel:[];updateQusRules:[]; // computed方法computed: {// this.updateQusTable.showSelect自己定義的標識 updateQusRulesList: function() {  if (this.updateQusTable.showSelect) {  return this.updateQusRulesSel;  } else {  return this.updateQusRules; }}

總結：在computed中進行值綁定，當該表單顯示的時候就會觸發(一開始是隱藏的)，如果一開始頁面加載的時候就觸發會無法進行值判斷，從而報錯。其實能解決問題，通過該種方法。

二、最簡單解決方法

在el-form中定義的rules檢驗字段，如果你的rules中有字段通過v-if進行隱藏，rules是不會對隱藏的字段選項進行判斷，只要定義一個完整的rules就行，v-if隱藏的部分不會進入校驗方法中。

把簡單的問題復雜化了！！！！！

感謝該用戶：

總結

以上所述是小編給大家介紹的vue elementui el-form rules動態驗證的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！