手机号验证码

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

对手机号是否为空 手机号是否为正确手机号 对手机号输入11位之后，还能再输入还是禁止输入对验证码点击获取后是否收到验证码 验证码是否输入正确 超过验证时间后，需要再次获取验证码 此时是否可以修改手机号

以上是对逻辑的粗略思考

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

手机号验证码的使用场景多为端外 用H5实现 多为分享出去的运营活动 有2种出现方式：

1.页面内容信息较少，直接出现手机号验证码输入框提交后到新页面；

2.有较多运营内容，放一个加入按钮，点击按钮后出现弹窗，弹窗上为手机号验证码的输入框。

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

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

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

最终出图如下

手机号验证.jpg

��因为跟页面上的输入框做统一，所以不做手机号验证和验证码验证分开为2个弹窗。

提交按钮不做置灰

未有输入行为时，点击提交，出现输入手机号的提示

手机号因为跟开发沟通要调用数字键盘，故不做344隔断处理

手机号只能输入11位数字，输满后点击键盘无效

输入数字是11位，但不是手机号，出输入正确手机号提示

错误提示统一在输入框下方出现，居中放置

点击获取按钮在手机号未通过验证时不可点

手机号验证通过.jpg

��手机号验证成功，点击获取按钮可以点

验证码验证.jpg

��对验证码进行验证

倒计时时不能点击获取验证码

倒计时结束.jpg

��超过倒计时时间后，可以再次点击获取验证码

手机号验证码验证无误后，提交到达新页面

关于，为什么错误提示不在相应输入框下出现的原因

验证.jpg

手机号验证码的错误提示不会同时出现，每次只出现一条。分开提示，则要保留2处显示错误提示的区域，不如统一跟输入框拉开一定距离做一个错误提示区域。

互 联 网 用 户 体 验 专 家

adinnet_design

长按二维码关注

回复关键词查阅更多：

用户体验 UE UX UI 设计 视觉 配色 排版

移动端 web app 响应式 交互 动效 GIF

创意 网页 产品 H5 艾艺 原创