antd多个表单元素相互触发验证（最大值最小值校验）

转载于https://blog.csdn.net/JudyC/a...

遇到表单相互验证的地方比较少, 一般就是密码, 二次输入密码.
这种验证是以第二个表单元素为主, 提示错误也只在第二个表单下提示.
那么有两个及以上的表单元素需要相互验证并且都有自己的判断条件及提示信息该怎么做呢?
场景:
最大值: 需大于最小值和中间值
最小值: 需小于最大值和中间值
中间值: 需介于最小值最大值之间
代码:
1.render中表单元素

<FormItem label="最小值">
  {getFieldDecorator('minValue', {
    rules: [{
      validator: this.minValueValidate,
    }],
  })(
    <InputNumber style={{width: '100%'}} placeholder="请输入" min={0} onChange={() => this.changeValueType('minValue')} />
  )}
</FormItem>
<Form.Item label="中间值">
  {getFieldDecorator(`midValue`, {
    rules: [{
      validator: this.midValueValidate,
    }],
  })(
    <InputNumber style={{width: '100%'}} placeholder="请输入" min={0} onChange={() => this.changeValueType('midValue')} />
  )}
</Form.Item>
<FormItem label="最大值">
  {getFieldDecorator('maxValue', {
    rules: [{
      validator: this.maxValueValidate,
    }],
  })(
    <InputNumber style={{width: '100%'}} placeholder="请输入" min={0} onChange={() => this.changeValueType('maxValue')} />
  )}
</FormItem>

2.函数

midValueValidate = (rule, value, callback) => {
  const {form} = this.props;
  const {getFieldValue, validateFields} = form;
  const minValue = getFieldValue('minValue');
  const maxValue = getFieldValue('maxValue');
  // 因为不是必填项, 所以value有值时才进行判断
  if(value != null && value !== ''){
    if(minValue != null && minValue !== '' && maxValue != null && maxValue !== ''){
      if(minValue >= value || value >= maxValue){
        callback('安全库存应介于最高库存与最低库存之间')
      }
    }
  }
  // 当前表单元素验证完还需再次验证其他的表单元素, 
  // 因为存在当前表单元素改变前其他表单元素不通过验证, 但是当前表单元素改变后其他表单元素通过验证的情况, 
  // 比如: minValue: 3, maxValue:5,midVakue: 2, 此时3和5的表单元素是会报错的, 
  // 如果删掉midValue的值, 那么就需要再次验证minValue和maxValue使报错信息消失掉
  // 注!!!: 只有当前操作的表单元素为正在验证的元素时验证另外的表单元素, 不然会陷入死循环, 超出堆栈
  if(this.valueType === rule.field){
    validateFields(['minValue', 'maxValue'], { force: true })
  }
  callback();
}

minValueValidate = (rule, value, callback) => {
  const {form} = this.props;
  const {getFieldValue, validateFields} = form;
  const midValue = getFieldValue('midValue');
  const maxValue = getFieldValue('maxValue');
  if(value != null && value !== ''){
    if(maxValue != null && maxValue !== '' && value >= maxValue){
      callback('最低库存应小于最高库存');
    }
    if(minValue != null && midValue !== '' && value >= midValue){
      callback('最低库存应小于安全库存')
    }
  }
  if(this.valueType === rule.field){
    validateFields(['midValue', 'maxValue']);
  }
  callback();
}

maxValueValidate = (rule, value = '', callback) => {
  const {form} = this.props;
  const {getFieldValue, validateFields} = form;
  const midValue = getFieldValue('midValue');
  const minValue = getFieldValue('minValue');
  if(value != null && value !== ''){
    if(minValue != null && minValue !== '' && value <= minValue){
      callback('最高库存应大于最低库存');
    }
    if(midValue != null && midValue !== '' && value <= midValue){
      callback('最高库存应大于安全库存')
    }
  }
  if(this.valueType=== rule.field){
    validateFields(['midValue', 'minValue']);
  }
  callback();
}

/**
* 标志当前操作的表单元素
*/
changeValueType = (valueType) => {
  this.valueType= valueType;
}