基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo
一、使用場(chǎng)景
表單校驗(yàn)在日常的開(kāi)發(fā)需求中是一種很常見(jiàn)的需求，通常在提交表單發(fā)起請(qǐng)求前校驗(yàn)用戶輸入是否符合規(guī)則，通常只需formRef.value.validate()即可校驗(yàn)，但是，例如一些多步驟表單、動(dòng)態(tài)表單、以及不同的用戶角色可能看到不同的表單內(nèi)容，因此需要對(duì)每個(gè)角色所看到的內(nèi)容進(jìn)行適當(dāng)?shù)男ｒ?yàn)的多用戶角色的表單，此時(shí)，我們就需要同時(shí)校驗(yàn)多個(gè)不同的表單。
二、案例
使用以下小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: '請(qǐng)?zhí)顚?xiě)姓名', trigger: 'blur' }
],
phone: [
{ required: true, message: '請(qǐng)?zhí)顚?xiě)手機(jī)號(hào)', trigger: 'blur' }
],
mail: [
{ required: true, message: '請(qǐng)?zhí)顚?xiě)郵箱', trigger: 'blur' }
],
address: [
{ required: true, message: '請(qǐng)?zhí)顚?xiě)住址', 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">點(diǎn)擊同時(shí)校驗(yàn)兩個(gè)表單</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>最開(kāi)始的想法是將兩個(gè)表單綁定同一個(gè)ref，這樣在調(diào)用ref.value.validate()是否可以同時(shí)校驗(yàn)兩個(gè)表單呢？
修改兩個(gè)表單同時(shí)綁定formARef，點(diǎn)擊按鈕進(jìn)行校驗(yàn)
const checkForm = () => {
formARef.value.validate(valid => {
if (valid) {
console.log('校驗(yàn)通過(guò)了')
}
})
}效果：
可以看到只有第二個(gè)表單進(jìn)行校驗(yàn)了，這是因?yàn)樵赩ue3中，使用 ref 綁定表單元素時(shí)，如果你給兩個(gè)不同的表單元素都綁定了相同的 ref，例如 ref="formRef"，那么在訪問(wèn)formRef.value 時(shí)，實(shí)際上只能引用到最后一個(gè)具有相同 ref 的表單元素。這是因?yàn)?ref 是唯一標(biāo)識(shí)符，不同的 ref 值對(duì)應(yīng)不同的元素或組件實(shí)例。簡(jiǎn)單理解來(lái)說(shuō)就是第二個(gè)組件實(shí)例會(huì)將第一個(gè)組件實(shí)例覆蓋掉，所以才會(huì)造成只有第二個(gè)表單進(jìn)行了校驗(yàn)，而第一個(gè)表單無(wú)反應(yīng)的情況。
那么，我們重新將兩個(gè)表單綁定兩個(gè)ref，分別為 formARef 和 formBRef。另外一種思路是我們依次校驗(yàn)formA 和 formB，在formA校驗(yàn)通過(guò)后再校驗(yàn)formB是否可行呢？
const checkForm = () => {
formARef.value.validate(valid => {
if (valid) {
formBRef.value.validate(valid => {
if (valid) {
console.log('校驗(yàn)通過(guò)了')
}
})
}
})
}效果：
可以看到其實(shí)是可行的，但是問(wèn)題也很明顯
1.從開(kāi)發(fā)角度講，代碼嵌套層數(shù)過(guò)多，如果是表單更多只會(huì)更嚴(yán)重，嚴(yán)重影響代碼易讀性和可維護(hù)性。
2.從用戶角度講，校驗(yàn)不全，如下圖可以看到，當(dāng)表單A校驗(yàn)不通過(guò)時(shí)，無(wú)法校驗(yàn)表單B，一旦表單過(guò)多，用戶可能需要多次校驗(yàn)多次修改才可校驗(yàn)通過(guò)，十分影響用戶體驗(yàn)。
三、解決方案
1.使用async await
我們先查看檢驗(yàn)返回的結(jié)果。
const checkForm = () => {
const formValidA = formARef.value.validateField()
const formValidB = formBRef.value.validateField()
console.log(formValidA) // Promise <pending>
console.log(formValidB) // Promise <pending>
}
通過(guò)打印校驗(yàn)的返回結(jié)果可以看到返回的是一個(gè)pending狀態(tài)的Promise。這是因?yàn)樵S多表單驗(yàn)證庫(kù)（如 VeeValidate 或 Element Plus 等）在進(jìn)行異步驗(yàn)證時(shí)會(huì)返回 Promise 以便處理異步操作。在這種情況下，validateField方法會(huì)返回一個(gè) Promise，而不是直接返回一個(gè)布爾值。既然是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
}
可以看到，如果校驗(yàn)成功的話，返回的結(jié)果為true，如此我們就可以通過(guò)判斷 true / false來(lái)判斷當(dāng)前的校驗(yàn)結(jié)果。但是當(dāng)校驗(yàn)失敗時(shí)，控制臺(tái)會(huì)報(bào)警告：“Unhandled error during execution of component event handler”，原因是當(dāng)校驗(yàn)失敗是，Promise會(huì)拋出異常而又沒(méi)有被及時(shí)捕獲所導(dǎo)致，故而，我們用try catch捕獲這個(gè)異常
控制臺(tái)報(bào)異常：
完整代碼：
const checkForm = async () => {
try {
const formValidA = await formARef.value.validateField()
const formValidB = await formBRef.value.validateField()
if (formValidA && formValidB) {
/**
* 執(zhí)行校驗(yàn)通過(guò)后的邏輯
* 下一步操作...
* 發(fā)請(qǐng)求...
* 頁(yè)面跳轉(zhuǎn)...
*/
}
} catch (error) {
/**
* 執(zhí)行校驗(yàn)失敗拋出異常的邏輯
*/
}
}不過(guò) async await 更像是解決的嵌套的地獄回調(diào)問(wèn)題，本質(zhì)上還是一個(gè)表單一個(gè)表單校驗(yàn)，仍然會(huì)有第一個(gè)表單校驗(yàn)失敗不會(huì)繼續(xù)校驗(yàn)，校驗(yàn)不全面的問(wèn)題。故而推薦使用Promis.all()
2.使用Promise.all()
在 Promise.all 中，如果其中任何一個(gè) Promise 被 rejected 或拋出異常，則整個(gè) Promise.all 將會(huì)立即被 reject，而不會(huì)等到其他 Promise 完成。 具體地說(shuō)，一旦一個(gè) Promise 失敗，Promise.all 就會(huì)中止并返回一個(gè)新的拒絕狀態(tài)的 Promise。其他未完成的 Promise 將會(huì)繼續(xù)運(yùn)行，但是它們的結(jié)果將會(huì)被忽略，不會(huì)進(jìn)一步處理。
在最后一句話中“其他未完成的Promise將會(huì)繼續(xù)運(yùn)行” 正好符合我們期望的效果
同理依舊使用async await來(lái)等待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í)行校驗(yàn)通過(guò)后的邏輯
* 下一步操作...
* 發(fā)請(qǐng)求...
* 頁(yè)面跳轉(zhuǎn)...
*/
}
} catch (error) {
/**
* 執(zhí)行校驗(yàn)失敗拋出異常的邏輯
*/
}
}效果：
如此，才算真正意義上實(shí)現(xiàn)了同時(shí)校驗(yàn)多個(gè)表單。
四、總結(jié)
/**
* 多表單校驗(yàn) async await / Promise.all()
*
* 在 Vue 3 中使用 addFormRule.value.validateField() 方法返回的可能是一個(gè) Promise，
* 這是因?yàn)樵S多表單驗(yàn)證庫(kù)（如 VeeValidate 或 Element Plus 等）在進(jìn)行異步驗(yàn)證時(shí)會(huì)返回 Promise 以便處理異步操作。在這種情況下，validateField 方法會(huì)返回一個(gè) Promise，而不是直接返回一個(gè)布爾值。
* 【Promise<pending>，Promise<pending>】
*
* 1. async await
* 優(yōu)點(diǎn)：
* 可以分段校驗(yàn)，當(dāng)?shù)谝粋€(gè)表單校驗(yàn)失敗后，不會(huì)繼續(xù)校驗(yàn)第二個(gè)表單，可在特定邏輯中使用
* 可以使用try catch捕獲錯(cuò)誤，執(zhí)行錯(cuò)誤后的邏輯
*
* 缺點(diǎn)：
* 執(zhí)行按照代碼邏輯順序依次校驗(yàn)
* 當(dāng)出現(xiàn)校驗(yàn)失敗時(shí)立刻停止，不再校驗(yàn)未校驗(yàn)的表單，會(huì)出現(xiàn)校驗(yàn)提示顯示不全問(wèn)題
*
* 2. Promise.all()
* 優(yōu)點(diǎn)：
* 可以使用try catch捕獲錯(cuò)誤，執(zhí)行錯(cuò)誤后的邏輯
* 同時(shí)校驗(yàn)多個(gè)表單，即便其中一個(gè)表單校驗(yàn)錯(cuò)誤，拋出異常，仍會(huì)校驗(yàn)所有表單，頁(yè)面表現(xiàn)效果更為理想
*
*/
以上便是 “基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)” 的全部?jī)?nèi)容，希望對(duì)您有所幫助~如您有任何疑問(wèn)及指正，歡迎評(píng)論指出~
到此這篇關(guān)于基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo的文章就介紹到這了,更多相關(guān)Vue3多表單校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js與 ASP.NET Core 服務(wù)端渲染功能整合
本文通過(guò)案例給大家詳細(xì)分析了ASP.NET Core 與 Vue.js 服務(wù)端渲染,需要的朋友可以參考下2017-11-11
這篇文章主要介紹了Vue中如何實(shí)現(xiàn)字符串換行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能
這篇文章主要介紹了Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-02-02
本篇文章主要介紹了Vue官網(wǎng)todoMVC示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue.js實(shí)例todoList項(xiàng)目
本篇文章主要介紹了vue.js實(shí)例todoList項(xiàng)目，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題
這篇文章主要介紹了vue使用swiper的時(shí)候第二輪事件不會(huì)觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue語(yǔ)法自動(dòng)轉(zhuǎn)typescript(解放雙手)
這篇文章主要介紹了vue語(yǔ)法自動(dòng)轉(zhuǎn)typescript，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue3實(shí)現(xiàn)跨頁(yè)面?zhèn)髦档膸追N常見(jiàn)方法
在Vue 3中,跨頁(yè)面?zhèn)髦悼梢酝ㄟ^(guò)多種方式實(shí)現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁(yè)面間的關(guān)系,本文列舉了幾種常見(jiàn)的跨頁(yè)面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來(lái)看看吧2024-04-04
vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)
本文主要介紹了vue請(qǐng)求接口并且攜帶token的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue使用自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
在Vue中,通過(guò)自定義指令v-copy和document.execCommand方法,可以實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪貼板的功能,適用于處理長(zhǎng)文本或多行文本的復(fù)制需求,而readonly屬性可避免內(nèi)容被修改和移動(dòng)設(shè)備上的虛擬鍵盤(pán)干擾,感興趣的朋友一起看看吧2024-09-09