快捷導(dǎo)航

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

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

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

問題背景

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

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

也就是如上圖：不更新的話，該字段不是必須的，提交的時(shí)候就不會(huì)被校驗(yàn)，如果更新的話，就要讓這個(gè)字段為必填項(xiàng)。

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

解決方案

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

console.log(this.$refs.form)

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

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

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

<!-- 寫上 prop，并且手動(dòng)指定 rules，由于需要不校驗(yàn)該字段，設(shè)置一個(gè)規(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">如需變更合同請(qǐng)重新上傳文檔</base-tips>
</el-form-item>
<!-- 寫上 prop，由于需要驗(yàn)證該字段，直接指向原來的 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>

總結(jié)

到此這篇關(guān)于Element UI表單驗(yàn)證規(guī)則動(dòng)態(tài)失效問題解決的文章就介紹到這了,更多相關(guān)ElementUI表單驗(yàn)證規(guī)則動(dòng)態(tài)失效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: