### Ant Design 中 form.validateFields 的用法及作用 `form.validateFields` 是 Ant Design 表单组件中的一个核心方法，用于触发表单字段的校验，并获取校验结果。以下是该方法的详细说明和用法： #### 1. 方法定义 `form.validateFields` 会根据表单字段的规则（`rules`）对所有或指定的字段进行校验。如果校验通过，则返回字段值；如果校验失败，则返回错误信息。 #### 2. 参数说明 `validateFields` 支持两种参数形式： - **无参数**：校验所有字段。 - **字段名数组**：校验指定字段。 #### 3. 返回值 `validateFields` 返回一个 `Promise` 对象： - 如果校验成功，`Promise` 会解析为一个包含字段值的对象。 - 如果校验失败，`Promise` 会被拒绝，并返回一个包含错误信息的对象。 #### 4. 使用示例 以下是一个完整的代码示例，展示如何使用 `form.validateFields` 进行表单校验： ```javascript import React from 'react'; import { Form, Input, Button } from 'antd'; const MyForm = () => { const [form] = Form.useForm(); const handleSubmit = () => { form.validateFields().then((values) => { console.log('校验成功，表单值:', values); }).catch((errorInfo) => { console.log('校验失败，错误信息:', errorInfo); }); }; return ( <Form form={form}> <Form.Item name="username" label="用户名" rules={[ { required: true, message: '请输入用户名' }, { min: 3, message: '用户名至少需要3个字符' } ]} > <Input /> </Form.Item> <Form.Item name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]} > <Input.Password /> </Form.Item> <Button type="primary" onClick={handleSubmit}> 提交 </Button> </Form> ); }; export default MyForm; ``` #### 5. 校验指定字段 如果只需要校验部分字段，可以传入字段名数组作为参数： ```javascript form.validateFields(['username']).then((values) => { console.log('用户名校验成功:', values); }).catch((errorInfo) => { console.log('用户名校验失败:', errorInfo); }); ``` #### 6. 注意事项 - 如果表单中存在未填写或不符合规则的字段，`validateFields` 会阻止表单提交并显示错误提示[^2]。 - 在异步场景下，可以结合 `Promise.all` 同时校验多个表单实例[^1]。 ---