以下是我自己总结的O2O平台移动端，登录注意事项

一、页面字段

~手机号，输入框；

~图形验证码，输入框+验证码图片

~短信验证码，输入框+获取验证码按钮/倒计时文案

二、默认状态

默认【获取验证码】按钮可点，【登录】按钮不可点

三、未输入状态

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提示：网络异常