antd vue form 手動校驗_三分鐘為你細數 Vue el-form 表單校驗的坑點

背景

Vue 的 el-form 提供了表單校驗功能，通過 :rules 屬性設定校驗規則，并通過 el-form-item 的 prop 屬性綁定校驗規則。通過封裝，讓前端校驗更友善。具體使用過程中，有幾個容易出錯的地方，本文來整理一下。每一個坑都是筆者親自趟過的，寫完本文後，以後應該不會再踏入相同的坑。

el-form 的 model 屬性

el-form 的 model 屬性是用來指定表單使用的資料的，雖然 el-form 指定了 model 對象，理論上，vue 并沒有限制 el-input 綁定的資料，el-form 内部的 el-input 元件依然可以綁定其他資料。

需要注意的是，如果要用 rules 進行表單校驗，那麼 el-input 綁定的元素必須是 el-form 的 model 的直接屬性，否則會導緻校驗失敗。

這段代碼中 el-form 的 model 是 groupData，那麼 el-form-item 中所有需要校驗的表單的 的 model 也必須是 groupData.xxx ，即 groupData 對象的直接屬性。

el-from-item 的 prop 屬性

el-from-item 的 prop 屬性必須與 el-input 中需要校驗的表單屬性一緻。

要校驗的表單 model 是 data.strategyName，那麼 prop 的值也必須是 strategyName，否則無法正确完成校驗，出現明明已經已經輸入了表單值，但是還是出現校驗失敗的提示資訊。

多表單校驗

el-form-item 内部如果包含多個表單，預設校驗失敗時會将所有表單高亮，例如：

預設情況多表單校驗

雖然隻有第二個表單沒有輸入，但是校驗失敗時會同時高亮兩個表單。

怎麼隻對第二個表單高亮呢？

解決辦法是用嵌套：外層 el-form-item 是正常的資訊，内層對第二個表單再次嵌套 el-form-item 指定校驗屬性：

每小時每日每周每月
           

将日期輸入框包裹在新的 el-form-item 中，外層的 el-form-item 添加 requred 顯示前面的紅星，就可以隻對該屬性校驗了，将第二個表單再嵌套後，校驗結果就正常了：

使用嵌套隻針對一個進行校驗

非直接子屬性的校驗問題

如果待校驗的表單不是 el-form 的 model 的直接子屬性，而是子屬性的子屬性，即子屬性為對象，比如這段代碼：

此處校驗的是 data.config.gapTime 屬性，那麼該怎麼對其進行校驗呢？

答案是， rules 中定義的該屬性也必須是對象，必須保證 el-form-item 的 prop 是和表單屬性一樣 prop="config.gapTime" 。

rules: {        config: {          gapTime: [            { required: true, message: '請輸入執行周期', trigger: 'blur' },          ],        },      },
           

否則，就會出現明明已經輸入了值，但是還是提示校驗錯誤資訊。

啟示錄

表單校驗的時候，犯了幾個低級錯誤，記錄如下：

1. el-form 下的 el-input 使用的資料不是 el-form 的 model 資料，導緻校驗失敗；
2. el-form 的 :rules 屬性敲錯了，忘記了冒号，導緻傳遞的是個字元串；
3. el-form-item 的 prop 和 el-input 表單的屬性不一緻導緻校驗失敗。

表單校驗還有三種常見問題：

• please transfer a valid prop path to form item 屬性綁定異常如何解決？
• el-popover 中的 readonly 屬性，如何進行校驗？
• v-for 動态生成的表單，如何校驗？

下一節将繼續介紹這兩個問題的解決辦法。