antdesign表单校验

Ant Design 是一个优秀的 React UI 库，提供了丰富的表单组件和表单校验功能。下面是一个简单的 Ant Design 表单校验示例：

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

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

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

  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

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

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

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

export default Demo;

在上面的示例中，我们使用了 `Form`、`Input` 和 `Button` 等组件，其中 `Form.Item` 组件中的 `rules` 属性用于设置校验规则。`required` 规则表示必填项，`message` 属性表示校验不通过时的提示信息。当表单提交时，如果校验不通过，会触发 `onFinishFailed` 回调函数；如果校验通过，会触发 `onFinish` 回调函数，我们可以在这个函数中获取表单数据并进行后续处理。