ElementUI的多个form表单的校验

最新推荐文章于 2024-04-11 20:35:55 发布

前端小凯

最新推荐文章于 2024-04-11 20:35:55 发布

阅读量842

点赞数 2

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/qq_43235503/article/details/130695358

版权

第一种：使用Promise.all( )方法和.then( ).catch( )来接受promise的返回值；

handleSubmit() {
  Promise.all([
    this.$refs["ruleForm1"].validate(),
    this.$refs["ruleForm2"].validate(),
    this.$refs["ruleForm3"].validate(),
    this.$refs["ruleForm4"].validate(),
    this.$refs["ruleForm5"].validate(),
    this.$refs["ruleForm6"].validate(),
    this.$refs["ruleForm7"].validate(),
  ]).then(res => {
     console.log("提交成功");
  }).catch(err => {
     console.log("提交失败");
     return false;
  });
},

第二种：使用Promise.all( )方法和async和await和try{ }catch(error){ }来捕捉promise的返回值；

async handleSubmit() {
  try {
    await Promise.all([
       this.$refs["ruleForm1"].validate(),
       this.$refs["ruleForm2"].validate(),
       this.$refs["ruleForm3"].validate(),
       this.$refs["ruleForm4"].validate(),
       this.$refs["ruleForm5"].validate(),
       this.$refs["ruleForm6"].validate(),
       this.$refs["ruleForm7"].validate(),
    ]);
    console.log("提交成功");
  } catch (error) {
    console.log("提交失败");
    return false;
  };
},