基于Vue3+Element Plus 實現(xiàn)多表單校驗demo
一、使用場景
表單校驗在日常的開發(fā)需求中是一種很常見的需求，通常在提交表單發(fā)起請求前校驗用戶輸入是否符合規(guī)則，通常只需formRef.value.validate()即可校驗，但是，例如一些多步驟表單、動態(tài)表單、以及不同的用戶角色可能看到不同的表單內(nèi)容，因此需要對每個角色所看到的內(nèi)容進行適當?shù)男ｒ灥亩嘤脩艚巧谋韱危藭r，我們就需要同時校驗多個不同的表單。
二、案例
使用以下小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
我們先查看檢驗返回的結(jié)果。
const checkForm = () => {
const formValidA = formARef.value.validateField()
const formValidB = formBRef.value.validateField()
console.log(formValidA) // Promise <pending>
console.log(formValidB) // Promise <pending>
}
通過打印校驗的返回結(jié)果可以看到返回的是一個pending狀態(tài)的Promise。這是因為許多表單驗證庫（如 VeeValidate 或 Element Plus 等）在進行異步驗證時會返回 Promise 以便處理異步操作。在這種情況下，validateField方法會返回一個 Promise，而不是直接返回一個布爾值。既然是Promise，我們可以使用async await 去接收Promise返回成功的結(jié)果
const checkForm = async () => {
const formValidA = await formARef.value.validateField()
const formValidB = await formBRef.value.validateField()
console.log(formValidA) // true
console.log(formValidB) // true
}
可以看到，如果校驗成功的話，返回的結(jié)果為true，如此我們就可以通過判斷 true / false來判斷當前的校驗結(jié)果。但是當校驗失敗時，控制臺會報警告：“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ā)請求...
* 頁面跳轉(zhuǎn)...
*/
}
} 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ù)運行，但是它們的結(jié)果將會被忽略，不會進一步處理。
在最后一句話中“其他未完成的Promise將會繼續(xù)運行” 正好符合我們期望的效果
同理依舊使用async await來等待Promise返回成功的結(jié)果，并使用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ā)請求...
* 頁面跳轉(zhuǎn)...
*/
}
} catch (error) {
/**
* 執(zhí)行校驗失敗拋出異常的邏輯
*/
}
}效果：
如此，才算真正意義上實現(xiàn)了同時校驗多個表單。
四、總結(jié)
/**
* 多表單校驗 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)效果更為理想
*
*/
以上便是 “基于Vue3+Element Plus 實現(xiàn)多表單校驗” 的全部內(nèi)容，希望對您有所幫助~如您有任何疑問及指正，歡迎評論指出~
到此這篇關(guān)于基于Vue3+Element Plus 實現(xiàn)多表單校驗demo的文章就介紹到這了,更多相關(guān)Vue3多表單校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過案例給大家詳細分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue中如何實現(xiàn)字符串換行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue實現(xiàn)帶進度條的文件拖動上傳功能,本文通過實例代碼給大家介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
本篇文章主要介紹了Vue官網(wǎng)todoMVC示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本篇文章主要介紹了vue.js實例todoList項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue使用swiper的時候第二輪事件不會觸發(fā)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue語法自動轉(zhuǎn)typescript(解放雙手)
這篇文章主要介紹了vue語法自動轉(zhuǎn)typescript，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue3實現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實現(xiàn),具體選擇哪種方法取決于應用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學跟著小編來看看吧2024-04-04
本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
在Vue中,通過自定義指令v-copy和document.execCommand方法,可以實現(xiàn)點擊按鈕復制內(nèi)容到剪貼板的功能,適用于處理長文本或多行文本的復制需求,而readonly屬性可避免內(nèi)容被修改和移動設(shè)備上的虛擬鍵盤干擾,感興趣的朋友一起看看吧2024-09-09