Antd Input组件onChange事件无法获取校验错误的解决咨询

核心原因 #

Antd Form默认在校验过程中不会实时将错误状态同步到Form实例，仅在提交、onBlur等默认触发时机才会暴露错误信息。要在onChange中获取错误，需要主动触发指定字段的校验并获取结果。

解决方案 #

在Input的onChange事件中，调用Form实例的validateFields方法指定当前字段，通过Promise或回调获取校验错误：

1. 确保通过Form.useForm()拿到Form实例
2. 在onChange回调中先更新字段值，再主动触发对应字段的校验
3. 从校验结果中提取错误信息

修改后的示例代码 #

import React from 'react';
import { Form, Input, Button } from 'antd';

const App: React.FC = () => {
  const [form] = Form.useForm();

  const handleUsernameChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    // 先同步最新输入值到Form实例
    await form.setFieldsValue({ username: value });
    // 仅校验用户名字段
    try {
      await form.validateFields(['username']);
      console.log('用户名校验通过');
    } catch (errorInfo) {
      // 提取并打印当前字段的错误信息
      console.log('用户名校验错误:', errorInfo.errorFields[0].errors);
    }
  };

  const handleSubmit = () => {
    form.validateFields().then(values => {
      console.log('提交成功:', values);
    }).catch(errorInfo => {
      console.log('提交校验错误:', errorInfo.errorFields);
    });
  };

  return (
    <Form form={form} layout="vertical">
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          { required: true, message: '请输入用户名' },
          { min: 5, message: '用户名长度不能少于5位' },
        ]}
      >
        <Input onChange={handleUsernameChange} />
      </Form.Item>

      <Form.Item
        name="password"
        label="密码"
        rules={[{ required: true, message: '请输入密码' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" onClick={handleSubmit}>提交</Button>
      </Form.Item>
    </Form>
  );
};

export default App;

关键说明 #

• 使用form.validateFields(['username'])只校验目标字段，避免全量校验浪费性能
• 通过try/catch捕获校验错误，errorInfo.errorFields数组包含当前字段的具体错误提示
• 先调用form.setFieldsValue同步输入值，确保校验基于最新的用户输入执行

内容的提问来源于stack exchange，提问作者Uğurcan Uçar