携程网页版注册页面模型链接:https://b3xcbk.axshare.com
参考网页为:携程旅行网-会员注册
该模型共有三个页面——注册页面、设置密码页面和注册成功页面,实现了网页的注册和表单的交互。模型采用了向导性表单,明确地告诉用户只需验证手机和设置密码即可完成注册,同时用户也可以看到现在处于注册的哪个步骤。
在注册页面,我们实现了对表单的校验,将输入框转换动态面板,当校验发生问题的时候改变输入框动态面板改变状态,并且实现了隐藏动态面板的显示与拉动。例如,当我们没有输入手机号或者手机号不是11位的时候点击发送验证码,手机号矩形会转换为黄底红框,并且会出现下拉矩形,显示“请输入正确的手机号”。除此之外,实现了发送验证码之后开始计时,计时结束又可以重新发送验证码的交互,再次点击发送验证码重新开始计时。在验证完手机号格式与短信验证码格式后,点击“下一步”进入设置密码页面。
在设置密码页面,同样可以对密码和确认密码进行校验,同时可以在输入的同时判断密码强度,点击“完成”进入注册成功页面。
收获
- 熟悉了交互用例的基本使用,熟悉条件的用法
- 熟悉了动态面板的基本使用
- 学会了使用全局变量
存在的问题
- 注册页面的按钮转换为动态面板后添加超链接无法正常链接,但是注册成功页面的按钮转换为动态面板后可以,所以在注册页面就没有实现移入的交互效果。
- 滑块验证码不是本次练习的重点,有空再填坑。