登录页算是交互较多的页面之一，仅仅是拿现在的近期做过的登录页出来分享一下我们需要的步骤，理清登录的交互逻辑我们就清晰的知道怎么下手了
先看清我们需要理清的情况：
1. 只需账号和密码作为登录，这类较为简单
这类型的登录页只是作为一个验证，然后验证通过之后就转到指定的页面就可以了。
step1. 我们要拿到input里面的数据
例如vue里面就有一个v-model可以直接拿到input里面的数据
分两种情况来触发验证:
- input // 输入的过程中遇到非法字符及时进行提醒
- blur // 失去焦点的时候进行验证提醒输入的是否包含非法字符
step2. 在拿到账号和密码之后我们需要做的就是提交这两个input的数据给后台进行判断
如果返回的数据显示已经有该用户的信息就跳转到指定的页面进行显示
如果没有就停留在当前的页面不做其他事情
2. 注册页，这类比上面的增加一点难度
这样的页面一般注册是需要用手机号来注册，或者是邮箱
（手机和邮箱的验证是相似的，都是通过一定的方式进行验证存在性）
用户填写的手机号或者邮箱需要进行简单的验证再启动短信或者邮箱验证的链接
step1. 绑定账号的input
通过点击聚焦事件进行验证是否有内容和内容是否满足进行下一步的“状态”
在这一步，状态的标记特别重要，所有的下一步都是通过状态来判断
输入账号的时候要开始三个事件，focus blur input
判断状态，分别判断
如果手机号为空的情况
如果手机号不存在的情况
用input检测输入的手机号状态
将手机号输入完成的状态设为false，反之设为true进行下一步
step2. 点击获取验证码
获取验证码之后需要把点击获取验证码的按钮进行disable处理，倒计时60秒
如果用户返回去修改手机，那也不要做处理，最后注册的时候需要提交账号，验证码一起的，一一对应的关系，所以更改了手机号也是不会通过验证的。
step3. 输入验证码，然后跟账号一样的处理，获得聚焦，失去焦点，输入事件
使用标记状态的办法进行同步验证是否达到可以提交的状态
step4. 进行验证账号和验证码是否为空，是否状态都为true，否则return
记得每一个focus，blur, input都进行验证是否可以注册的状态
网友评论