10分钟get Ant Design Form表单用法

2024-01-29 05:54:44

1. 导入库

首先，在你的React项目中安装Ant Design Form库。

npm install antd

然后，在你的代码中导入Ant Design Form库。

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

2. 创建表单

接下来，你需要创建一个表单组件。

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

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

  return (
    <Form
      form={form}
      name="basic"
      onFinish={onFinish}
      autoComplete="off"
    >
      <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>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

这个表单组件包含了两个表单项，一个用于输入用户名，另一个用于输入密码。每个表单项都包含了一个标签、一个输入控件和一个校验规则。

3. 使用表单

现在，你可以将表单组件添加到你的页面中。

ReactDOM.render(<MyForm />, document.getElementById('root'));

当用户提交表单时，onFinish函数就会被调用，你可以在这个函数中处理表单数据。

4. 校验规则

Ant Design Form提供了丰富的校验规则，你可以使用这些规则来校验表单数据。

rules: [
  { required: true, message: 'Please input your username!' },
  { min: 5, message: 'Username must be at least 5 characters long!' },
  { max: 10, message: 'Username cannot be longer than 10 characters!' },
],

这个校验规则要求用户名必须填写，并且长度必须在5到10个字符之间。

5. 错误处理

如果你想自定义错误信息，你可以使用message属性。

message: 'This is a custom error message!'

你还可以使用validateMessages属性来自定义整个表单的错误信息。

validateMessages: {
  required: 'This field is required!',
  types: {
    email: 'This is not a valid email address!',
    number: 'This is not a valid number!',
  },
},