3步搞定！Ant Design表单提交前确认：从验证到Modal弹窗全流程
项目地址: https://gitcode.com/gh_mirrors/antde/ant-design 你是否遇到过用户误操作提交表单的情况？订单信息填错、重要数据提交后无法修改...这些问题不仅影响用户体验，还可能造成业务损失。本文将通过3个步骤，教你如何在Ant Design中实现表单提交前的双重保障：数据验证 + Modal（模态框）确认，让用户操作更安心。
读完本文你将学到：
- 如何配置Form组件实现精准字段校验
- 怎样用Modal组件创建自定义确认弹窗
- 掌握表单提交前的完整验证-确认流程
1. 基础表单与验证规则配置
Ant Design的Form组件（表单）提供了强大的数据校验能力，通过配置rules属性可以轻松实现字段验证。我们先创建一个包含必填项和格式验证的基础表单。
import { Form, Input, Button } from 'antd';
const DemoForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('表单数据:', values);
// 这里将添加Modal确认逻辑
};
return (
<Form
form={form}
layout="vertical"
onFinish={onFinish}
initialValues={{ username: '', email: '' }}
>
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{ min: 3, max: 10, message: '用户名长度需在3-10个字符之间' }
]}
>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item
name="email"
label="邮箱"
rules={[
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '请输入有效的邮箱地址' }
]}
>
<Input placeholder="请输入邮箱" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
);
};
核心验证规则说明
Form组件的验证规则在rules属性中配置，常用规则包括：
| 规则 | 说明 | 示例 |
|---|---|---|
| required | 是否必填 | { required: true, message: '请输入内容' } |
| type | 输入类型 | { type: 'email', message: '请输入有效的邮箱' } |
| min/max | 长度限制 | { min: 3, max: 10, message: '长度需在3-10之间' } |
| pattern | 正则验证 | { pattern: /^\d+$/, message: '请输入数字' } |
完整的验证规则可参考官方文档：Form组件API
2. 集成Modal实现提交前确认
当表单验证通过后，我们需要添加一个确认环节，通过Modal组件（对话框）让用户确认提交内容。Ant Design提供了两种使用Modal的方式：组件式和静态方法调用。
方式一：使用Modal组件实现自定义确认框
import { Form, Input, Button, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const DemoForm = () => {
const [form] = Form.useForm();
const [visible, setVisible] = useState(false);
const [formValues, setFormValues] = useState(null);
const showConfirmModal = (values) => {
setFormValues(values);
setVisible(true);
};
const handleConfirm = () => {
console.log('最终提交数据:', formValues);
// 这里执行实际的提交逻辑
setVisible(false);
form.resetFields();
};
return (
<>
<Form
form={form}
layout="vertical"
onFinish={showConfirmModal}
initialValues={{ username: '', email: '' }}
>
{/* 表单项定义同上 */}
<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
<Modal
title="确认提交"
open={visible}
onOk={handleConfirm}
onCancel={() => setVisible(false)}
confirmLoading={false}
centered
>
<div style={{ marginBottom: 16 }}>
<ExclamationCircleOutlined style={{ color: '#faad14', fontSize: 24, marginRight: 8 }} />
<span>请确认以下信息无误后提交：</span>
</div>
<div>用户名: {formValues?.username}</div>
<div>邮箱: {formValues?.email}</div>
</Modal>
</>
);
};
方式二：使用Modal静态方法快速实现
如果不需要复杂的自定义内容，可以使用Modal的静态方法（如Modal.confirm）快速创建确认框：
const onFinish = async (values) => {
try {
// 手动触发表单验证
await form.validateFields();
// 验证通过后显示确认框
Modal.confirm({
title: '确认提交',
icon: <ExclamationCircleOutlined />,
content: (
<div>
<p>用户名: {values.username}</p>
<p>邮箱: {values.email}</p>
</div>
),
okText: '确认',
cancelText: '取消',
onOk() {
console.log('提交成功:', values);
// 执行提交逻辑
}
});
} catch (errorInfo) {
console.log('表单验证失败:', errorInfo);
}
};
Modal组件的更多配置选项可参考：Modal组件API
3. 完整流程与高级配置
完整的验证-确认流程
以下是包含表单验证、Modal确认和提交的完整实现：
import { Form, Input, Button, Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useState } from 'react';
const CompleteFormDemo = () => {
const [form] = Form.useForm();
const [submitting, setSubmitting] = useState(false);
const handleSubmit = async (values) => {
try {
setSubmitting(true);
// 模拟API请求
await new Promise(resolve => setTimeout(resolve, 1500));
message.success('提交成功！');
form.resetFields();
} catch (error) {
message.error('提交失败，请重试');
} finally {
setSubmitting(false);
}
};
const onFinish = async (values) => {
try {
// 手动触发所有字段验证
await form.validateFields();
// 显示确认弹窗
Modal.confirm({
title: '确认提交',
icon: <ExclamationCircleOutlined />,
content: (
<div>
<p>用户名: {values.username}</p>
<p>邮箱: {values.email}</p>
</div>
),
okText: '确认',
cancelText: '取消',
confirmLoading: submitting,
onOk: () => handleSubmit(values)
});
} catch (errorInfo) {
console.log('表单验证失败:', errorInfo);
}
};
return (
<Form
form={form}
layout="vertical"
onFinish={onFinish}
initialValues={{ username: '', email: '' }}
style={{ maxWidth: 500, margin: '0 auto', padding: 20 }}
>
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{ min: 3, max: 10, message: '用户名长度需在3-10个字符之间' }
]}
>
<Input placeholder="请输入用户名" />
</Form.Item>
<Form.Item
name="email"
label="邮箱"
rules={[
{ required: true, message: '请输入邮箱' },
{ type: 'email', message: '请输入有效的邮箱地址' }
]}
>
<Input placeholder="请输入邮箱" />
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" loading={submitting}>
提交
</Button>
</Form.Item>
</Form>
);
};
高级配置与最佳实践
- 异步验证：对于需要后端验证的场景，可以使用
validator自定义异步验证函数：
<Form.Item
name="username"
label="用户名"
rules={[
{ required: true, message: '请输入用户名' },
{
validator: async (_, value) => {
if (!value) return;
const response = await fetch(`/api/check-username?name=${value}`);
const data = await response.json();
if (!data.available) {
throw new Error('用户名已被占用');
}
}
}
]}
>
<Input placeholder="请输入用户名" />
</Form.Item>
- 自定义Modal样式：通过
style和maskStyle属性自定义弹窗样式：
Modal.confirm({
// ...其他配置
style: { width: '90%', maxWidth: 500 },
maskStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
bodyStyle: { maxHeight: '60vh', overflow: 'auto' }
});
- 表单提交防抖：防止用户重复提交
import { useDebounceFn } from 'ahooks';
const { run: debouncedSubmit } = useDebounceFn(handleSubmit, { wait: 500 });
总结与扩展
通过本文介绍的方法，我们实现了一个包含前端验证和提交确认的完整表单流程。关键步骤包括：
- 使用Form组件配置验证规则，确保输入数据符合要求
- 表单验证通过后，使用Modal组件展示确认弹窗
- 用户确认后执行实际提交逻辑，添加加载状态防止重复提交
Ant Design还提供了更多高级功能，如动态表单、嵌套表单、自定义表单控件等，可以根据实际需求进一步扩展。相关文档参考：
希望本文能帮助你构建更健壮、用户体验更好的表单应用！如果觉得有用，欢迎点赞收藏，关注获取更多Ant Design实用技巧。
下期预告：《Ant Design Table组件高级应用：虚拟滚动与性能优化》
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
