AntD函数式组件动态设置表单校验提示失效求助

问题描述 #

我在使用AntD函数式组件时，希望实现当输入的邮箱后缀不是@dish.com时，动态设置校验提示信息。请问如何通过onChange事件实现该功能？我尝试了以下代码，但校验提示无法正常显示，请求帮助。

<Form ref={formRef} onFinish={handleFinish} layout="vertical">
    <Form.Item
        label="Email"
        name="email"
        rules={[
          {
            required: true,
            type: "email",
            // pattern: new RegExp('[a-z0-9]+@dish.com'),
            message: 'Please provide email',
          },
        ]}
        onChange={(event) => checkEmailExist(event)}
    >
        <Input />
    </Form.Item>
</Form>

const checkEmailExist = (event) => {
    if (!event.target.value.includes("@dish.com")) {
        console.log("inside");
        formRef.current.setFields([
          {
            name: 'email',
            errors: ['Please provide with dish.com'],
          },
        ]);
    }
}

问题分析与解决方案 #

你的代码存在两个核心问题：

1. Form.Item的onChange参数不是原生DOM事件，而是输入框的当前值（当内部使用AntD Input组件时），所以event.target.value无法正确获取输入内容。
2. AntD Form默认会在输入时自动触发校验，会覆盖你手动通过setFields设置的错误提示。

下面提供两种可行的解决方式：

方案一：使用自定义校验规则（推荐） #

直接在Form.Item的rules中添加自定义校验逻辑，符合AntD Form的设计规范，无需额外处理onChange：

import { Form, Input } from 'antd';
import React from 'react';

const YourComponent = () => {
  const formRef = React.useRef(null);

  const handleFinish = (values) => {
    console.log('表单提交数据:', values);
  };

  return (
    <Form ref={formRef} onFinish={handleFinish} layout="vertical">
      <Form.Item
        label="邮箱"
        name="email"
        rules={[
          {
            required: true,
            type: 'email',
            message: '请输入有效的邮箱地址',
          },
          {
            validator(_, value) {
              // 当输入值存在且不以@dish.com结尾时抛出错误
              if (value && !value.endsWith('@dish.com')) {
                return Promise.reject(new Error('请输入@dish.com后缀的邮箱'));
              }
              return Promise.resolve();
            },
          },
        ]}
      >
        <Input placeholder="请输入邮箱" />
      </Form.Item>
    </Form>
  );
};

export default YourComponent;

方案二：通过onChange手动控制校验提示 #

如果一定要用onChange事件处理，需要调整参数获取方式，并避免默认校验覆盖手动设置的错误：

import { Form, Input } from 'antd';
import React from 'react';

const YourComponent = () => {
  const formRef = React.useRef(null);

  const handleFinish = (values) => {
    console.log('表单提交数据:', values);
  };

  const checkEmailSuffix = (value) => {
    if (value && !value.endsWith('@dish.com')) {
      // 设置错误提示
      formRef.current.setFields([
        {
          name: 'email',
          errors: ['请输入@dish.com后缀的邮箱'],
        },
      ]);
    } else {
      // 符合要求时清空错误
      formRef.current.setFields([
        {
          name: 'email',
          errors: [],
        },
      ]);
    }
  };

  return (
    <Form 
      ref={formRef} 
      onFinish={handleFinish} 
      layout="vertical"
      validateTrigger={['onSubmit']} // 仅在提交时触发默认校验，避免覆盖手动设置的错误
    >
      <Form.Item
        label="邮箱"
        name="email"
        rules={[
          {
            required: true,
            type: 'email',
            message: '请输入有效的邮箱地址',
          },
        ]}
        onChange={(value) => checkEmailSuffix(value)} // 参数为输入框的值，而非event
      >
        <Input placeholder="请输入邮箱" />
      </Form.Item>
    </Form>
  );
};

export default YourComponent;

内容的提问来源于stack exchange，提问作者Nirmesh Rastogi