在函数内抛出多个异常：表单校验仅能捕获首个错误该如何解决

解决方案 #

你遇到的核心问题是单次校验失败就立即抛出异常，直接中断了后续的校验逻辑，只需要调整为先收集全量校验错误、所有规则执行完成后再统一抛出即可，具体实现可以参考两种方案：

方案1：使用标准AggregateError聚合所有错误后抛出 #

这是兼容性最好的标准实现，上层可以直接从错误实例的errors属性中拿到完整的错误列表：

const validateErrors = []
this.form.inputs.forEach(input => {
  if (input.required && !input.value) {
    validateErrors.push(new AppError({ 
      customMessage: new Notification(notificationTypes.Error, `${input.label} not filled`)
    }))
  }
})

if (validateErrors.length) {
  // 第一个参数传入错误数组，第二个参数传入聚合错误的通用描述
  throw new AggregateError(validateErrors, '表单校验未通过')
}

上层统一处理的逻辑可以直接遍历所有错误输出提示：

try {
  // 调用校验逻辑
  validateForm()
} catch (err) {
  if (err instanceof AggregateError) {
    err.errors.forEach(validateErr => {
      // 依次处理每个校验错误，比如全局提示展示
      showNotification(validateErr.customMessage)
    })
  } else {
    // 其他原有错误处理逻辑
  }
}

方案2：合并错误信息为单个自定义错误抛出 #

如果不想改动上层原有错误处理逻辑，也可以把所有校验错误的信息合并到单个AppError中抛出：

const validateErrors = []
this.form.inputs.forEach(input => {
  if (input.required && !input.value) {
    validateErrors.push(`${input.label} 未填写`)
  }
})

if (validateErrors.length) {
  throw new AppError({ 
    customMessage: new Notification(notificationTypes.Error, `校验失败：${validateErrors.join('、')}`)
  })
}

这种方案上层不需要做额外适配，直接就能展示所有缺失的字段提示。

内容的提问来源于stack exchange，提问作者Sergio Martín