React Antd 表单验证示例：使用 Form、Input 和 Button 组件

在 React 中使用 Antd 的表单组件，并带有表单验证的简单代码示例：

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

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

  return (
    <Form
      name="myForm"
      onFinish={onFinish}
      initialValues={{
        remember: true,
      }}
    >
      <Form.Item
        name="username"
        label="Username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="Password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

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

export default MyForm;

在上面的代码中，我们使用了 Antd 的 Form、Input 和 Button 组件。Form.Item 组件用于包装表单字段，并指定字段的验证规则。在 Form.Item 组件中，我们可以设置 name 属性来指定字段的名称，label 属性来指定字段的标签，rules 属性来指定字段的验证规则。在 Form 组件中，我们设置了 onFinish 属性来指定表单提交时的回调函数。

通过上述代码，我们创建了一个简单的表单，其中包含一个用户名字段和一个密码字段。这些字段都是必填字段，如果用户没有填写这些字段，则会显示相应的错误提示信息。当用户点击提交按钮时，会触发 onFinish 回调函数，并将表单的值作为参数传递给该函数。在这个例子中，我们只是简单地将表单的值打印到控制台上，你可以根据自己的需求进行相应的处理。