在 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
来创建清晰、友好的表单界面。