antd 4 form 设置校验

你可以使用 Ant Design（antd） 4 中的 Form 组件来进行表单校验。以下是一个示例：

1. 首先，导入所需的依赖：

import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

2. 创建一个简单的表单组件：

const MyForm = () => {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input prefix={<UserOutlined />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password prefix={<LockOutlined />} placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

在上面的代码中，我们使用 `rules` 属性来设置校验规则。这里的规则是必填项，如果用户未输入任何内容，则会显示相应的错误消息。

3. 在你的页面中使用该表单组件：

import React from 'react';

const YourPage = () => {
  return (
    <div>
      <h1>Your Page</h1>
      <MyForm />
    </div>
  );
};

export default YourPage;

这样，当用户提交表单时，会触发 `onFinish` 函数，并打印表单的值。你可以根据需要进行进一步的处理或提交操作。

希望这个示例能帮助到你！