基于Vue3+Element Plus 实现多表单校验demo
作者：青兔_qT
一、使用场景
表单校验在日常的开发需求中是一种很常见的需求，通常在提交表单发起请求前校验用户输入是否符合规则，通常只需formRef.value.validate()即可校验，但是，例如一些多步骤表单、动态表单、以及不同的用户角色可能看到不同的表单内容，因此需要对每个角色所看到的内容进行适当的校验的多用户角色的表单，此时，我们就需要同时校验多个不同的表单。
二、案例
使用以下小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: '请填写姓名', trigger: 'blur' }
],
phone: [
{ required: true, message: '请填写手机号', trigger: 'blur' }
],
mail: [
{ required: true, message: '请填写邮箱', trigger: 'blur' }
],
address: [
{ required: true, message: '请填写住址', 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，这样在调用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.从开发角度讲，代码嵌套层数过多，如果是表单更多只会更严重，严重影响代码易读性和可维护性。
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状态的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) {
/**
* 执行校验通过后的逻辑
* 下一步操作...
* 发请求...
* 页面跳转...
*/
}
} catch (error) {
/**
* 执行校验失败抛出异常的逻辑
*/
}
}不过 async await 更像是解决的嵌套的地狱回调问题，本质上还是一个表单一个表单校验，仍然会有第一个表单校验失败不会继续校验，校验不全面的问题。故而推荐使用Promis.all()
2.使用Promise.all()
在 Promise.all 中，如果其中任何一个 Promise 被 rejected 或抛出异常，则整个 Promise.all 将会立即被 reject，而不会等到其他 Promise 完成。 具体地说，一旦一个 Promise 失败，Promise.all 就会中止并返回一个新的拒绝状态的 Promise。其他未完成的 Promise 将会继续运行，但是它们的结果将会被忽略，不会进一步处理。
在最后一句话中“其他未完成的Promise将会继续运行” 正好符合我们期望的效果
同理依旧使用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)) {
/**
* 执行校验通过后的逻辑
* 下一步操作...
* 发请求...
* 页面跳转...
*/
}
} catch (error) {
/**
* 执行校验失败抛出异常的逻辑
*/
}
}效果：
如此，才算真正意义上实现了同时校验多个表单。
四、总结
/**
* 多表单校验 async await / Promise.all()
*
* 在 Vue 3 中使用 addFormRule.value.validateField() 方法返回的可能是一个 Promise，
* 这是因为许多表单验证库（如 VeeValidate 或 Element Plus 等）在进行异步验证时会返回 Promise 以便处理异步操作。在这种情况下，validateField 方法会返回一个 Promise，而不是直接返回一个布尔值。
* 【Promise<pending>，Promise<pending>】
*
* 1. async await
* 优点：
* 可以分段校验，当第一个表单校验失败后，不会继续校验第二个表单，可在特定逻辑中使用
* 可以使用try catch捕获错误，执行错误后的逻辑
*
* 缺点：
* 执行按照代码逻辑顺序依次校验
* 当出现校验失败时立刻停止，不再校验未校验的表单，会出现校验提示显示不全问题
*
* 2. Promise.all()
* 优点：
* 可以使用try catch捕获错误，执行错误后的逻辑
* 同时校验多个表单，即便其中一个表单校验错误，抛出异常，仍会校验所有表单，页面表现效果更为理想
*
*/
以上便是 “基于Vue3+Element Plus 实现多表单校验” 的全部内容，希望对您有所帮助~如您有任何疑问及指正，欢迎评论指出~
到此这篇关于基于Vue3+Element Plus 实现多表单校验demo的文章就介绍到这了,更多相关Vue3多表单校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！