validator 表单自定义校验

校验报错

callback is deprecated. Please return a promise instead

Warning: callback is deprecated. Please return a promise instead
原因：
因为新版的Antd使用了 React的hooks，表单中的字段校验方法进行了一些修改；
原来的 callback回调方法改成了返回一个Promise对象

• return Promise.resolve();
• return Promise.reject() ; ```jsx function validatorRange(rule, value) { if (isArray(value)) { const { length } = value.filter(Boolean); if(Boolean(length) && length !== 2) {

  return Promise.reject('请输入值范围')

  } } return Promise.resolve(); }

<a name="Y5Qok"></a>
## form4x Promise校验
适用于 antd 4x
```jsx
function validatorHost(rule, value, callback) {
  console.log(value[1], 'value[1');
  const [start, end] = value
  const hostReg =
        /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))$/;
  if (!start && start !== 0) {
    return Promise.reject('请选择请求方式');
  }
  if (!end) {
    return Promise.reject('请输入服务器地址');
  }
  if (!hostReg.test(start)) {
    return Promise.reject('请输入正确的服务器地址');
  }
  return Promise.resolve();
}
<Item
  name='host'
  label='服务器地址'
  rules={[
    { required: true, message: '请输入服务器地址', type: 'array' },
    {validator: validatorHost}
  ]}
  >
  <InputRange />
</Item>

form 3x callback校验

validator：function(rule, value, callback)
自定义校验，callback 必须被调用
适用于 antd 3x

function validatorHost(rule, value, callback) {
  const [start, end] = value
  const hostReg =
        /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))$/;
  if (!start && start !== 0) {
    return callback('请选择请求方式');
  }
  if (!end) {
    return callback('请输入服务器地址');
  }
  if (!hostReg.test(end)) {
    return callback('请输入正确的服务器地址');
  }
  callback()
}
<Item
  name='host'
  label='服务器地址'
  rules={[
    { required: true, message: '请输入服务器地址', type: 'array' },
    { validator: validatorHost }
  ]}
  >
  <InputRange />
</Item>

validatorDateRnage 时间区间验证

export function validatePickerRange(rule, value, callback) {
  if (isArray(value)) {
    const { length } = value.filter(Boolean);
    if (Boolean(length) && length !== 2) {
      callback('请选择开始时间和结束时间');
    } else if (length === 2) {
      const [start, end] = value;
      if (end.isBefore(start)) {
        callback('结束时间不能小于开始时间');
      }
    }
  }
  callback();
}
<Form.Item label='时间范围'>
  {
    form.getFieldDecorator('pickerRange', {
      initialValue: [],
      rules: [{ validator: validatePickerRange }]
    })(<PickerRange />)
  }
</Form.Item>