React+antd表单校验

React使用ant-design进行Form表单校验问题

关键字：React、Form表单校验、antd V4.18.5

V4版本最新校验规则写法

出现的错误

v4版本的antd在使用validator去设置自定义校验规格会提示警告：callback已经弃用

// 编辑最大值规则
  const maxValidators = (_, value, callback) => {
    if (maxCount >= minCount || minCount === null) {
      // return Promise.resolve('')
      callback && callback('')
    } else {
      // return Promise.reject('不得小于最小值')
      callback && callback('不得小于最小值')
    }
  };

解决方案1

校验时返回Promise对象

  // 编辑最大值规则
  const maxValidators = (_, value, callback) => {
    if (maxCount >= minCount || minCount === null) {
      return Promise.resolve('')
    } else {
      return Promise.reject('不得小于最小值')
    }
  };

  // 编辑最小值规则
  const minValidators = (_, value) => {
    if (minCount <= maxCount || maxCount === null) {
      return Promise.resolve('')
    } else {
      return Promise.reject('不得大于最大值')
    }
  };

	<Form.Item
	  name="minValue"
	  rules={[
	    { required: true, message: '请设置最小值' },
	    {
	      validator: minValidators
	    }
	  ]}
	  initialValue={reShowData ? reShowData.minValue : null}
	>
	  <InputNumber
	    min={0}
	    max={100}
	    onChange={(value) => {
	      console.log('minOnChange', value);
	      setMinCount(value);
	    }}
	    formatter={(value) => `${value}%`}
	    parser={(value) => value.replace('%', '')}
	  />
	</Form.Item>

解决方案2

由于你的 validator 有错误导致 callback 没有执行到。你可以选择通过 async 返回一个 promise 或者使用 try…catch 进行错误捕获;

——来自antd官网

validator: async (rule, value) => {
  throw new Error('Something wrong!');
}

// or

validator(rule, value, callback) => {
  try {
    throw new Error('Something wrong!');
  } catch (err) {
    callback(err);
  }
}