Element?UI表單驗證規(guī)則動態(tài)失效問題的解決辦法

更新時間：2023年09月30日 09:30:17 作者：程皮

這篇文章主要給大家介紹了關于Element?UI表單驗證規(guī)則動態(tài)失效問題的解決辦法,Element UI提供了強大的表單驗證功能,可以輕松地對表單進行驗證,需要的朋友可以參考下

問題背景

如下代碼所示：有一個上傳文件的 input 組件，在更新的時候，如果不上傳文件表示不更新，如果要更新則點擊「重新上傳」按鈕將上傳組件顯示出來

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <!-- 這個字段不是必須的沒有寫 prop -->
  <el-form-item v-if="!updateDocument" label="文檔">
    <el-button @click="updateDocument = true">重新上傳</el-button>
    <base-tips margin-left="15px">如需變更請重新上傳文檔</base-tips>
  </el-form-item>
  <!-- 要更新的話：這個字段要求必須，寫 prop  -->
  <el-form-item v-if="updateDocument" label="文檔" prop="document">
    <input
           :accept="supportFilesType"
           ref="documentFile" type="file" @change="documentFileChange"/>
  </el-form-item>
</el-form>

也就是如上圖：不更新的話，該字段不是必須的，提交的時候就不會被校驗，如果更新的話，就要讓這個字段為必填項。

上述代碼：從頁面上看是正常的，有前面那個紅色的 * 號，但是在提交的時候，并沒有觸發(fā)驗證。

解決方案

首先：查看表單組件的信息，最終在 Field 這個屬性下發(fā)現(xiàn)了問題

console.log(this.$refs.form)

進入頁面的時候，F(xiàn)ield 中顯示的字段數(shù)量不包含 document，因為進入頁面默認是不更新
切換到更新狀態(tài)，F(xiàn)ield 中的字段數(shù)量并沒有變更，那么問題就出現(xiàn)在這里了

這種情況的最主要原因是：表單組件沒有觸發(fā)重新渲染，解決方案靠譜的有：

在 el-form-item 上增加 key 屬性，也就是 vue 中的 key
在 el-form-item 上手動寫上指定的，rules

<!-- 寫上 prop，并且手動指定 rules，由于需要不校驗該字段，設置一個規(guī)則 required:false  -->
<el-form-item v-if="!updateDocument" label="文檔" prop="document" :rules="[{required:false}]">
  <el-button @click="updateDocument = true">重新上傳</el-button>
  <base-tips margin-left="15px">如需變更合同請重新上傳文檔</base-tips>
</el-form-item>
<!-- 寫上 prop，由于需要驗證該字段，直接指向原來的 rules 中的規(guī)則-->
<el-form-item v-if="updateDocument" label="文檔" prop="document" :rules="rules.document">
  <input
         :accept="supportFilesType"
         ref="documentFile" type="file" @change="documentFileChange"/>
</el-form-item>