基于Vue3+Element Plus 實現(xiàn)多表單校驗demo

更新時間：2024年06月17日 14:46:11 作者：青兔_qT

表單校驗在日常的開發(fā)需求中是一種很常見的需求,通常在提交表單發(fā)起請求前校驗用戶輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗,本文給大家介紹基于Vue3+Element Plus 實現(xiàn)多表單校驗demo,感興趣的朋友一起看看吧

一、使用場景

表單校驗在日常的開發(fā)需求中是一種很常見的需求，通常在提交表單發(fā)起請求前校驗用戶輸入是否符合規(guī)則，通常只需formRef.value.validate()即可校驗，但是，例如一些多步驟表單、動態(tài)表單、以及不同的用戶角色可能看到不同的表單內(nèi)容，因此需要對每個角色所看到的內(nèi)容進行適當?shù)男ｒ灥亩嘤脩艚巧谋韱?，此時，我們就需要同時校驗多個不同的表單。

二、案例

使用以下小demo為例

代碼如下：

<script setup>
   import { ref, reactive } from 'vue'
   const formARef = ref(null)
   const formBRef = ref(null)
   const formA = reactive({
      name: '',
      phone: ''
   })
   const formB = reactive({
      mail: '',
      address: ''
   })
   const rules = {
      name: [
         { required: true, message: '請?zhí)顚懶彰?, trigger: 'blur' }
      ],
      phone: [
         { required: true, message: '請?zhí)顚懯謾C號', trigger: 'blur' }
      ],
      mail: [
         { required: true, message: '請?zhí)顚戉]箱', trigger: 'blur' }
      ],
      address: [
         { required: true, message: '請?zhí)顚懽≈?, trigger: 'blur' }
      ],
   }
   const checkForm = () => {
   }
</script>
<template>
   <div class="box">
      <div class="formBox">
         <h2>表單A</h2>
         <el-form :model="formA" ref="formARef" label-width="auto" :rules="rules">
            <el-form-item label="姓名：" prop="name">
               <el-input v-model="formA.name" />
            </el-form-item>
            <el-form-item label="電話：" prop="phone">
               <el-input v-model="formA.phone" />
            </el-form-item>
         </el-form>
      </div>
      <el-button type="primary" @click="checkForm">點擊同時校驗兩個表單</el-button>
      <div class="formBox">
         <h2>表單B</h2>
         <el-form :model="formB" ref="formBRef" label-width="auto" :rules="rules">
            <el-form-item label="郵箱：" prop="mail">
               <el-input v-model="formB.mail" />
            </el-form-item>
            <el-form-item label="住址：" prop="address">
               <el-input v-model="formB.address" />
            </el-form-item>
         </el-form>
      </div>
   </div>
</template>
<style lang="less">
   .box {
      width: 1000px;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
   .formBox {
      width: 400px;
      height: 600px;
      h2 {
         text-align: center;
         margin-top: 20px;
         font-size: 20px;
      }
   }
</style>

最開始的想法是將兩個表單綁定同一個ref，這樣在調(diào)用ref.value.validate()是否可以同時校驗兩個表單呢？

修改兩個表單同時綁定formARef，點擊按鈕進行校驗

   const checkForm = () => {
      formARef.value.validate(valid => {
         if (valid) {
            console.log('校驗通過了')
         }
      })
   }

效果：

可以看到只有第二個表單進行校驗了，這是因為在Vue3中，使用 ref 綁定表單元素時，如果你給兩個不同的表單元素都綁定了相同的 ref，例如 ref="formRef"，那么在訪問formRef.value 時，實際上只能引用到最后一個具有相同 ref 的表單元素。這是因為 ref 是唯一標識符，不同的 ref 值對應不同的元素或組件實例。簡單理解來說就是第二個組件實例會將第一個組件實例覆蓋掉，所以才會造成只有第二個表單進行了校驗，而第一個表單無反應的情況。

那么，我們重新將兩個表單綁定兩個ref，分別為 formARef 和 formBRef。另外一種思路是我們依次校驗formA 和 formB，在formA校驗通過后再校驗formB是否可行呢？

   const checkForm = () => {
      formARef.value.validate(valid => {
         if (valid) {
            formBRef.value.validate(valid => {
               if (valid) {
                  console.log('校驗通過了')
               }
            })
         }
      })
   }

效果：

可以看到其實是可行的，但是問題也很明顯

1.從開發(fā)角度講，代碼嵌套層數(shù)過多，如果是表單更多只會更嚴重，嚴重影響代碼易讀性和可維護性。

2.從用戶角度講，校驗不全，如下圖可以看到，當表單A校驗不通過時，無法校驗表單B，一旦表單過多，用戶可能需要多次校驗多次修改才可校驗通過，十分影響用戶體驗。

三、解決方案

1.使用async await

我們先查看檢驗返回的結果。

   const checkForm = () => {
      const formValidA = formARef.value.validateField()
      const formValidB = formBRef.value.validateField()
      console.log(formValidA) // Promise <pending>
      console.log(formValidB) // Promise <pending>
   }

通過打印校驗的返回結果可以看到返回的是一個pending狀態(tài)的Promise。這是因為許多表單驗證庫（如 VeeValidate 或 Element Plus 等）在進行異步驗證時會返回 Promise 以便處理異步操作。在這種情況下，validateField方法會返回一個 Promise，而不是直接返回一個布爾值。既然是Promise，我們可以使用async await 去接收Promise返回成功的結果

   const checkForm = async () => {
      const formValidA = await formARef.value.validateField()
      const formValidB = await formBRef.value.validateField()
      console.log(formValidA) // true
      console.log(formValidB) // true
   }

可以看到，如果校驗成功的話，返回的結果為true，如此我們就可以通過判斷 true / false來判斷當前的校驗結果。但是當校驗失敗時，控制臺會報警告：“Unhandled error during execution of component event handler”，原因是當校驗失敗是，Promise會拋出異常而又沒有被及時捕獲所導致，故而，我們用try catch捕獲這個異常

控制臺報異常：

完整代碼：

   const checkForm = async () => {
      try {
         const formValidA = await formARef.value.validateField()
         const formValidB = await formBRef.value.validateField()
         if (formValidA && formValidB) {
            /**  
             * 執(zhí)行校驗通過后的邏輯
             * 下一步操作...
             * 發(fā)請求...
             * 頁面跳轉...
             */
         }
      } catch (error) {
         /**
          * 執(zhí)行校驗失敗拋出異常的邏輯
          */
      }
   }

不過 async await 更像是解決的嵌套的地獄回調(diào)問題，本質(zhì)上還是一個表單一個表單校驗，仍然會有第一個表單校驗失敗不會繼續(xù)校驗，校驗不全面的問題。故而推薦使用Promis.all()

2.使用Promise.all()

在 Promise.all 中，如果其中任何一個 Promise 被 rejected 或拋出異常，則整個 Promise.all 將會立即被 reject，而不會等到其他 Promise 完成。具體地說，一旦一個 Promise 失敗，Promise.all 就會中止并返回一個新的拒絕狀態(tài)的 Promise。其他未完成的 Promise 將會繼續(xù)運行，但是它們的結果將會被忽略，不會進一步處理。

在最后一句話中“其他未完成的Promise將會繼續(xù)運行” 正好符合我們期望的效果

同理依舊使用async await來等待Promise返回成功的結果，并使用try catch捕獲異常

   const checkForm = async () => {
      try {
         const valid = await Promise.all([formARef.value.validateField(), formBRef.value.validateField()])
         console.log(valid) // [true,true]
         if (valid.every(result => result === true)) {
            /**  
             * 執(zhí)行校驗通過后的邏輯
             * 下一步操作...
             * 發(fā)請求...
             * 頁面跳轉...
             */
         }
      } catch (error) {
         /**
          * 執(zhí)行校驗失敗拋出異常的邏輯
          */
      }
   }

效果：

如此，才算真正意義上實現(xiàn)了同時校驗多個表單。

四、總結

/**

* 多表單校驗 async await / Promise.all()

*

* 在 Vue 3 中使用 addFormRule.value.validateField() 方法返回的可能是一個 Promise，

* 這是因為許多表單驗證庫（如 VeeValidate 或 Element Plus 等）在進行異步驗證時會返回 Promise 以便處理異步操作。在這種情況下，validateField 方法會返回一個 Promise，而不是直接返回一個布爾值。

* 【Promise<pending>，Promise<pending>】

*

* 1. async await

* 優(yōu)點：

* 可以分段校驗，當?shù)谝粋€表單校驗失敗后，不會繼續(xù)校驗第二個表單，可在特定邏輯中使用

* 可以使用try catch捕獲錯誤，執(zhí)行錯誤后的邏輯

*

* 缺點：

* 執(zhí)行按照代碼邏輯順序依次校驗

* 當出現(xiàn)校驗失敗時立刻停止，不再校驗未校驗的表單，會出現(xiàn)校驗提示顯示不全問題

*

* 2. Promise.all()

* 優(yōu)點：

* 可以使用try catch捕獲錯誤，執(zhí)行錯誤后的邏輯

* 同時校驗多個表單，即便其中一個表單校驗錯誤，拋出異常，仍會校驗所有表單，頁面表現(xiàn)效果更為理想

*

*/