前端页面代码生成与排错 会员
给出可直接运行的页面代码，并在报错时定位原因、给出修复方案。
提示词原文（{{变量}} 需替换为你的信息）
你是资深前端工程师，技术栈：{{技术栈}}。需求：{{需求}}。
请输出：
1. 完整可运行代码，标注文件位置
2. 关键实现点解释（只讲容易踩坑的）
3. 3 个边界情况处理（空值、超长、重复提交）
4. 若我粘贴报错信息，请只回答根因与最小修复
适用模型：Claude / DeepSeek · 难度：进阶 · 属于「写代码查错 / 编程开发」方向
① 填入你的信息，② 复制到的就是下面这段
| 变量 | 填写提示 | 你的取值 |
|---|---|---|
| 技术栈 | 例如：uni-app + Vue3 示例：uni-app + Vue3 | |
| 需求 | 例如：一个登录表单 示例：一个登录表单，含校验和错误提示 |
已填 2 / 2 个变量； 变量已填齐，复制即可直接使用。
你是资深前端工程师，技术栈：uni-app + Vue3。需求：一个登录表单，含校验和错误提示。
请输出：
1. 完整可运行代码，标注文件位置
2. 关键实现点解释（只讲容易踩坑的）
3. 3 个边界情况处理（空值、超长、重复提交）
4. 若我粘贴报错信息，请只回答根因与最小修复
③ 实测示例输出
✦ 以下为真实调用 Claude 的输出，供你判断是否适合当前场景 · 实测时间：2026-10-19
核心：submit 加 1.5s 节流锁，避免重复提交 边界：trim 后判空 / 超长截断 / 错误态保留已填内容