在 Ant Design 的表单组件中，字段校验和帮助信息都对提升用户体验起着重要作用。常见的帮助信息有三种：rules 中的 message，extra 和 help。本文对比这三者之间的关系及其适用场景。
rules 中的 message
rules 是一个数组，其中的每个对象可以定义不同的校验规则。当字段值不满足这些规则时，message 属性将提供反馈给用户，告诉他们哪里出了问题。
<Form.Item
label="Email"
name="email"
rules={[{ required: true, message: 'Please enter a valid email address' }]}
>
<Input />
</Form.Item>
Form.Item 的 help 属性
help 属性用于提供关于表单字段的帮助信息。当表单字段没有校验错误时，help 可以显示一些辅助性的信息。但是，如果字段校验失败，help 可以覆盖 rules 中的 message，显示自定义的错误信息。
<Form.Item
label="Email"
name="email"
rules={[{ required: true, message: 'Please enter a valid email address' }]}
help="This email will be used for account verification and password recovery."
>
<Input />
</Form.Item>
Form.Item 的 extra 属性
extra 属性与 help 类似，也用于提供额外的说明或帮助信息。extra 的内容通常显示在表单字段下方，可以用来提供更多的指导或解释。
<Form.Item
label="Email"
name="email"
rules={[{ required: true, message: 'Please enter a valid email address' }]}
extra="Make sure to use an email you have access to."
>
<Input />
</Form.Item>
优先级和覆盖关系
help属性具有覆盖rules中message的能力。即使字段校验失败，如果help属性被设置，它将显示在表单字段下方，而不是rules中定义的message。extra属性通常用于提供额外的非校验相关信息，它不会覆盖由校验失败产生的message。
代码示例
以下示例展示了 help 是如何覆盖 rules 中的 message：
<Form.Item
label="Email"
name="email"
rules={[{ required: true, message: 'Please enter a valid email address' }]}
help="This is the email address used for login and communication."
>
<Input />
</Form.Item>
如果用户没有输入任何内容，help 将显示为 "This is the email address used for login and communication." 而不是 rules 中定义的 "Please enter a valid email address"。
而如果我们将其修改成下面：
<Form.Item
label="Email"
name="email"
rules={[{ required: true, message: 'Please enter a valid email address' }]}
extra="This is the email address used for login and communication."
>
<Input />
</Form.Item>
此时，如果用户没有输入任何内容，那么将会把错误提示信息 'Please enter a valid email address' 和额外信息 "This is the email address used for login and communication." 都显示出来。
结论
在Ant Design表单中，help 属性提供了一种方式来向用户展示帮助信息，并且它可以覆盖字段校验失败时的 message。这种机制允许开发者根据需要定制表单的反馈信息，增强用户体验。开发者应根据具体场景和需求来决定如何使用 help、extra 和 rules 来创建清晰、友好的表单界面。
