Axure教程:验证码原型建筑实例|7788pan


摘要: 作者重要针对若何操作Axure建筑验证码原型遏制了一些分享,盼望对大家有所启发。 账户的登录注册为了体系的安全,幸免恶意的攻击,一样普通都必要添加验证码,当然有成熟的框架应用,但是在原型的时候怎么显得很酷炫呢,那末接下来的就用得着了。必要下面几个程序准…

作者重要针对若何操作Axure建筑验证码原型遏制了一些分享,盼望对大家有所启发。

Axure教程:验证码原型建筑实例

账户的登录注册为了体系的安全,幸免恶意的攻击,一样普通都必要添加验证码,当然有成熟的框架应用,但是在原型的时候怎么显得很酷炫呢,那末接下来的就用得着了。必要下面几个程序筹备。

1、筹备

首先,必要四个元件:

1、输入框:用来输入验证码,命名:输入框

Axure教程:验证码原型建筑实例

2、矩形框:用来表现体系的二维码,命名:验证码

Axure教程:验证码原型建筑实例

3、按钮:表现按钮换一张,命名:换一张

Axure教程:验证码原型建筑实例

4、动态面板:用来表现提示信息,命名:提示信息,两个状态一个:切确;一个:错误。

Axure教程:验证码原型建筑实例

这四个元件,也能够也许用其他的代替,只需能完成假想就可以也许。

然后,设置全局变量。

OnLoadVariable默认值为:

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

yzm默认值为空;

全局变量的名字可以也许自己取,OnLoadVariable的默认值就是验证码随机取的值,可以也许自己随便设定。

Axure教程:验证码原型建筑实例

二、设置

1、当前页面

不选择任何元件,点击当前的页面,在【检视】-【属性】添加交互变乱,选择【页面载入时】变乱(因为在页面打开时是默认有一个验证码的),本例默认验证码为4位。

Axure教程:验证码原型建筑实例

含义:

验证码默认环境下笔墨是空,所以条件是假如验证码笔墨的长度小于4,那末就为验证码设置一个值,并且在页面载入时就表现出来。

程序:

双击【页面载入】变乱设置,在弹框最上方用例名称后边点击【添加条件】。

设置条件为:

Axure教程:验证码原型建筑实例

条件为验证码的长度小于4就实行下面的变乱,直到验证码笔墨的长度=4完毕。

Axure教程:验证码原型建筑实例

Axure教程:验证码原型建筑实例

ymz的值:[[yzm]][[OnLoadV(M(M()*62),1)]]

含义:

ymz的值来自OnLoadVariable变量,substr完成;

M*62,是数学的随机函数,随机位0~1之间的数,*62后就会随机0~62之间的数;

M,是数学向上取整函数

所以团体的意思就是,取OnLoadVariable随机一名数给ymz。

2、输入框

Axure教程:验证码原型建筑实例

含义:

假如输入框位笔墨长度是4同时笔墨等于验证码的笔墨,那末表现动态面板-提示信息的值是切确的;其他的环境不表现或提示错误。

程序:

case1:其他的也是云云

Axure教程:验证码原型建筑实例

Axure教程:验证码原型建筑实例

3、按钮换一张

Axure教程:验证码原型建筑实例

含义:

清空验证码、输入框、隐藏提示信息,同时从头触发页面载入时的时候。

程序:

Axure教程:验证码原型建筑实例

清空就是将文本的值设为空即可。

3、预览

完毕,可以也许预览了,看看甚么结果。注重,原型没有那末智能,大小写是要区分的哦~

结果预览:

小火伴们自己尝尝吧,就不放原型了。

团体的过程设置还是比较复杂的,但是用应用的时候长了以后还是可以也许敏锐应用的。

本文由 @dantina 原创宣告于大家都是产物经理。未经答应,幸免转载。

上一篇 下一篇

评论



分享

最新加入

最新评论

隋中缘: @嘉嘉tiffany 性感乳神。 查看原文 06月13日 16:16