Question

我只想为输入“ blur”触发验证，而不要在其上键入。因此，我使用了方法validateTrigger:'onBlur'，它按预期对我来说很好用。在用户集中/再次单击输入后，验证消息应该消失，有什么解决方法吗？

<FormItem>
{getFieldDecorator('email', {
    rules: [
        {
          type: 'email', message: 'Valid E-mail required!',
        },
        { required: true, message: 'E-mail required!', whitespace:true }
    ],
    validateTrigger:'onBlur'
})(
    <Input
        placeholder="Email"
    />
)}

Answer 1

这可以通过使用ant design validateStatus参数来完成。您可以从给定的集合（即“成功”，“警告”，“错误”，“正在验证”）中动态更改状态。

validateStatus：验证可能为“成功”，“警告”，“错误”，“正在验证”的表单组件的状态。

您需要运行一个onBlur和另一个onFocus。 FormItem可以写成：

        <FormItem
          validateStatus={this.state.showError && userNameError ? "error" : ""}
          help={
            this.state.showError && userNameError
              ? "Valid E-mail required!"
              : ""
          }
        >
          {getFieldDecorator("userName", {
            validateTrigger: "onBlur",
            rules: [
              { type: "email", message: "Valid E-mail required!" },
              { required: true, message: "Please input your username!" }
            ]
          })(
            <Input
              placeholder="Email"
              onBlur={this.handleBlur}
              onFocus={this.handleFocus}
            />
          )}
        </FormItem>

这两个方法可以写成：

  handleBlur = e => {
    this.setState({ showError: true });
  };

  handleFocus = e => {
    this.setState({ showError: false });
  };

正在工作的演示位于codesandbox.io。

输入验证消息切换为模糊和聚焦

1 个答案: