Ant Design：使用自定义验证器验证表单字段答案

【问题标题】：Ant Design: Validating form fields w/custom validatorsAnt Design：使用自定义验证器验证表单字段
【发布时间】：2019-10-04 09:58:06
【问题描述】：

我想使用notifications 推送表单反馈，而不是内联消息。例如

<Form.Item label="Name">
  {getFieldDecorator("name", {
    rules: [
      {
        validator(rule, value, callback) {
          if (!value) {
            callback("Enter Your Name");

            // I'd like to use this instead:
            // notification.open({
            //   message: "Enter Your Name",
            //   description:
            //     'This is the content of the notification.',
            // })
          }

          callback();
        }
      }
    ]
  })(<Name />)}
</Form.Item>;

是否可以在没有内联消息的情况下验证表单字段并保持视觉反馈（例如 border-color 更改之类的东西）？

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案1】：

您可以按照您在代码中显示的操作并使用 css 隐藏错误消息。

display: none

【讨论】：

如此明显。我很惭愧这不是我事先考虑的事情。
display: none 解决了我的直接问题，但破坏了布局。 visibility: hidden 是一个更好的解决方案，但我也不喜欢。将您的答案标记为选定答案，直到提供更好的答案。

【解决方案2】：

您可以使用 this.props.form.setFields

抛出自定义错误消息

this.props.form.setFields({
  user: {
    value: values.user,
    errors: [new Error('forbid ha')],
  },
});

Reference for form.setFields

【讨论】：