vue中多个表单同时校验

vue中多个表单同时校验
开发过程中，有时候会遇到需要对多个表单进行校验,需要利用Promise的特性进行解决

使用Promise进行一个队列校验

// 表单校验
  submitForm (refName: string) {
    
    
    return new Promise<void>((resolve, reject) => {
    
    
      (this.$refs as any)[refName].validate((valid: any) => {
    
    
        if (valid) {
    
    
          resolve();
        } else {
    
    
        // 注意此处需要传入一个new Error(''),否则会报错Expected the Promise rejection reason to be an Error
          reject(new Error('错误'));
        }
      });
    });
  }

分别对每个表单进行绑定ref，这里例子是有两个表单

submit () {
    
    
    // 多个表单同时校验
    Promise.all([this.submitForm('purchaseRef'), this.submitForm('purchaseBotRef')]).then(() => {
    
    
      console.log('确认收货');
    }).catch(() => {
    
    
      this.$tipMessage('error', '请填写完整');
    });
  }

这样就可以实现多个表单同时校验