验证码输入怎么设计？粘贴、重发与过期的完整流程

用户收到验证码031728，把它粘贴进六格输入框，却只留下第一位；重新发送按钮刚能点击，旧验证码又提示失效。验证码页面看起来只有一个输入框和一个按钮，实际连接着号码、发送请求、当前验证码与验证结果四件不同的事。

以活动报名中的手机号验证为例，用户的目标是证明自己能接收该号码的信息，然后回到报名流程。界面应该帮助他完成输入和恢复，而不是让他反复猜测短信有没有发出、倒计时代表什么、重新发送后该用哪条消息。

评审这类流程时，可以把发送中、输入错误、过期和验证成功分别画出来，借助交互原型与评审逐条检查页面跳转与恢复入口；真实短信发送和校验结果仍需在开发环境中验证。

先告诉用户正在验证哪个号码

报名者输入手机号后，下一屏标题写“验证手机号”，说明短信发送到哪里，并提供“修改号码”。号码展示应结合场景处理：首次填写时让用户有机会核对完整输入；进入验证屏后，可按产品的隐私规则显示脱敏号码，并让修改入口能返回原字段。

已经绑定账号的二次验证则是另一种任务。此时“修改号码”可能涉及账号安全，不能把首次报名时的自由修改原样照搬过去。设计稿先注明这是首次验证用户刚输入的号码，还是验证已有账号的绑定号码，错误恢复才不会走错路径。

用户修改号码后，界面需要开始新的验证流程。原号码的发送中状态、错误信息和已输入验证码都不应继续挂在新号码下。返回号码页时可以保留其他报名信息，让用户只修改有问题的字段，不必重新填写整张报名表。

发送请求尚未确认时，写“正在发送验证码”；服务端接收请求后，可以提示已发送，但不要把它描述成短信已到达用户手机。发送失败与没有收到是两个问题，前者应给出重新尝试的入口，后者则需要等待、核对号码或其他已支持的接收路径。

六格视觉，不等于必须填写六次

验证码可以在视觉上分成六格，但输入体验应当允许一次粘贴完整字符串。将031728粘贴进去后，六位需要完整保留，开头的0不能丢失；用户也应能修改其中一位、选中重填或清空，而不是被自动跳焦点困住。

web.dev 的短信验证码表单建议使用文本输入承载验证码，并通过输入模式提示数字键盘，配合一次性验证码自动填充标记。验证码是字符序列，不是用于计算的数值，因此不宜因为内容全是数字，就按普通数字数量处理。

对设计师来说，交付重点不是指定某个前端组件库，而是写清四个行为：完整粘贴不截断；首位0保留；自动填充后所有位可检查；手动输入始终可用。系统未出现自动填充建议时，页面仍应是一张可以正常填写和提交的表单。

如果采用六个独立输入控件，要额外考虑整串粘贴、退格、重新选择和读屏名称。用户按退格时究竟删除当前位还是跳回上一格，需要保持可预测。没有成熟实现条件时，一个清楚标注的单输入框通常更容易把这些行为做完整，视觉分格不是必须追求的目标。

W3C 可访问认证说明明确讨论了验证码的复制粘贴与自动填充。阻止粘贴、迫使用户逐位抄写，会增加不必要的认知负担。不要以“更安全”为由在设计稿中要求禁止粘贴，却没有相应依据和替代路径。

重发等待和验证码有效期，不要共用一个倒计时

“稍后可以重新发送”控制的是发送频率；“验证码已经过期”说明当前代码不再能完成验证。两者不是同一个时钟。假设某项目允许等待一段时间后重发，旧验证码此时是否仍可用，取决于该项目的验证服务规则，不能仅凭按钮变亮就判定它已失效。

因此，重发按钮附近可以写“稍后可重新发送”，需要倒计时时明确表示重发等待。验证码字段则只在收到相应结果或依据明确的有效期规则后，提示过期。不要把按钮旁的“30秒”同时解释成短信到达时间、重发时间和验证码剩余寿命。

Twilio 的重试设计建议强调在发送之间设置等待，以减少重复请求及无效发送。它提供的是特定服务下的实践参考，不是所有产品通用的固定秒数。实际等待时长、频次限制与验证码有效期应由项目的验证策略确定，再由界面准确呈现。

切换到短信应用再回来时，重发等待不应无缘无故重新从头计算；刷新页面也不应成为绕过限制的办法。前端倒计时负责解释等待，真实限制需要由服务端执行。设计稿可以说明恢复后的显示规则，而不是仅交付一个从60递减到0的动画。

重新发送之后，告诉用户下一步该用哪条验证码

点击重新发送时，先显示发送过程，避免连续点击触发多次请求。得到结果后，再明确下一步。有些系统在有效期内重发相同代码，有些会生成新代码并让旧代码失效；不能在没核对实现前统一写“请使用最新验证码”。

如果本项目约定新代码替换旧代码，界面就要同步清理不再有效的输入，并提示“已重新发送，请输入新验证码”。若重发失败，而旧代码仍有效，就不应直接清空用户已经输入的内容。错误恢复要依据真实规则，不要为了画面整齐把所有状态都重置为初始页。

用户连续收到两条短信时，可能先打开旧消息。如果服务端能明确识别旧验证码，可以提示已失效并引导使用当前代码；如果只能返回验证不通过，就使用与该结果相符的文案，不要猜测为“短信延迟”或“号码被占用”。

同时保留一条不依赖继续重发的路径，例如修改误填号码、返回报名页，或使用产品确实支持的其他验证方式。不要在设计稿里放一个“联系客服立即解锁”，而实际没有对应入口或处理能力。

错误提示应指向不同的恢复动作

“验证码错误，请重试”不适合覆盖所有失败。输入位数不足时，用户需要补齐；验证码不匹配时，用户需要核对；已经过期时，需要重新获取；尝试过于频繁时，需要等待；网络暂时无法确认时，则不能断言代码错误。

普通输入过程不必每敲一位就显示红色错误。错误出现后，文案应靠近验证码字段，主按钮也应恢复到当前可执行的状态。验证成功后只推进一次报名流程，避免自动提交与用户手动点击叠加产生重复页面跳转。更多输入反馈时机可参考表单异步校验设计。

自动提交需要谨慎选择。填写到规定位数就开始验证，可以减少一次点击，但也可能在用户准备改错时抢先提交。若采用自动提交，等待状态和失败后的修改入口必须清楚；保留“验证并继续”的显式按钮，则让用户更容易预期下一步。应根据具体流程选择，不把一种方式当成所有验证码页的标准答案。

用同一组输入，把整条报名路径画完整

在 Pixso 中画出报名验证的手机页面，使用同一个脱敏号码和验证码031728，分别整理输入、发送等待、验证中、已过期和成功返回报名的状态。将号码修改与验证码重发连回相应入口，而不是让所有错误都回到首页。

评审可以从几个具体动作开始：复制带首位0的完整代码、修改中间一位、切到短信应用后返回、重发失败后继续使用仍有效的代码。原型画板负责讨论状态与去向，实际粘贴、系统自动填充和辅助技术行为，需要在目标平台实现后核对。

这条流程的收尾也很重要：验证成功后应回到用户正在完成的报名任务，已填姓名与选项仍在，号码状态清楚可见。验证码不是独立的小测试，而是报名过程中的一道必要步骤；它的设计应让用户顺利通过，而不是在反复发送与重填之间迷路。