JavaScript 中异步校验（Async Validation）在表单提交中怎么捕获并汇总所有字段错误-js教程-PHP中文网

异步校验需用 Promise.allSettled 并发执行并汇总错误：构建各字段校验 Promise 数组，统一等待全部结束，筛选 status 为 rejected 的项提取 reason（推荐 new Error 并挂载字段名），映射为字段错误对象供 UI 展示。

javascript 中异步校验（async validation）在表单提交中怎么捕获并汇总所有字段错误

在表单提交中做异步校验时，不能像同步校验那样立即返回错误，必须等待 Promise 完成。要捕获并汇总所有字段的异步校验错误，核心思路是：并发触发所有异步校验，统一等待结果，再分类收集成功与失败项。关键不是逐个 await，而是用 Promise.allSettled 保留每个字段的执行状态（fulfilled/rejected），避免一个失败就中断其余校验。

用 Promise.allSettled 并发校验所有字段

它会等待所有 Promise 结束，不管成功或失败，返回每个 Promise 的 { status, value | reason }。适合“全量校验 + 错误汇总”场景：

为每个字段定义校验函数，返回 Promise（如调用 API 检查用户名是否已存在）
把所有校验 Promise 组成数组，传给 Promise.allSettled
遍历结果，筛选出 status === 'rejected' 的项，提取其 reason（建议统一抛出 Error 实例，含字段名和消息）

校验函数需规范错误结构

每个异步校验函数应统一 reject 带上下文的 Error，方便后续提取：

const validateUsername = async (value) => {
  if (!value) throw new Error('用户名不能为空');
  const res = await fetch(`/api/check?user=${value}`);
  if (!res.ok) throw new Error('用户名格式不合法');
  const data = await res.json();
  if (data.exists) throw new Error('用户名已被占用');
};

注意：不要只 throw 字符串，推荐用 new Error(...)，便于统一处理；错误 message 可包含语义信息，也可额外挂载字段名、code 等属性（如 err.field = 'username'）。

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

提交前统一触发并收集错误

在表单 submit 处理函数中组织校验逻辑：

从表单数据对象中提取待校验字段（如 { username, email, phone }）
构建 Promise 数组：[validateUsername(v.username), validateEmail(v.email), ...]
用 Promise.allSettled 执行，然后 map 出错误列表：results.filter(r => r.status === 'rejected').map(r => r.reason)
将错误按字段映射为对象（如 { username: '用户名已被占用', email: '邮箱格式错误' }），用于 UI 展示