交互-手机号验证码输入验证

2016-09-11 本文已影响1338人刺猬她不优雅

手机号验证码作为身份验证的逻辑

对手机号

 是否为空
 手机号是否为正确手机号
 对手机号输入11位之后，还能再输入还是禁止输入

对验证码

  点击获取后是否收到验证码
  验证码是否输入正确
  超过验证时间后，需要再次获取验证码
  此时是否可以修改手机号

以上是对逻辑的粗略思考

反应到页面上

手机号和验证码是否分为2个弹窗验证
手机号是否支持344隔断？
手机号有输入后，是否能一键清除？
点击获取验证码按钮是放置于手机号那一行还是跟验证码一行？
出现错误提示是toast提示还是在当页提示？
在当页提示，错误提示放置在哪里？
手机号和验证码输入都调用数字键盘
整个手机号验证码作为弹窗出现，还要确保手机键盘调起后不能遮挡提交按钮

公司业务思考

手机号验证码的使用场景多为端外
用H5实现
多为分享出去的运营活动
有2种出现方式；
1，页面内容信息较少，直接出现手机号验证码输入框提交后到新页面；
2，有较多运营内容，放一个加入按钮，点击按钮后出现弹窗，弹窗上为手机号验证码的输入框。

经过以上的思考，做出了如下取舍

页面上出现弹窗，若弹窗上再出现toast，层次太多，体验也不好，所以考虑错误提示统一在当页出现，不用toast

考虑到较小屏手机用户，点击获取验证码按钮放置在验证码那一行。给位数更多的手机号留下充足的输入位置，同时使一键清除的x号和输入后的手机号拉开距离有足够留白。

最终出图如下

手机号验证.jpg

🔼因为跟页面上的输入框做统一，所以不做手机号验证和验证码验证分开为2个弹窗。
提交按钮不做置灰
未有输入行为时，点击提交，出现输入手机号的提示
手机号因为跟开发沟通要调用数字键盘，故不做344隔断处理
手机号只能输入11位数字，输满后点击键盘无效
输入数字是11位，但不是手机号，出输入正确手机号提示
错误提示统一在输入框下方出现，居中放置
点击获取按钮在手机号未通过验证时不可点