Ant Design表单中如何基于其他字段验证营业时间（闭店时间需晚于开店时间）

嗨，这个需求其实很常见，用Ant Design表单的自定义校验器就能轻松搞定！你说得没错，需要给closing_time的校验规则加一个自定义validator，而且Ant Design的校验函数里其实提供了获取其他字段值的方法，不用额外折腾~

直接上修改后的代码吧，我给你加上了关键的校验逻辑：

import { Col, Form, TimePicker } from 'antd';
import moment from 'moment'; // 记得引入moment，TimePicker依赖它

// 你的组件代码片段
<Col>
  <Form.Item
    label={<p style={{ color: "white" }}>Open</p>}
    name="opening_time"
    rules={[
      {
        required: true,
        message: "Please input a valid opening time",
      },
    ]}
  >
    <TimePicker />
  </Form.Item>
</Col>
<Col>
  <Form.Item
    label={<p style={{ color: "white" }}>Close</p>}
    name="closing_time"
    rules={[
      {
        required: true,
        message: "Please input a valid closing time",
      },
      // 新增的跨字段自定义校验规则
      ({ getFieldValue }) => ({
        validator(_, value) {
          const openingTime = getFieldValue('opening_time');
          // 先判断开店时间是否已填写（虽为必填项，但加判断更稳妥）
          if (!openingTime) {
            return Promise.resolve();
          }
          // 对比时间：若闭店时间早于/等于开店时间，抛出错误
          if (value && value.isBefore(openingTime)) {
            return Promise.reject(new Error('Closing time must be later than opening time'));
          }
          return Promise.resolve();
        },
      }),
    ]}
  >
    <TimePicker />
  </Form.Item>
</Col>

我给你拆解下关键细节：

• 自定义校验规则是一个函数，它接收的参数里包含getFieldValue方法，用这个方法就能直接拿到opening_time字段的取值
• TimePicker返回的是moment对象，所以直接用moment自带的isBefore方法就能判断时间先后，不符合要求就返回reject的Promise抛出错误提示
• 加了!openingTime的判断，是为了避免用户还没填开店时间就先填闭店时间时出现不必要的错误，等用户填完开店时间，校验会自动触发

另外提个小补充：如果你的表单是用Form.useForm()创建的实例，也可以通过form实例的getFieldValue方法获取字段值，但用校验函数自带的getFieldValue更直接，不用额外传递form实例~

备注：内容来源于stack exchange，提问作者navxio