antd多个表单校验

对于antd的多个表单校验，你可以使用antd提供的Form组件来实现。以下是一个示例代码，演示了如何在一个表单中进行多个字段的校验：

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

const DemoForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Form values:', values);
  };

  const validateUsername = (_, value) => {
    // 在这里编写用户名校验逻辑
    if (value !== 'admin') {
      return Promise.reject('用户名不正确');
    }
    return Promise.resolve();
  };

  const validatePassword = (_, value) => {
    // 在这里编写密码校验逻辑
    if (value.length < 6) {
      return Promise.reject('密码长度不能少于6位');
    }
    return Promise.resolve();
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" label="用户名" rules={[{ validator: validateUsername }]}>
        <Input />
      </Form.Item>

      <Form.Item name="password" label="密码" rules={[{ validator: validatePassword }]}>
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default DemoForm;

在这个示例中，我们使用`Form`组件来创建一个表单，并通过`form`属性和`useForm`钩子函数创建了一个表单实例。在表单中的每个字段都可以通过`Form.Item`组件来包裹，并通过设置`name`属性指定字段的名称。

在`rules`属性中，我们可以通过传递一个包含校验逻辑的对象来进行字段的校验。在示例中，我们分别为用户名和密码字段定义了自定义的校验函数`validateUsername`和`validatePassword`。这些校验函数接收两个参数：第一个参数是当前字段的值，第二个参数是一个回调函数，可以用于异步校验。如果校验通过，我们需要调用回调函数的`resolve`方法；如果校验失败，我们需要调用回调函数的`reject`方法，并传递一个错误信息。

最后，我们可以通过设置`onFinish`属性来指定表单提交时的回调函数，其中的`values`参数包含了表单中所有字段的值。

这样，当用户填写表单并点击提交按钮时，antd会自动按照我们定义的校验逻辑进行校验，并在校验失败时显示错误信息。