微信小程序表单校验教程｜规则分层、提示时机与防重复提交 – MPForge

一、表单事故的两头：重复数据与无效提示

结论先记住：校验做得好不好，用户只用两件事投票——会不会误提交，看没看懂错在哪。

我们处理过的真实客诉：报名页网络慢，用户连点提交按钮七次，后台生成七条报名记录，电话被回访了七遍；注册页手机号填错，页面只弹一个「提交失败」，用户对着十个字段猜哪个错了；运营改了手机号位数规则，前端没同步，用户填了合法号码却被后端打回。三件事对应三套机制：提交锁、字段级错误提示、规则单一来源。

分工口径：产品出字段规则表（必填、格式、长度、特殊规则），开发按表实现并保持前后端一致，运营每改一次规则就升一版表。

二、校验分层的实现步骤

时机对了，提示才有价值。五步走：

1. 失焦即校验：手机号、身份证等格式字段在失焦时做初筛并就地标红，别攒到提交时一次性报全部错误。
2. 提交统一把关：提交时按字段规则表跑一遍完整校验，第一个错误字段自动聚焦并滚动到可见位置。
3. 错误定位到字段：报错信息写在字段下方或输入框内联提示，禁止只弹全局 alert 让用户自己找。
4. 提交加锁与幂等：点击提交立即禁用按钮加 loading，请求带唯一幂等键，配合后端去重，双保险防连点。
5. 成功后清理敏感态：提交成功清空密码、验证码等敏感字段与倒计时状态，跳转结果页前不留可回退的中间态。

请求层的重试与幂等设计，见 小程序请求重试与幂等设计；表单里涉及手机号授权的场景，配合 小程序授权设置引导 处理弹窗时机。

三、规则、提示与提交的验收口径

对照这张表逐项过：

四、动态表单、富文本与上传的特殊处理

三类特殊字段各有专项纪律：

• 动态表单：字段随配置生成时，校验规则也跟着配置走——规则可配、随字段下发，别把校验硬编码在页面里。
• 富文本内容：富文本不走常规表单校验链路，长度、图片数量在组件层单独约束，提交前做一次结构校验。
• 上传字段：文件类字段校验「是否传完、格式、大小」，上传中显示进度，失败可单文件重传，别让用户整个表单重来。

验证码与密码类字段的清空时机容易被忽略：提交成功后的清理动作要覆盖倒计时、输入框值与错误态三处，避免返回上页时残留。

报名表单若关联线下门店核销，门店坐标与类目信息要核对后台的 GEO 地理位置配置，与表单校验是两条独立线。

五、上线前表单自检清单

发版前五分钟过一遍，重点测「不正常的人」：

六、避坑清单

四条都关于「把规则当系统工程」：

• 别只用 alert 报错：全局弹窗等于让用户做定位题，内联提示加聚焦是最低成本的改法。
• 别只靠前端禁用防重：弱网与工具环境都能绕过前端锁，幂等键加后端去重才是闭环。
• 别让前后端各养一套规则：规则表改版要两边同步，测试用例也从同一张表生成。
• 别忽略提交中的状态反馈：loading 文案写清楚「提交中，请稍候」，比转圈无说明减少一半重复点击。

七、常见问题 FAQ