elementUI表單驗證踩坑問題怎么解決

1.在v-for的列表下，form表單的驗證該如何精確觸發(fā)
2.對list進(jìn)行增刪操作的時候，如何確保視圖正確更新
3.自定義驗證規(guī)則的時候，如何知道操作的數(shù)據(jù)在數(shù)據(jù)結(jié)構(gòu)中的準(zhǔn)確位置
4.對象深層的key驗證該如何觸發(fā)

           class="boxItem"
         v-for="(item, index) in formData.boxList"
         :key="item.guid"
       >
                     :label="keytolabel(subkey)"
             v-for="(subItem, subkey) in item"
             :key="subkey"
             :prop="`boxList.${index}.${subkey}`"
        
 

第一個問題的解決方案：

我們在遍歷form-item的時候，就需要prop屬性，根據(jù)官方文檔的說明，prop是表單域 model 字段，在使用 validate、resetFields 方法的情況下，該屬性是必填的。正是這個屬性，可以讓組件知道觸發(fā)的時機(jī)。其中的觸發(fā)邏輯沒有去深入研究。

  :prop="`boxList.${index}.${subkey}`"

在rules這里sybkey要和rules的key值對應(yīng)上才可以正常觸發(fā)

     rules: {
       screenlength: [{ validator: lengthhandler, trigger: "blur" }],
      }

如上述所示，根據(jù)list的數(shù)量進(jìn)行遍歷行數(shù)，再根據(jù)item來遍歷列數(shù)。每一列都有不定數(shù)量的key值，那么在這里的我們需要給prop指定到準(zhǔn)確的位置，大概模式就是父key.行數(shù).列key，簡單地來說，就是要將這個值所在的數(shù)據(jù)結(jié)構(gòu)位置告訴element組件。

根據(jù)我的猜測，element表單組件觸發(fā)驗證的邏輯是監(jiān)聽這個值的變化，根據(jù)給定的觸發(fā)條件（change，input，blur，focus等等），符合觸發(fā)條件就去對比是否發(fā)生值的變化，然后根據(jù)驗證規(guī)則去做相應(yīng)的提示。

第二個問題的解決方案：

我們在遍歷form-item的時候,vue會要求必須有一個key，這樣可以正確更新視圖。那么這一個key最大的特點是要操持唯一。我的方案是給key值生成一個唯一id，或者new Date().getTime()生成一個時間戳，當(dāng)我們對列表進(jìn)行操作的時候，就會正確更新視圖了。

例如：當(dāng)我們觸發(fā)第一和第二的item驗證的時候

再去刪除第二個item，視圖就會在刪除之后，驗證提示會刪除

如果不是唯一key，例如使用index做key值，那么這個key是不會變化的，刪除第二個item就會出現(xiàn)以下情況

當(dāng)發(fā)生這種情況的時候，你應(yīng)該考慮的是vue的視圖更新規(guī)則

第三個問題的解決方案：

自定義驗證規(guī)則在官方文檔有詳細(xì)的說明，這一塊就不用細(xì)說了，但是里面的觸發(fā)邏輯需要根據(jù)情況來修改代碼。例如總數(shù)是根據(jù)前面的長和高相乘公式得出的，那么我們需要每次在長和高的值變化的時候，就需要去計算總數(shù)，然后根據(jù)規(guī)則去進(jìn)行提示。

設(shè)置一個currentIndex，在長和高的輸入框組件上定義focus事件，每次觸發(fā)就說明輸入框在操作，這一行就被操作的一行數(shù)據(jù)，那么在定義驗證的時候就知道是哪一行了

  // 在組件focus的時候,就說明想操作這個組件,提前將位置記錄,以便于數(shù)據(jù)驗證
   focus(data) {
     this.currentIndex = data.index;
   },

當(dāng)然，代碼還是要根據(jù)具體交互來編寫

第四個問題的解決方案：

很多時候，我們都只是對表層key進(jìn)行驗證，所以如果需要驗證對象的深層可以的時候，我們需要做特殊處理，和第一個問題的處理方式類似，但又不完全相同。

// 要驗證的數(shù)據(jù)結(jié)構(gòu)：
   formData：{
       sendcard：{
       sendcardsource：""
       }
   }
   //prop：組件屬性
     
       
     
  //rules:規(guī)則設(shè)置
       rules: {
       // 發(fā)送卡
       "sendcard.sendcardsource": [commonRule],
       }

這里的特點就是需要在rules屬性定義一個驗證驗證規(guī)則，prop的值要跟rules的值對應(yīng)上才可以觸發(fā)。這里的特點是，對象和對象的可能會有相同的key，所以這樣做是可以在rules設(shè)置一個唯一的觸發(fā)key值。

讀到這里，這篇“elementUI表單驗證踩坑問題怎么解決”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。