antd-表单自定义校验,触发自定义校验后才能显示全部的校验提示

问题描述

进入页面，直接点击注册按钮，没有触发表单验证，但控制台打印的表单验证的结果

触发自定义校验后，点击注册按钮，触发表单验证，

不会出现校验提示的代码

import React, { Component } from 'react';
import {
  Form,
  Input,
  Button,
  Select,
} from 'antd';

const { Option } = Select;

const validateLimit = (rule, value, callback) => {
  if (value.length > 2) {
    callback('最多选择2个选项！');
  } else {
    callback();
  }
}

class TreeSelectForm extends Component {
  state = {
    confirmDirty: false,
    autoCompleteResult: [],
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  handleConfirmBlur = e => {
    const { value } = e.target;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };



  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>
        <Form.Item label="账号">
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: '请输入你的账号！',
              },
            ],
          })(<Input />)}
        </Form.Item>
        <Form.Item label="审核领导">
          {getFieldDecorator('confirm', {
            rules: [
              {
                required: true,
                message: '请选择审核领导！',
              },
              {
                validator: validateLimit
              }
            ],
          })(
            <Select
              mode="multiple"
            >
              <Option value="111">王建国</Option>
              <Option value="112">王斌</Option>
              <Option value="113">徐亮</Option>
              <Option value="114">沈雁冰</Option>
              <Option value="115">王飞</Option>
            </Select>
          )}
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            注册
          </Button>
        </Form.Item>

      </Form >
    )
  }

}

const TreeSelectFormDemo = Form.create({ name: 'register' })(TreeSelectForm);
export default TreeSelectFormDemo;

问题解决过程

1. 确认Bug在哪一段代码中，注释掉自定义校验部分后，表现正常
2. 重新写一个小Demo,只去调试和Bug相关的代码
3. 搜索‘antd 表单 自定义校验 触发自定义校验后才能显示全部的校验提示’，无结果
4. 仔细查看官方文档中表单自定义校验的例子，发现官方自定义校验函数if判断中增加了value的兼容判断

compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    // 此处有对value的兼容判断
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that. you enter is inconsistent!');
    } else {
      callback();
    }
  };

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props;
    // 此处有对value的兼容判断
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

问题出现原因

自定义校验函数顶部添加控制台打印

const validateLimit = (rule, value, callback) => {
  console.log('自定义检验', value)
  if (value.length > 2) {
    callback('最多选择2个选项！');
  } else {
    callback();
  }
}

1. 直接点击注册按钮
   

2. 选择一个审批领导
   

3. 再次点击注册按钮
   

结论：value存在值为undefind的时刻，会导致表单验证不正常

解决方案

自定义函数if判断的条件中加入对value的兼容判断

const validateLimit = (rule, value, callback) => {
  // 自定义函数if判断的条件中加入对value的兼容判断
  if (value && value.length > 2) {
    callback('最多选择2个选项！');
  } else {
    callback();
  }
}

参考资料

如何验证程序是否完成，测试以及修正Bug?