Skip to main content

短信验证码

用于验证真实性、防止恶意注册、保护账户安全等作用。

常用场景：需要输入验证码的情况，如：忘记密码、账号认证。

页面验证​

何时使用

输入验证码为独立步骤时使用，如：忘记密码。

交互规则

  • 点击验证码，调起数字键盘，当用户输入完成后，键盘自动收起。
  • 输入验证码后，下一步按钮才显示高亮状态。
  • 点击重发可重新获取验证码。

表单验证​

何时使用

页面填写信息较多时使用，如：账号注册。

交互规则

  • 输入手机号后，获取验证码才显示高亮状态。
  • 点击输入框，键盘显示；点击页面其他位置，键盘收起。
  • 点击获取验证码，切换到60s倒计时。当前状态不可点击，60s 后恢复到获取验证码按钮，则可重新发送短信验证码。
  • 当前页面按钮默认为不可点状态，输入验证码后按钮切换成高亮状态。

弹窗验证​

何时使用

  • 验证当前页面操作时使用，如：绑定手机号。
  • 不打扰用户操作，能快速完成任务，如：绑定手机号。

交互规则

  • 点击获取验证码，出现输入验证码弹窗，显示数字键盘；当用户输入完成后，键盘自动收起，并完成校验。
  • 60s 倒计时结束后，可再次获取验证码。

设计指南​

  • 数字框的数量根据需求设定，一般为 4 位或 6 位。
  • 注意输入框以及页面按钮的交互状态。
  • 可将手机键盘字段记录短信验证码，点击键盘自动填充验证码，做到用户能够更便捷快速的完成操作。
  • 验证码最好做到统一类型，便于用户识别，如：全部数字、全部字母(输入时不区分大小写)。