antd多个表单元素相互触发校验(最大值最小值校验)

两个及以上的表单元素需要相互验证并且都有自己的判断条件及提示信息该怎么做呢?

场景:
最大值: 需大于最小值
最小值: 需小于最大值
(1)代码:render中表单元素

                 <Form.Item
                    name="creditStartRange"
                    rules={[
                      { required: true, message: '请输入最小值' },
                      { validator: minValueFn }
                    ]}
                  >
                    <InputNumber
                      min={1}
                      style={{ width: '100%' }}
                      placeholder="请输入最小值"
                      onClick={() => {
                        changeValueType('creditStartRange');
                      }}
                    />
                  </Form.Item><Form.Item
                    name="creditEndRange"
                    rules={[
                      { required: true, message: '请输入最大值' },
                      { validator: maxValueFn },
                    ]}
                  >
                    <InputNumber
                      min={1}
                      style={{ width: '100%' }}
                      placeholder="请输入最大值"
                      onClick={() => {
                        changeValueType('creditEndRange');
                      }}
                    />
               </Form.Item>
                  

(2)校验规则函数

//当前操作的表单元素存进useState中
  const [formType, setFormType] = useState('');
  
//注意:当前操作的表单元素和进行验证的表单元素不能为同一个,否则会陷入死循环  
//最小值函数
  const minValueFn = (rule: any, value: string, callback: any) => {
    const { getFieldValue, validateFields } = form;
    const maxValue = getFieldValue('creditEndRange');
    if (value != null && value !== '') {
      if (maxValue != null && maxValue !== '' && value >= maxValue) {
        callback('最小值需小于最大值');
      }
    }
    if (formType === rule.field) {
      validateFields(['creditEndRange']);
    }
    callback();
  };
  //最大值函数
  const maxValueFn = (rule: any, value: string, callback: any) => {
    const { getFieldValue, validateFields } = form;
    const minValue = getFieldValue('creditStartRange');
    if (value != null && value !== '') {
      if (minValue != null && minValue !== '' && value <= minValue) {
        callback('最大值需大于最小值');
      }
    }
    if (formType === rule.field) {
      validateFields(['creditStartRange']);
    }
    callback();
  };
  //当前操作的表单元素
  const changeValueType = (valueType: string) => {
    setFormType(valueType);
  };

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值