两个及以上的表单元素需要相互验证并且都有自己的判断条件及提示信息该怎么做呢?
场景:
最大值: 需大于最小值
最小值: 需小于最大值
(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);
};