大家都知道,注册的时候有很多的验证,如何通过Axure来制作这个验证那,今天小猿就给大家演示,通过这个练习,希望大家能够掌握逻辑条件和全局变量。
我们先看一下最终的效果:
效果查看:http://www.axurestudy.cn/pr/index.html
【需求分析】
账号 | 1、需要输入提示; 2、最大长度10位; 3、如果输入为空,提示“账号不能为空”; 4、如果输入不是字母和数字,提示“必须输入数字和字母”; 5、如果输入无误,提示ok |
密码 | 1、需要输入提示; 3、不能为空,否则给出“不能为空”提示; 3、必须是6位数字,否则给出对应的错误提示 4、如果输入无误,提示ok |
注册按钮 | 1、如果账号密码正确,点击之后提示“注册成功”; 2、否则,提示“注册失败”; |
【原型设计】
1、拖入账号输入框account,设置最大输入长度为10,设置输入提示“账号只能包含字母和数字”;
2、拖入图片account_img和文本account_msg,并且设置为隐藏;
3、拖入密码输入框pass,设置输入类型为密码,设置输入提示”密码为6位数字“;
4、拖入图片pass_img和文本pass_msg,并设置为隐藏;
5、拖入注册按钮;
6、拖入文本reg_result,并设置为隐藏;
7、设置全局变量reg_pass_correct和reg_account_correct;
【交互设计】
1、设置账号输入框account的”失去焦点事件“:
账号为空 | 1、提示账号不能为空; 2、显示错误图标; 3、设置全局变量reg_account_correct=0 |
账号不是数据和密码 | 1、提示账号必须是数字和字母; 2、显示错误图标 3、设置全局变量reg_account_correct=0 |
账号密码正确 | 1、显示ok; 2、显示对号图标; 3、设置全局变量reg_account_correct=1 |
2、设置密码输入框pass的”失去焦点事件“:
密码为空 | 1、提示密码不能为空; 2、显示错误图标; 3、设置全局变量reg_pass_correct=0 |
密码不是6位 | 1、提示密码必须是6位; 2、显示错误图标; 3、设置全局变量reg_pass_correct=0 |
密码不是数字 | 1、提示密码只能是数字; 2、显示错误图标; 3、设置全局变量reg_pass_correct=0 |
密码正确 | 1、显示ok; 2、显示对号图标; 3、设置全局变量reg_pass_correct=1 |
3、设置登录按钮的点击事件“:
账号密码正确 | 提示”注册成功“ |
账号密码错误 | 提示”注册失败“ |
到了这步,注册的功能就算做好了,同学们赶紧去试试吧。
回复【入门】 ,获取零基础Axure快速入门视频教程;
回复【安装】 ,获取安装程序;
回复【练习】 ,获取练习案例;
回复【高保真】,获取高保真原型;
关注微信公众号【猿型库】,获取更多优质Axure资源;