猿型库：Axure小练习-注册验证

大家都知道，注册的时候有很多的验证，如何通过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资源；