在表单校验中，我们有时候会有一些业务场景是有两个表单校验规则是有联动逻辑关系的。比如两个数字输入框，第一个的输入数字必须小于第二个输入的数字。当我们输入第一个数字为2的时候，再输入第二个数字为1，第二个输入框的校验就会提示报错。
<div>
<FormItem
label="小的数字"
>
{getFieldDecorator('min', {
initialValue: '',
rules: [
{
validator: this.validatorMin
}
],
})(
<InputNumber />
)}
</FormItem>
<FormItem
label="大的数字"
>
{getFieldDecorator('max', {
initialValue: '',
rules: [
{
validator: this.validatorMax
}
],
})(
<InputNumber />
)}
</FormItem>
</div>
效果如下图所示：
这时候我们可以改变两个输入框的值，都进行修改，使条件满足。如果但是表单校验都是独立的，所以，我们必须得在当前修改的表单校验完成之后，触发一下联动校验的表单校验。这样才能使得在两个表单校验都成功。
validatorMin = (rule, value, callback) => {
console.log(value)
const { getFieldValue } = this.props.form
if (value > getFieldValue('max')) {
callback('数字大了')
}
callback()
<!--注意触发联动表单校验必须是成功的callback之后进行回调，要不然会两个互相循环调用-->
this.props.form.validateFields(['max']);
}
validatorMax = (rule, value, callback) => {
console.log(value)
const { getFieldValue } = this.props.form
if (value < getFieldValue('min')) {
callback('数字小了')
}
callback()
<!--注意触发联动表单校验必须是成功的callback之后进行回调，要不然会两个互相循环调用-->
this.props.form.validateFields(['min']);
}
这就就可以联动的校验与当前改变的表单有逻辑关系的校验了。 效果如图：
