Async Validator在表单提交前如何同步显示异步验证错误？

我之前也遇到过，async validator在submit时只会触发校验但不会等结果返回就直接走onFinish了。你得把validateTrigger改成onChange或者手动在提交前调用form.validateFields()并用Promise处理异步结果。

const handleSubmit = () => {

  form.validateFields().then(values => {

    // 只有校验通过才走到这里

    console.log('submit', values);

  }).catch(() => {

    // 有错误也会进catch，错误信息会正常显示

  });

};

另外validateTrigger="onSubmit"是错的，应该是'submit'，不过这问题主要还是得靠手动validateFields等异步结果。

这个问题的关键是 Ant Design 的 Form 在处理异步校验时的执行机制和状态更新时机。你遇到的「第一次提交错误不显示，第二次才出现」以及「1秒延迟导致体验差」的问题，本质上是因为异步校验函数在表单提交时还没有完成，而 onFinish 已经被触发了，甚至可能因为校验还在进行中，Ant Design 认为表单是“pending”状态，从而跳过了错误渲染。

我们来一步步解决这个问题。

第一步，你要明白 async validator 返回的是一个“未来的结果”，React 和 Ant Design 都需要时间去等待这个结果并重新渲染错误信息。当你点击提交时，如果异步校验还没结束，onFinish 不应该被执行——但默认情况下 Ant Design 会等所有校验完成才会决定是否调用 onFinish，问题出在你用了 setTimeout 模拟异步，却没有正确处理 callback 的时机与表单的 pending 状态同步。

但更大的问题是：你在 validateTrigger="onSubmit" 上写错了。正确的值应该是 'submit' 而不是 'onSubmit'。虽然看起来像拼写问题，但这会导致你的规则根本没在提交时触发校验，而是沿用默认的 onChange 或 onBlur，这就解释了为什么第一次提交看不到错误。

第二步，你需要确保异步校验不会阻塞用户操作的同时，在提交时能等待结果，并且立刻反馈错误。

解决方案如下：

1. 修正 validateTrigger 的拼写错误
2. 使用 await + Promise 改写 validator，让逻辑更清晰（推荐方式）
3. 在 onFinish 中显式调用 validateFields 并用 try/catch 捕获异常，保证校验完成后再执行提交逻辑

下面是修改后的代码示例：

const passwordValidator = async (rule, value) => {

  // 模拟网络请求延迟，比如检查常用弱密码

  await new Promise(resolve => setTimeout(resolve, 1000));

  

  if (!value || value.length < 6) {

    // 抛出错误会中断流程，Ant Design 会自动显示错误信息

    throw new Error('密码至少6位！');

  }

};



// 表单组件


  name="login"

  onFinish={async (values) => {

    try {

      // 显式触发全表单校验，包括异步校验

      // 这一步会等待 async validator 完成

      await form.validateFields();

      

      // 只有所有字段都通过后，才会走到这里

      console.log('提交数据:', values);

      // 执行登录逻辑...

    } catch (errorInfo) {

      console.log('校验失败:', errorInfo);

      // 不需要手动处理 UI，Ant Design 会自动展示错误提示

    }

  }}

  // 注意这里要用 'submit'，不是 'onSubmit'

  validateTrigger="submit"

  ref={formRef}

>

  
    name="password"

    rules={[

      { required: true, message: '请输入密码' },

      { validator: passwordValidator } // 使用 async validator

    ]}

  >

    

  



  

    登录

  

重点说明几点：

- validateTrigger="submit" 是关键，它表示这个字段的校验只在表单提交或手动调用 validateFields 时触发，避免用户输入过程中频繁发请求。
- 使用 async/await 写法比传 callback 更现代也更容易控制流程。Ant Design 支持返回 Promise 的 validator。
- 在 onFinish 里主动调用 form.validateFields()，是为了确保即使某些情况下滑过校验，也能强制等待异步结果。这样就能捕获到那个 1 秒后才回来的错误。
- 错误信息会在 throw new Error('...') 后被 Ant Design 自动捕获并显示在对应 Item 下，不需要你手动 setFields。

至于那个 1 秒延迟带来的“卡顿感”，如果你是在模拟真实 API 请求，那这个延迟无法避免，但你可以通过加载状态缓解用户体验问题。比如在按钮上加 loading：

const [loading, setLoading] = useState(false);



const handleSubmit = async (values) => {

  setLoading(true);

  try {

    await form.validateFields();

    // 模拟提交

    await submitToServer(values);

  } finally {

    setLoading(false);

  }

};



// 按钮加上 loading



  登录

总结一下：你原来的问题出在三个地方 —— validateTrigger 写错、没有等待异步校验完成就进入提交逻辑、使用旧式的 callback 导致流程难以控制。改成 async validator + validateFields + try/catch 组合拳之后，第一次提交就能正确显示错误，而且逻辑更健壮。

顺便吐槽一句，这种异步校验坑我当年也踩过三次，文档写得真不够直白……