用promise.all实现动态表单校验

渣扎一个

已于 2022-06-09 14:34:46 修改

阅读量419

点赞数

分类专栏： vue 文章标签：前端 javascript vue

于 2022-06-09 14:15:27 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43637218/article/details/125202265

版权

这篇博客探讨了在Vue.js开发中处理动态表单的挑战，特别是在组件嵌套层级复杂的情况下。作者展示了如何对课程、章节和课时的表单进行逐级校验，并使用Promise.all确保所有表单验证通过后提取数据。代码示例中，通过递归遍历组件树并调用validate方法进行表单验证，最后进行数据提取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

开发过程中遇到动态表单的问题，课程是一个组件，含有课程表单。课程含有子组件章节，一个章节含有一个章节表单。章节含有子组件课时，一个课时含有一个课时表单。

校验

 // 确定
 handleSubmit() {
   
    let newArr = []
    checkForm(this.$refs['courseForm'])
    let chapter = this.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

渣扎一个

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

结合async await，动态设置Promise.all()

zzqz的博客

10-31

1993

为了演示动态设置promise，这里模拟一个需求：有一组用户列表，前端需要通过用户列表的用户id去获取用户岗位，获取到岗位id后再通过该id去获取岗位状态，具体逻辑看以下代码： // 模拟接口定义 // 获取用户列表信息，包括id，name const getIdApi = function() { return new Promise(function(resove, reject) { const data = [{id: '001', name: '001'}, {id: '

手动实现Promise.all()和 Promise.race()

weixin_45798469的博客

03-21

512

参考链接：https://www.jianshu.com/p/c17085ce40ec 1 Promise.all Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例，那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promi

1 条评论您还未登录，请先登录后发表或查看评论

Promise.all 多表单验证、多组件表单验证（element-ui）

qq_37831545的博客

09-17

867

Promise.all 多表单验证、多组件表单验证（element-ui），页面多表单验证、多组件表单验Promise.all(formArr.map(this.getFormPromise)).then((res) => {...})

element-ui 多个表单验证

qq_26642611的博客

12-05

721

getFormPromise(form) { return new Promise(resolve => { form.validate(res => { resolve(res); }) }) }, async submitForm(formName,type){ th...

用Promise.all做多个表单校验

weixin_42812634的博客

11-16

1915

用Promise.all做多个表单校验有时候，我们需要对多个表单进行同时校验，只有都校验通过才可以进行下一步。比较简单的方法就是，if(){}else{}嵌套使用，if A表单校验成功，再校验B表单。其实js提供了promise方法来帮助我们实现这一功能，代码如下： const p1 = new Promise((resolve, reject) => { this.$refs.projectInfo.validate(valid => { if (vali

promise.all多个表单校验

08-26

对于多个表单校验，可以使用`Promise.all`来处理。`Promise.all`接受一个包含多个Promise对象的数组作为参数，并返回一个新的Promise对象。这个新的Promise对象将在所有输入的Promise对象都被解决（resolved）后被...

Vue ElementUi同时校验多个表单(巧用new promise)

08-27

Vue ElementUi 同时校验多个表单（巧用 new...本文提供了一种使用 Vue ElementUi 同时校验多个表单的解决方案，通过使用 new promise 和 Promise.all，实现了多个表单的同时校验，提高了应用程序的响应速度和用户体验。

使用Promise实现Element多表单同步校验

本文主要介绍了如何使用JavaScript和Element UI库在项目中实现多个表单的校验，重点在于利用Promise来处理并发验证。在实际的Web应用开发中，表单验证是必不可少的一部分，用于确保用户输入的数据符合预期的格式和...

Vue3多个表单提交校验—Promise

xll20000811的博客

11-18

2577

这次项目中有个界面有三个表单，当提交的时候需要进行三个表单的校验。当点击提交后要对三个表单进行校验。

vue使用Promise.all进行多表单验证

yuan0209的博客

11-26

712

vue使用Promise.all进行多表单验证

使用 Promise.all 校验多个表单（element-ui）

qq_26642611的博客

12-20

2582

getFormPromise(form) { return new Promise(resolve => { form.validate(res => { resolve(res); }) }) }, async submitForm(formName,type){ this...

Promise.all 可以处理多个表单校验，也可以多个接口调取

lixinhua_man的博客

08-02

574

【代码】Promise.all 可以处理多个表单校验，也可以多个接口调取。

Promise.all做多个表单的表单验证

不想被卷出去的前端老鸟

06-04

845

Promise.all做多个表单的表单验证

Promise实现子组件的多表单校验并反馈结果给父组件

deary

05-31

859

先画个图看看整个组件+表单的结构（本文列举4个子组件、子组件中4个子表单为例，更多的同理）： F.vue：父组件，做表单的统一验证和提交； X.vue：子组件，单独做表单验证，验证通过则提交表单数据给父组件； formX：子组件中表单绑定的model变量，通常所有子表单绑定在这一个表单变量上； form_xn：子表单的ref；注：本文中表单验证基于Element-ui实现（采用ref+validate方法实现，但整体框架具备通用性）一、Promise实例生成首先需要一个根..

vant +vue +promise自定义表单校验

zhangchangzhangchang的博客

08-17

4799

表单内容``` <van-cell-group> <p class="tip">反馈内容（必填）</p> <van-field v-model="message" type="textarea" placeholder="请输入您要反馈的内容" rows="6" autosize /> <p class="tip"&...

使用promise.all()实现多表单验证 以及循环表单验证

zgzga的博客

03-23

2365

需求：多个标签页中的form表单点击确定按钮需要全部验证通过方可提交

利用 Promise实现多表格验证