Ant Design Form.Item 校验：在 onBlur 请求失败时验证输入框

在使用 Ant Design 的 Form.Item 组件时，可以通过 validateOldRules 函数来实现自定义校验。本文将介绍如何将 onBlur 事件与 validateOldRules 函数结合，在 onBlur 方法中检查请求方法是否正确，并在 validateOldRules 函数中添加相应的校验逻辑，以确保表单提交时的正确性。

例如，当在 onBlur 方法中检查输入框时发现请求方法不正确，可以在 validateOldRules 中添加对此情况的校验逻辑。例如，可以在校验函数中检查请求的结果，如果不正确，则返回一个错误信息，让校验失败。以下是一个示例代码：

const validateOldRules = async (_, value) => {
  // 检查输入框的值是否为空
  if (!value) {
    throw new Error('请输入密码');
  }

  // 检查请求方法是否正确
  try {
    const response = await yourApiRequest();
    if (!response.data.success) {
      throw new Error('请求方法不正确');
    }
  } catch (error) {
    throw new Error('请求方法不正确');
  }
};

<Form.Item
  label='原始密码'
  name='oldPassword'
  rules={[
    { required: true },
    { validator: validateOldRules }
  ]}
  labelCol={{ style: { width: 110 } }}
  labelAlign='right'
>
  <Input.Password placeholder='请输入密码' onBlur={(e) => checkOldPass(e)} />
</Form.Item>

在上述代码中，validateOldRules 函数中添加了对请求方法不正确的校验逻辑。如果请求方法不正确，会抛出一个错误信息，导致校验失败。这样，在表单提交时就会显示相应的错误提示。请根据实际情况修改代码中的 yourApiRequest 函数，以正确获取请求结果。