ant design 表单校验
时间: 2023-09-09 18:11:05 浏览: 76
Ant Design提供了一套强大的表单校验机制来验证React表单。你可以使用Ant Design提供的Form组件以及其内置的校验规则来实现表单校验。下面是一个简单的示例:
首先,你需要导入Ant Design的Form组件和一些校验规则:
```jsx
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
```
然后,你可以创建一个Form组件,并在里面定义需要校验的表单项:
```jsx
<Form
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
name="username"
rules={[
{
required: true,
message: '请输入用户名',
},
]}
>
<Input prefix={<UserOutlined />} placeholder="用户名" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: '请输入密码',
},
]}
>
<Input.Password prefix={<LockOutlined />} placeholder="密码" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">