小程序表单提交如何做校验、防重复提交和错误提示？
简化版
小程序表单要做前端即时校验、提交前校验、服务端可信校验和防重复提交。前端负责体验，服务端负责最终正确性；提交按钮要有 loading、请求锁、幂等键和错误分层，避免连点、弱网重试和脏数据进入系统。
详细版
表单处理重点：
- 输入时做基础格式校验。
- 提交前统一校验必填、长度、格式和业务规则。
- 提交中禁用按钮或加请求锁。
- 服务端再次校验，不信任前端。
- 请求失败要保留用户输入。
- 重复提交用幂等键或服务端唯一约束兜底。
常见错误：
- 只做前端校验。
- 用户连点产生多条订单或多次报名。
- 错误提示太笼统。
- 提交失败清空表单。
- 弱网下没有 loading 状态。
完整版教学
一、表单校验分体验校验和可信校验
前端校验的目标是让用户尽快知道哪里填错，例如手机号少一位、必填项为空、昵称太长。服务端校验的目标是保证系统数据正确，因为前端代码和请求都可以被绕过。
所以不要把“前端已经校验过”当作安全依据。面试回答要明确：前端校验提升体验，服务端校验保证事实，两者缺一不可。
输入中校验 → 提交前校验 → 服务端校验 → 落库/返回错误 → 前端展示二、防重复提交要从按钮和接口两层做
用户连点、网络重试、页面回退再提交都可能造成重复数据。前端可以用 loading 和请求锁减少重复请求，但最终还要靠服务端幂等。因为攻击者可以绕过按钮状态直接发请求。
数字例子：一个报名按钮如果 1 秒内被连点 5 次，前端没锁就可能发出 5 个请求。服务端如果也没唯一约束，数据库就会出现 5 条报名记录。前端锁能减少误操作，服务端唯一键能兜住异常路径。
if (this.submitting) return
this.submitting = true
try {
await submitForm(data)
} finally {
this.submitting = false
}三、幂等键适合订单和报名类场景
幂等键可以理解为“一次提交的唯一编号”。前端生成或服务端下发一个 submitToken，提交时带上；服务端发现同一个 token 已处理过，就返回同一结果，而不是重复创建资源。
比如用户提交订单时生成 token T100，第一次请求创建订单 O88，第二次因为弱网重试又带 T100，服务端直接返回 O88。这样用户不会因为网络抖动买出两单。
| 场景 | 幂等策略 | 例子 |
|---|---|---|
| 报名 | 用户 + 活动唯一 | 同一活动只能报名一次 |
| 下单 | submitToken | 重试返回同一订单 |
| 核销 | 券码状态机 | 未使用才能改已使用 |
| 评论 | 客户端请求 ID | 防止重复发同一评论 |
四、错误提示要能指导用户修复
“提交失败”是很差的提示，因为用户不知道怎么改。更好的错误提示要说明字段、原因和下一步。例如“手机号格式不正确，请输入 11 位手机号”；服务端业务错误可以提示“该时间段已约满，请选择其他时间”。
错误也要分层：字段错误展示在输入框附近，业务错误用 toast 或页面提示，系统错误提示稍后重试。不要把服务端堆栈或内部错误码直接展示给用户。
五、弱网体验要保留输入
小程序用户经常处在移动网络中。提交失败时如果直接清空表单，会非常糟糕。应该保留输入，让用户能修改后重试；必要时可以把草稿保存在页面状态或本地临时缓存，但要注意隐私数据不要长期保存。
对于长表单，可以分步骤保存草稿。比如 20 个字段的申请表，每次失败都让用户重填，转化会明显下降。表单体验的关键不是“成功时好看”，而是“失败时不折磨用户”。
六、校验规则要避免前后端分裂
如果前端允许昵称 20 个字，服务端只允许 10 个字，用户会在提交后才失败。工程中可以把校验规则文档化，或者由服务端返回字段限制，让前端展示一致规则。
不过即使共享规则，服务端也不能省校验。前端规则是为了提前提示，服务端规则是为了保护数据。两者目标不同，不能互相替代。
表单心法：前端让用户少犯错，服务端让系统不进脏数据，幂等让重复动作只产生一次结果。
七、常见误区与追问
- 误区：前端校验通过就可以直接入库。 请求可以被伪造，服务端必须重新校验。
- 误区：禁用按钮就彻底解决重复提交。 禁用按钮只挡正常用户，服务端仍要幂等或唯一约束。
- 误区：提交失败清空表单更干净。 这会严重伤害体验，应保留输入并指导用户修复。
- 追问：订单重复提交怎么处理？ 使用 submitToken 或预订单号，服务端重复请求返回同一订单。
- 追问：错误提示怎么设计？ 字段错误贴近字段，业务错误说明原因，系统错误提示重试且不暴露内部细节。
- 追问：校验规则前后端不一致怎么办？ 统一规则来源或文档约束，但服务端仍保留最终校验。
八、加强记忆
小程序表单用“四层防线”记：输入时提示、提交前校验、提交中防重复、服务端做最终校验和幂等。前端负责用户体验，服务端负责可信结果。弱网下保留输入，错误提示能指导修复，这样表单才算工程上可用。