antd Form 提交如何表单验证再提交
时间: 2023-08-15 11:08:51 浏览: 63
在 Ant Design 中,可以使用 Form 组件的 validateFields 方法来进行表单验证。在验证通过后,再进行表单提交操作。
示例代码如下:
```
import { Form, Button, message } from 'antd';
const Demo = () => {
const [form] = Form.useForm();
const handleSubmit = () => {
form.validateFields()
.then(values => {
console.log(values);
// 在这里进行表单提交操作
message.success('提交成功');
})
.catch(error => {
console.log(error);
message.error('提交失败');
});
}
return (
<Form form={form}>
<Form.Item
name="username"
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item
name="password"
rules={[{ required: true, message: '请输入密码' }]}
>
<Input.Password placeholder="请输入密码" />
</Form.Item>
<Button onClick={handleSubmit}>提交</Button>
</Form>
);
}
```
在上面的例子中,当用户点击提交按钮时,会触发 handleSubmit 函数。在 handleSubmit 函数中,首先调用 form.validateFields() 方法进行表单验证。如果验证通过,则打印表单数据到控制台,并进行表单提交操作,并使用 message.success() 方法提示用户提交成功。如果验证不通过,则使用 message.error() 方法提示用户提交失败。
需要注意的是,validateFields 方法返回一个 Promise 对象,因此需要使用 .then() 和 .catch() 方法来处理验证结果。在 .then() 方法中,可以获取到验证通过后的表单数据。在 .catch() 方法中,可以获取到验证失败的具体错误信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)