【antd】form表单如何校验区间值

需求:我们需要在表单中填写两个数值,一个最大值一个最小值,但是我们需要在填写的时候去校验最大值和最小值的关系,最大值不能小于最小值,最小值不能大于最大值.如下

 

 

解决方案:

   1.rules中配置validator

   2.通过form.getFieldValue()拿到另一个值进行对比

    //最小值校验     

               rules={[
                        {
                          required: true,
                          message: '请需填写完整',
                        },
                        {
                          validator: (rule, value, callback) => {
                            let maxPrice = form.getFieldValue('maxPrice'); //拿到最大值
                            if (value > maxPrice) {
                              callback(`不能大于${maxPrice}`);
                            } else {
                              callback();
                            }
                          },
                        },

 这里有个问题,即当我最小值已经报错了,但是我不去修改最小值而是去修改最大值,即使满足条件了,最小值的报错还在,校验效果不会更新,如下我先最大值填4,最小值填5,则最小值显示"不能大于4",这时候我再把最大值改成6,这个报错不会消失

 

 解决方案2:

    报错之后更新一下校验

                      rules={[
                        {
                          required: true,
                          message: '请需填写完整',
                        },
                        {
                          validator: (rule, value, callback) => {
                            let maxPrice = form.getFieldValue('maxPrice');
                            if (value > maxPrice) {
                              callback(`不能大于${maxPrice}`);
                              form.validateFields(['maxPrice']);
                            } else {
                              form.validateFields(['maxPrice']);
                              callback();
                            }
                          },
                        },
                      ]}

但是这同样也有个问题,就是他们会同时报错,同时取消报错.

 

这两种情况下的问题其实也不算问题,可以根据需求选其中一种方案

 

 

完整代码

                   <Form.Item
                      name="minPrice"
                      wrapperCol={{ span: 24 }}
                      rules={[
                        {
                          required: true,
                          message: '请需填写完整',
                        },
                        {
                          validator: (rule, value, callback) => {
                            let maxPrice = form.getFieldValue('maxPrice');
                            if (value > maxPrice) {
                              callback(`不能大于${maxPrice}`);
                              form.validateFields(['maxPrice']);
                            } else {
                              form.validateFields(['maxPrice']);
                              callback();
                            }
                          },
                        },
                      ]}
                    >
                      <InputNumber
                        placeholder="请输入价格"
                      ></InputNumber>
                    </Form.Item>
                    <Form.Item
                      name="maxPrice"
                      wrapperCol={{ span: 24 }}
                      rules={[
                        {
                          required: true,
                          message: '请需填写完整',
                        },
                        {
                          validator: (rule, value, callback) => {
                            let minPrice = form.getFieldValue('minPrice');
                            if (value < minPrice) {
                              callback(`不能小于${minPrice}`);
                              form.validateFields(['minPrice']);
                            } else {
                              form.validateFields(['minPrice']);
                              callback();
                            }
                          },
                        },
                      ]}
                    >
                      <InputNumber
                        placeholder="请输入价格"
                      ></InputNumber>
                    </Form.Item>