Ant 设计 Form validateTrigger 动态从“onBlur”变为“onChange”

Posted 2023-02-18

【中文标题】Ant 设计 Form validateTrigger 动态从“onBlur”变为“onChange”

【英文标题】：Ant design Form validateTrigger change dynamically from "onBlur", to "onChange"

【发布时间】：2019-03-14 01:21:03

【问题描述】：

默认情况下，Ant 设计会在 'onChange' 事件上验证错误，这意味着用户在第一次输入时会收到错误，这是一种糟糕的 UI 体验。

validateTrigger 可以更改为 'onBlur'，但它总是会在模糊时验证，这更糟糕。

预期： 用户开始输入 - 未显示错误 用户结束输入和模糊 - 显示错误 从那时起，错误会在用户输入时显示\隐藏。

无法通过状态将 validateTrigger 从“onBlur”动态更改为“onChange”。我试过了，但是失败了。

用户输入时显示错误的示例链接：https://codesandbox.io/s/jxqyjy293

另一个库（Formik）的示例链接，它可以正常工作 https://codesandbox.io/s/lp904qlj1q

我原来的 github 问题 https://github.com/ant-design/ant-design/issues/12542

【参考方案1】：

这种类型的验证对我有用：

<FormItem
      ...formItemLayout
      label="E-mail"
      hasFeedback
    >
      getFieldDecorator('email', 
        rules: [
          type: 'email', message: 'The input is not valid E-mail!',
        , 
          required: true, message: 'Please input your E-mail!',
        ],
      )(
        <Input />
      )
    </FormItem>

来源：https://2x.ant.design/components/form/#components-form-demo-register