自定义表单
项目目标
- 支持多页表单的分页、校验与提交流程。
技术栈
- 构建:vite;包管理:pnpm;框架:vue3(setup);移动端组件库:vant。
- 路由:router;状态:pinia;样式:less + tailwindcss(若已引入)。
功能模块
- 表单分页:通过 `usePagination` 管理页签与可视字段。
- 表单校验:使用 `van-form` 的 `@submit` 与 `@failed` 事件统一处理。
迭代变更(2025-11-27)
- 下一页校验逻辑改为触发表单的 `onSubmit`,不再直接调用 `validateCurrentPage`。
- 新增 `navigate_next_pending` 标记与 `afterValidatedNavigateNext` 方法:
- 当点击“下一页”时置标记,`onSubmit` 校验通过后执行翻页并调用 `resetValidation()` 重置后续页的错误显示状态。
- `onFailed` 时清除该标记,避免误判后续提交动作。
- `index.vue` 在 `onSubmit` 顶部拦截“下一页意图”,短路真实提交,仅做翻页与状态重置。
- 保持分页最后一页提示与按钮颜色逻辑同步。
- 分页构建逻辑调整:当表单中不存在 `paginator` 控件时不启用分页,移除按固定大小(8个字段)分片的兜底逻辑,确保无分页控件时不显示分页组件。