📝 表单处理
表单处理概述
表单是管理后台最常用的功能之一，用于数据录入、编辑和提交。完善的表单处理可以提升用户体验，减少错误数据。
表单验证规则
| 验证类型 | 说明 | 示例 |
|---|---|---|
| 必填验证 | 字段不能为空 | required: true |
| 长度验证 | 限制字符长度 | min: 6, max: 20 |
| 格式验证 | 验证数据格式 | email, url, phone |
| 范围验证 | 数值范围限制 | min: 0, max: 100 |
| 自定义验证 | 自定义验证逻辑 | validator: function |
| 异步验证 | 远程验证数据 | 检查用户名是否存在 |
表单库对比
| 表单库 | 框架 | 特点 |
|---|---|---|
| Ant Design Form | React | 功能全面、与 UI 库集成好 |
| Formik | React | 简洁 API、社区活跃 |
| React Hook Form | React | 性能好、Hooks API、轻量 |
| Element Form | Vue | 与 Element 集成、易用 |
| VeeValidate | Vue | 验证强大、可扩展 |
高级表单功能
1. 动态表单
根据配置动态生成表单。
const formSchema = [
{
type: 'input',
field: 'username',
label: '用户名',
rules: [{ required: true, message: '请输入用户名' }]
},
{
type: 'select',
field: 'role',
label: '角色',
options: [
{ label: '管理员', value: 'admin' },
{ label: '编辑', value: 'editor' }
]
}
];
2. 表单联动
字段之间相互影响。
// 省市区联动
const [province, setProvince] = useState('');
const [cities, setCities] = useState([]);
useEffect(() => {
if (province) {
fetchCities(province).then(setCities);
}
}, [province]);
3. 分步表单
将复杂表单分成多个步骤。
const steps = [
{ title: '基本信息', component: BasicForm },
{ title: '详细信息', component: DetailForm },
{ title: '确认提交', component: ConfirmForm }
];
表单最佳实践
- ✅ 即时验证：用户输入时实时反馈
- ✅ 错误提示：清晰明确的错误信息
- ✅ 自动保存：防止数据丢失
- ✅ 提交防抖：防止重复提交
- ✅ 加载状态：提交时显示 loading
- ✅ 表单重置：提供重置功能