如何实现Antd表单关联上下限数值字段的实时手动校验？

你之前使用setFields手动设置错误提示无法正常展示，核心原因是手动更新字段状态的时机和表单内置的状态更新逻辑冲突，关联字段变更时当前字段的错误态会被默认逻辑覆盖。推荐直接使用表单组件内置的自定义校验+依赖配置能力实现，无需手动操作字段状态：

实现步骤 #

• 为上下限两个字段分别定义自定义校验函数，函数内部可读取另一个字段的当前值做大小对比，同时处理必填校验
• 给两个字段都配置dependencies属性，指定依赖的另一个字段，这样关联字段值变更时，当前字段会自动重新触发校验
• 配置校验触发时机为onChange，保证用户输入过程中实时触发校验

代码示例（以Ant Design Form为例） #

import { Form, InputNumber } from 'antd';

const App = () => {
  const [form] = Form.useForm();

  // 下限值校验规则
  const validateMin = (_, value) => {
    const maxVal = form.getFieldValue('max');
    if (!value && value !== 0) {
      return Promise.reject(new Error('下限值为必填项'));
    }
    if (maxVal !== undefined && Number(value) >= Number(maxVal)) {
      return Promise.reject(new Error('下限值必须小于上限值'));
    }
    return Promise.resolve();
  };

  // 上限值校验规则
  const validateMax = (_, value) => {
    const minVal = form.getFieldValue('min');
    if (!value && value !== 0) {
      return Promise.reject(new Error('上限值为必填项'));
    }
    if (minVal !== undefined && Number(value) <= Number(minVal)) {
      return Promise.reject(new Error('上限值必须大于下限值'));
    }
    return Promise.resolve();
  };

  return (
    <Form form={form} autoComplete="off">
      <Form.Item
        label="下限值"
        name="min"
        rules={[{ validator: validateMin }]}
        dependencies={['max']}
        validateTrigger="onChange"
      >
        <InputNumber style={{ width: '100%' }} placeholder="请输入下限值" />
      </Form.Item>
      <Form.Item
        label="上限值"
        name="max"
        rules={[{ validator: validateMax }]}
        dependencies={['min']}
        validateTrigger="onChange"
      >
        <InputNumber style={{ width: '100%' }} placeholder="请输入上限值" />
      </Form.Item>
    </Form>
  );
};

方案优势 #

• 完全复用表单内置的校验、状态同步和错误渲染逻辑，不会出现错误提示不展示的问题
• 依赖配置自动处理关联字段的校验触发，无需额外编写字段变化监听逻辑
• 所有校验逻辑收敛在规则配置中，代码可读性和可维护性更高

内容的提问来源于stack exchange，提问作者john doe