【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>