Vue Element UI 多表单异步验证实现详解

5星 · 超过95%的资源需积分: 50 113 浏览量更新于2024-08-31 收藏 827B TXT 举报

在Vue框架中，当我们需要对Element UI库中的多个`el-form`表单进行并发的异步验证时，一个常见的策略是利用Promise的特性来确保所有验证结果都返回后才能进行下一步操作。本文将详细介绍如何实现这个过程。首先，我们需要定义一个包含所有表单名称的数组，例如`formArr`，在这个例子中，数组包含两个表单名："legalPerson"和"personLiable"。然后创建一个`resultArr`用于存储每个表单验证的结果，初始化为空数组。在遍历`formArr`时，我们不直接调用验证方法，而是将验证方法包装在一个Promise对象中。这里使用`checkForm`函数，它接受表单名称作为参数。`checkForm`内部创建一个新的Promise，当验证通过（`valid`属性为真）时，调用`resolve()`；反之，如果验证失败，则调用`reject()`。 `checkForm`函数返回的是一个Promise，所以我们将其推入`resultArr`，这样我们就得到了一个Promise的数组。接下来，我们使用`Promise.all()`方法，该方法接收一个Promise数组，并返回一个新的Promise，只有当所有Promise都成功（状态变为fulfilled）时，返回的Promise才会解析。如果其中任何一个Promise被拒绝（status变为rejected），那么返回的Promise也会立即被拒绝。当`Promise.all(resultArr)`的结果解析时，这意味着所有表单验证都已成功完成，此时我们可以进行后续的操作。如果在任何一次验证过程中出现错误，`catch`块会捕获异常并返回`false`，表示整体验证失败。总结来说，这段代码的关键在于使用Promise的并发处理能力，确保所有表单验证完成后才执行特定逻辑。这在Vue和Element UI的表单验证场景中非常实用，避免了并发验证带来的潜在问题，提高了用户体验。通过这种方式，开发人员可以优雅地管理多个表单的验证流程，使得整个验证过程更加可控和高效。

//在需要验证提交的方法中
//表单的ref校验
let formArr = ["legalPerson", "personLiable"];
let resultArr = []; //用来接受返回结果的数组
//将表单都放入方法验证一遍。取出结果。存入resultArr
formArr.forEach(item => {
// this.checkForm(item);
resultArr.push(this.checkForm(item)); //push 得到promise的结果
});
//验证是否所有的表单都通过
Promise.all(resultArr).then(() => {
//验证通过后的操作
}).catch(()=>{
return false;
});

//提取出的方法
checkForm(formName) {
//封装验证表单的函数
let _self = this;
let result = new Promise(function(resolve, reject) {
_self.$refs[formName].validate(valid => {
if (valid) {
resolve();
} else {
reject();
}
});
});

下载后可阅读完整内容，剩余1页未读，立即下载

唐汜沫

粉丝: 0
资源: 4

Vue Element UI 多表单异步验证实现详解

Vue+Element-UI实现登录表单：集成随机验证码与验证功能

Vue+Element-UI实现验证码与登录表单验证

使用Vue+Element-ui构建登录注册验证表单

vue elementui el-form rules动态验证的实例代码详解

vue-element-admin-master.zip

Vue中el-form标签中的自定义el-select下拉框标签功能

vue3 el-form 表单验证

在Vue3中使用element-plus,如何进行el-form的表单验证

vue获取el-form表单的样式和内容

最新资源