Axure教程：验证码原型制作实例.doc

《Axure教程：验证码原型制作实例.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Axure教程：验证码原型制作实例　　作者主要针对如何利用Axure制作验证码原型进行了一些分享，希望对大家有所启发。　　　　账户的登录注册为了系统的安全，避免恶意的攻击，一般都需要添加验证码，当然有成熟的框架使用，但是在原型的时候怎么显得很酷炫呢，那么接下来的就用得着了。需要下面几个步骤准备。　　一、准备　　首先，需要四个元件：　　1、输入框：用来输入验证码，命名：输入框　　2、矩形框：用来显示系统的二维码，命名：验证码　　3、按钮：显示按钮换一张，命名：换一张　　4、动态面板：用来显示提示信息，命名：提示信息，两个状态一个：正确；一个：错误。　　　　这四个元件，也可以用其他的代替，只要能完

2、成设计就可以。　　然后，设置全局变量。　　OnLoadVariable默认值为：　　0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ　　yzm默认值为空；　　全局变量的名字可以自己取，OnLoadVariable的默认值就是验证码随机取的值，可以自己随便设定。　　　　二、设置　　1、当前页面　　不选择任何元件，点击当前的页面，在【检视】-【属性】添加交互事件，选择【页面载入时】事件（因为在页面打开时是默认有一个验证码的），本例默认验证码为4位。　　　　含义：　　验证码默认情况下文字是空，所以条件是如果验证码文字的长度小

3、于4，那么就为验证码设置一个值，并且在页面载入时就显示出来。　　步骤：　　双击【页面载入】事件设置，在弹框最上方用例名称后边点击【添加条件】。　　　　设置条件为：　　　　条件为验证码的长度小于4就执行下面的事件，直到验证码文字的长度=4结束。　　　　　　ymz的值：[[yzm]][[OnLoadVariable.substr(Math.floor(Math.random()*62),1)]]　　含义：　　ymz的值来自OnLoadVariable变量，substr（）实现；　　Math.random（）*62，是数学的随机函数，随机位0~1之间的数，*62后就会随机0~62之间的数；　　Mat

4、h.floor（），是数学向上取整函数　　所以整体的意思就是，取OnLoadVariable随机一位数给ymz。　　2、输入框　　　　含义：　　如果输入框位文字长度是4同时文字等于验证码的文字，那么显示动态面板-提示信息的值是正确的；其他的情况不显示或者提示错误。　　步骤：　　case1：其他的也是如此　　　　3、按钮换一张　　　　含义：　　清空验证码、输入框、隐藏提示信息，同时重新触发页面载入时的时间。　　步骤：　　　　清空就是将文本的值设为空即可。　　三、预览　　结束，可以预览了，看看什么效果。注意，原型没有那么智能，大小写是要区分的哦~　　效果预览：http://71wgw6.axsha

5、re.com　　小伙伴们自己试试吧，就不放原型了。　　整体的过程设置还是比较复杂的，但是用使用的时间长了之后还是可以灵活运用的。