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

最新推荐文章于 2025-06-06 17:31:02 发布

原创最新推荐文章于 2025-06-06 17:31:02 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ui #前端 #javascript

这段代码展示了如何使用Promise.all来异步验证多个表单，并在所有表单验证通过后执行提交操作。当表单验证失败时，保存加载状态将被重置。此示例适用于前端开发中的表单管理和数据验证场景。

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

    getFormPromise(form) {
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res);
        })
      })
    },
    async submitForm(formName,type){                                               //提交按钮
      this.saveLoading = true;
      const mustForm = this.$refs.mustRewardRef.$refs.ruleForm;    // 表单1
      const extraForm = this.$refs.extraRewardRef.$refs.ruleForm;   // 表单2
      const ruleFormly = this.$refs.ruleFormly;                                  // 表单3

      // 使用Promise.all去校验结果
      Promise.all([ruleFormly,mustForm, extraForm].map(this.getFormPromise)).then(res => {
        const validateResult = res.every(item => !!item);

        if (validateResult) {
          console.log('表单都校验通过');
            
        } else {
          this.saveLoading = false;
          console.log('表单未校验通过');
        }
      })
    },