Ant Design Form 组件设置必填规则后未触发校验且不显示错误提示

你的Ant Design Form校验不触发的核心原因是 缺少Form.Item的name属性配置。

Ant Design Form组件的校验、字段数据收集逻辑都依赖Form.Item的name字段作为唯一标识，未配置name的Form.Item不会被纳入表单的校验和数据收集流程，因此你点击提交时会直接跳过校验触发onFinish回调，也不会拿到对应的字段值。

解决方案 #

给绑定了校验规则的Form.Item添加name属性即可，修改后的完整代码如下：

import { Button, Form, Input } from "antd";

export default function App() {
  const [form] = Form.useForm();
  return (
    <Form form={form} onFinish={(data) => console.log(data)}>
      <Form.Item
        name="test"
        rules={[{ required: true, message: "test message" }]}
        label="test"
      >
        <Input />
      </Form.Item>
      <Button htmlType="submit">Submit</Button>
    </Form>
  );
}

修改后再次点击提交，即可触发必填校验，展示预期的红色提示文案，同时onFinish回调也能正常拿到输入的字段值。

内容的提问来源于stack exchange，提问作者Alex Ironside