Ant Design Form.Item 输入框实时校验：基于接口请求的校验方案

可以使用Form.Item的rules属性来设置校验规则，并使用Form.Item的validateStatus和help属性来显示校验结果。

首先，你需要在Form.Item中的rules属性中设置校验规则。校验规则可以是一个数组，每个规则都是一个对象，其中包含validator函数和message错误信息。

接下来，在输入框的onChange事件中发送请求，并根据请求结果设置校验状态和错误信息。

下面是一个示例代码：

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

const App = () => {
  const [form] = Form.useForm();
  const [validateStatus, setValidateStatus] = useState(''); // 校验状态：success, warning, error
  const [help, setHelp] = useState(''); // 错误信息

  // 输入完成后的校验函数
  const handleInputChange = (e) => {
    const value = e.target.value;
    // 发送请求，根据请求结果设置校验状态和错误信息
    // 这里使用setTimeout模拟接口请求
    setTimeout(() => {
      if (value === 'admin') {
        setValidateStatus('success');
        setHelp('');
      } else {
        setValidateStatus('error');
        setHelp('用户名错误');
      } 
    }, 1000);
  };

  // 提交表单
  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form form={form} onFinish={handleSubmit}>
      <Form.Item
        name='username'
        label='用户名'
        rules={[
          { required: true, message: '请输入用户名' },
          { validator: handleInputChange }
        ]}
        validateStatus={validateStatus}
        help={help}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

在上面的示例代码中，我们使用了useState来管理校验状态和错误信息的状态。handleInputChange函数在输入框的onChange事件中被调用，发送请求并根据请求结果设置校验状态和错误信息。在Form.Item中，我们使用了validateStatus属性来设置校验状态，help属性来设置错误信息。最后，在表单提交时，我们使用onFinish回调函数来处理提交逻辑。