流程图来源
https://zhuanlan.zhihu.com/p/26065888
以下是我自己总结的登录注意事项
一、页面字段
~手机号，输入框；
~图形验证码，输入框+验证码图片
~短信验证码，输入框+获取验证码按钮/倒计时文案
二、默认状态
默认【获取验证码】按钮可点，【登录】按钮不可点
三、未输入状态
1.首先从手机号开始判断，当手机号/图形验证码未输入时，点击【获取验证码】按钮，输入框边框飘红，toast提示：请输入手机号/请输入图形验证码
四、验证输入内容
~若手机号/图形验证码已输入时，点击【获取验证码】按钮，需要验证输入手机号的格式和输入图形验证码是否正确
1.首先从手机号开始验证，若手机号未通过验证，清空手机号（不清空图形验证码），弹出toast提示：请重新输入手机号。同时手机号输入框再次获得焦点；
2.若只有图形验证码未通过验证，清空图形验证码（不清空手机号），弹出toast提示：请重新输入图形验证码。同时图形验证码输入框再次获得焦点；
3.若手机号 and 图形验证码都通过验证，弹出toast提示：短信发送成功，【获取验证码】按钮内容变更为60s倒计时，60s后切换为可点击状态的“获取验证码”
~若短信验证码输入内容时，【登录】按钮切换为可点击状态，点击【登录】按钮，显示加载样式（登录中...），
1.需要验证短信验证码是否正确。若验证成功，隐藏加载样式，弹出toast提示：登录成功，跳转至上级页面。若验证失败，清空短信验证码（不清空手机号 and 图形验证码）弹出toast提示：请重新输入短信验证码。同时短信验证码输入框再次获得焦点；
2.需要验证图形验证码是否过期。若验证已过期，清空图形 and 短信验证码，隐藏加载样式，弹出toast提示：图形验证码已过期。同时图形验证码输入框再次获得焦点；
五、关于【清空】icon
“手机号”字段不为空时，输入框靠右侧需要显示清空icon ，点击后清空输入内容。若输入框失去焦点，隐藏该icon；
“图形验证码” and “短信验证码”字段，我个人意见是要加该icon，且淘宝 or 天猫 or 京东的移动端登录页面都是这样处理的。
六、关于键盘
1.“手机号”输入框，调用数字键盘；
2.“图形验证码”输入框，因验证码后期可能会新增新类型——英文字母，故不调用数字键盘，调用英文键盘；
3.“短信验证码”输入框，调用数字键盘；
七、关于字段长度控制
手机号和短信验证码当前是固定长度，不确定对输入内容进行长度控制是否正确，待讨论
淘宝/天猫登录网页，均没有对输入长度进行限制；京东登录网页，限制了短信验证码输入长度，超长不允许输入，没有提示反馈；
八、网络问题
若网络异常，toast提示：网络异常
