如何实现Ant Design表单仅针对已填写字段显示验证错误？

要实现「仅当表单关联字段存在值时显示验证错误，字段无值（包括用户输入后清空内容）则不显示错误信息」的需求，需调整Form.Item的验证规则，核心思路是移除强制必填配置，自定义验证逻辑仅在字段非空时执行格式校验。

修改后的代码如下：

import React from "react";
import { Col, Form, Input } from "antd";

const App = () => {
  return (
    <Form name="customValidationForm">
      <Col span={5}>
        <Form.Item
          name="AIRCRAFT_ID"
          label="aircraft-id"
          rules={[
            {
              validator(_, value) {
                // 字段为空时直接通过验证，不显示错误
                if (!value) {
                  return Promise.resolve();
                }
                // 字段有值时执行格式校验
                const pattern = /^[A-Z]{1}[A-Z0-9]{1,6}$/i;
                if (pattern.test(value)) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error("Please enter a valid aircraft id"));
              },
            },
          ]}
          validateTrigger="onChange"
        >
          <Input maxLength={7} />
        </Form.Item>
      </Col>
    </Form>
  );
};

export default App;

关键修改说明： #

• 移除原规则中的required: true：该配置会强制字段非空，导致空值状态下也显示错误，与需求冲突。
• 自定义validator函数：
  • 当字段值为空（含用户主动清空）时，返回Promise.resolve()跳过验证，不触发错误提示。
  • 当字段存在有效值时，才校验格式是否匹配正则规则，不符合则抛出错误信息。
• 保留validateTrigger="onChange"：确保用户输入或修改内容时实时触发验证，保证交互体验。

内容的提问来源于stack exchange，提问作者Mamunur Rashid