关键词：

• Ant Design v4.0.2
• Form
• Validation Invalid
• 校验无效

情景

使用 React + Typescript + Ant Design 重构公司一反洗钱平台部分页面，其一表单需要验证，但是按照 Ant Design Form 中的 Demo 实现后并不效果。

Ant Design Form Demo Url

https://ant.design/components/form-cn/#components-form-demo-basic

解决

在 Form.Item 中，除了需要 rules 指明校验规则外，还必须拥有 name 属性，否则无法正常显示校验提示。

CodeSandbox Demo

https://github.com/blueju/BlogCodeSandBox/tree/antd-v4-form-validate

结语

这一细节，在 Ant Design Form 的文档中，并没有提及，使用时自己需要注意一下。

首发于语雀文档@blueju