Ant Design表单校验与帮助信息 (message extra help)

48 阅读2分钟

在 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 属性具有覆盖 rulesmessage 的能力。即使字段校验失败,如果 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。这种机制允许开发者根据需要定制表单的反馈信息,增强用户体验。开发者应根据具体场景和需求来决定如何使用 helpextrarules 来创建清晰、友好的表单界面。