手机号验证码作为身份验证的逻辑
对手机号
是否为空
手机号是否为正确手机号
对手机号输入11位之后，还能再输入还是禁止输入
对验证码
点击获取后是否收到验证码
验证码是否输入正确
超过验证时间后，需要再次获取验证码
此时是否可以修改手机号
以上是对逻辑的粗略思考
反应到页面上
手机号和验证码是否分为2个弹窗验证
手机号是否支持344隔断？
手机号有输入后，是否能一键清除？
点击获取验证码按钮是放置于手机号那一行还是跟验证码一行？
出现错误提示是toast提示还是在当页提示？
在当页提示，错误提示放置在哪里？
手机号和验证码输入都调用数字键盘
整个手机号验证码作为弹窗出现，还要确保手机键盘调起后不能遮挡提交按钮
公司业务思考
手机号验证码的使用场景多为端外
用H5实现
多为分享出去的运营活动
有2种出现方式；
1，页面内容信息较少，直接出现手机号验证码输入框提交后到新页面；
2，有较多运营内容，放一个加入按钮，点击按钮后出现弹窗，弹窗上为手机号验证码的输入框。
经过以上的思考，做出了如下取舍
页面上出现弹窗，若弹窗上再出现toast，层次太多，体验也不好，所以考虑错误提示统一在当页出现，不用toast
考虑到较小屏手机用户，点击获取验证码按钮放置在验证码那一行。给位数更多的手机号留下充足的输入位置，同时使一键清除的x号和输入后的手机号拉开距离有足够留白。
最终出图如下
手机号验证.jpg
🔼因为跟页面上的输入框做统一，所以不做手机号验证和验证码验证分开为2个弹窗。
提交按钮不做置灰
未有输入行为时，点击提交，出现输入手机号的提示
手机号因为跟开发沟通要调用数字键盘，故不做344隔断处理
手机号只能输入11位数字，输满后点击键盘无效
输入数字是11位，但不是手机号，出输入正确手机号提示
错误提示统一在输入框下方出现，居中放置
点击获取按钮在手机号未通过验证时不可点
手机号验证通过.jpg
🔼手机号验证成功，点击获取按钮可以点
验证码验证.jpg
🔼对验证码进行验证
倒计时时不能点击获取验证码
倒计时结束.jpg
🔼超过倒计时时间后，可以再次点击获取验证码
手机号验证码验证无误后，提交到达新页面
关于，为什么错误提示不在相应输入框下出现的原因
验证.jpg
手机号验证码的错误提示不会同时出现，每次只出现一条。分开提示，则要保留2处显示错误提示的区域，不如统一跟输入框拉开一定距离做一个错误提示区域。
此外文案应根据业务进行适当精简，减少字数。分享到端外，比如微信，在默认字号下显示正常，当字号被用户个性化设置变大后，可能出现按钮内的文案换行错乱。
网友评论