ant design Form.Item如何在输入一个字段值时校验另一个字段是否符合规则

今天遇到一个需求，要求用在表单中输入内容时需要注意其中两个字段值的大小关系，如果不满足特定的关系，就要告诉用户输入有误，下面我们来看看如何解决这个问题。

最终的效果图如下：检测num2和num1之间的关系

 代码如下

import React from "react";
import { InputNumber, Form } from "antd";

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

  return (
    <Form
      form={form}
      labelCol={{
        span: 8
      }}
      wrapperCol={{
        span: 16
      }}
    >
      <Form.Item
        label="num1"
        name="num1"
        initialValue={5}
        rules={[
          ({ validateFields }) => ({
            validator() {
              return new Promise((resolve, reject) => {
                //validateFields可以校验当前form的所有字段，可以把要校验的字段的name放入数组中
                validateFields(["num2"]).then(//此时在校验num2这个字段，下面是num2符合校验和不符合校验的callback
                  (value) => {
                    console.log(value);
                    return resolve();
                  },
                  (reason) => {
                    console.log(reason);
                    return resolve();
                  }
                );
              });
            }
          })
        ]}
      >
        <InputNumber />
      </Form.Item>

      <Form.Item
        label="num2"
        name="num2"
        rules={[
            //关于num2的校验规则，num2的值不能大于num1的值，否则提示"num2 can't more than num1"
          {
            validator: (_, value) => {
              if (value > form.getFieldValue("num1")) {
                return Promise.reject("num2 can't more than num1");
              } else {
                return Promise.resolve();
              }
            }
          }
        ]}
      >
        <InputNumber />
      </Form.Item>
    </Form>
  );
};

export default App;

如果我们的Item中有多个validator，那么请保证每个validator的每种情况都有resolve或者reject函数执行，否则会有难以预料的错误，当我们在输入一个字段时，如果在监测另一个字段，那么请保证输入字段的校验规则函数不管是成功的状态还是失败的状态，都运行resolve函数，否则输入字段可以会被认为不符合规则。

如果我们在检验的字段是form.list中的数据，应该如何操作？

我写在了下面代码的注释中了

({ validateFields }) => ({
            validator() {
              return new Promise((resolve, reject) => {
                //validateFields可以校验当前form的所有字段，可以把要校验的字段的name放入数组中
                validateFields([["form.list的name","这里填写数字：表示是list的第几条数据","字段名称"]]).then(
                  (value) => {
                    console.log(value);
                    return resolve();
                  },
                  (reason) => {
                    console.log(reason);
                    return resolve();
                  }
                );
              });
            }
          })

我自己项目中的代码

({ validateFields }) => ({
                  validator:() => {
                    return new Promise((resolve) => {
                      validateFields([["list",0,"age"]]).then(
                        () => resolve(undefined),
                        () => resolve(undefined)
                      );
                    });
                  }
                }),

list：form.list的name属性

0：你检测的这个字段是form.list中的第几条数据

age：你要检测的字段

[["list",0,"age"]]：注意是一个数组中包裹着一个数组作为元素，如果包裹的不是数组，会没有效果的。