Axure8.0实例:简单实用的验证码

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

分享一个运用Axure8.0制作验证码的实例。

相信大家都遇到过,在登录某网站时,往往会要求输入一个验证码,验证码一般是4或5位的纯数字或数字字符结合体,这里就给大家介绍一下我做的一个验证码的小例子。

预览

验证码

一、元件准备

1、文本输入框一个。用于输入验证码的,起名为“输入框”;

2、矩形框一个。用于显示随机验证码,起名“验证码”;

3、文字标签一个。用于手动重置验证码,起名“换一张”;

4、动态面板一个。有两个状态,一个是输入的验证码正确,一个是错误,且默认隐藏,起名“提示信息”;

1

5、全局变量两个。OnLoadVariable默认值为:

0123456789abcdefghijklmnopqrstuvwxyz,yzm默认值为空;

2

二、添加用例

1、页面用例。在进入页面时,首先要有个验证码的,所以给页面添加“页面载入时”用例,目的是在进入页面时就能动态生成一个验证码(例子中的验证码为4位,各位看官可以自行设计);

3

①首先通过随机获取“OnLoadVariable”变量中的一位字符,然后将获取的字符赋值给“yzm”变量。获取“OnLoadVariable”变量的一位字符通过数学函数Math.random()和字符串函数substr()联合使用得到的。这里要注意一下,因为“OnLoadVariable”变量的初始值是“0~z”共36位,所以我们要截取“OnLoadVariable”的一位字符就必须是下标为“0~35”的整数,所以使用数学函数Math.floor()向下取整,这样刚刚好能取到“0~35”之间的所有整数。有一点需要注意的是:每一次赋值给“yzm”变量的时候,都是在原来的基础上增加了新截取的一位字符,所以需要把“yzm”原来的值加上新获取的字符一起赋给“yzm”。

4

②将“yzm”变量的值赋给“验证码”矩形框为文字内容。为了让验证码显示的逼真一些,这里把“验证码”矩形框的字体设置成个性一点的字体和颜色,所以我选择了富文本,其实在工具栏中设置也是一样的。

5

③添加一个触发事件到页面。Axure8.0中增加了触发事件的动作,个人觉得非常赞,放在这里使用,感觉有些像开发语言中的循环语句了。这里会通过这个触发事件再次执行页面的“页面载入时”,达到每次获取一个字符的效果。

6

2、输入框用例。用于判断输入验证码是否正确,添加“按键松开时”用例,通过“输入框”文字长度和文字内容是否等于“验证码”矩形框文字内容判定。

7

①如果“输入框”文字长度等于4且文字内容等于“验证码”矩形框的文字内容,那么久认为验证码输入的对的,我们就给出正确的提示,显示“提示信息”动态面板中“对”的状态。

②如果“输入框”文字长度等于4,但文字内容不等于“验证码”矩形框的文字内容,那么就给出错误的提示,显示“提示信息”动态面板中“错”的状态。

③其他情况就直接隐藏掉“提示信息”动态面板,并给出任何提示。

3、换一张用例。更换验证码的作用,实现起来相当的容易,首先把“验证码”、“输入框”和“yzm”的值都清空,并且隐藏掉“提示信息”动态面板,然后直接“触发事件”到页面的“页面载入时”即可,这样就直接执行页面的“页面载入时”用例,新的验证码就出现了;

三、预览

好了,开始按你的F5键吧!

 

本文由 @ 无泪 原创发布于人人都是产品经理。未经许可,禁止转载。

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 还有就是提示信息显示的事,我的怎么无论输入什么都没有反应

    回复
  2. 第三步的换一张怎么设置啊,看不懂,能否来个源文件或者是我加个群也行

    回复
    1. 加我公众号留言

      回复
  3. dalao好,我按照方法做的,但是预览的时候验证码就显示的是整串函数,也检查了很多次了,但是还是不知道问题在哪里,求解,顺便求一源文件867184808@qq.com,谢谢🙏

    回复
    1. 加我公众号留言

      回复
  4. 大神你还,在帖子里好多看不懂的,第一步里的第三小步添加fire事件怎么添加,找不到相关按钮,还要第二步里的设置提醒信息怎么设置,在用例编辑页面也找不到,最后求发案例,1013616341@qq.com

    回复
    1. 如果是用RP8的话,在用例编辑左侧框最下方“其他”中,点击“触发事件”就可以了。

      回复
    2. 加我公众号留言

      回复
  5. 大神,能给我发下原型文件吗?邮箱:863751377@qq.com 非常感谢

    回复
    1. 加我公众号留言

      回复
  6. 一步一步做下来,实现了,感谢!

    回复
    1. :cool:

      回复
  7. 大神,请原型原件,我的邮箱:1013253091@qq.com :smile:

    回复
    1. 加我公众号留言

      回复
  8. 大牛,我这边按照你的来做,验证码始终只显示一位,不知道啥原因,能发个 源文件给我吗

    回复
    1. 加我公众号留言

      回复
  9. 1916910632@qq.com我的邮箱,麻烦发一份,谢谢大神 :oops:

    回复
    1. 加我公众号留言

      回复
  10. 大神,所有效果加完之后,预览的时候一直出现的是提示信息里的错误,啥情况尼 :cry:

    回复
    1. 加我公众号留言

      回复
  11. 同样来晚了,没有看到QQ群的群号。只好麻烦也发一份到邮箱438290331@qq.com,谢谢!

    回复
    1. 加我公众号留言

      回复
  12. 哈哈,来晚了,如果有朋友看到小弟的留言,麻烦也发一份给我,谢谢。1205988419@qq.com

    回复
    1. 加我公众号留言

      回复
  13. 点击验证码更改不起作用,可以发一下源文件么?谢谢 644853024@qq.com

    回复
    1. 请加群自行下载,谢谢。

      回复
  14. 点击验证码不起作用,输入校验码输入是对的也显示错误图片,能发一下源文件,学习一下吗?我的邮箱:fangjiang@yundasys.com

    回复
    1. 请加群自行下载,谢谢。

      回复
  15. 亲,有源文件吗?今早按照您的步骤做了,但是验证码那边有问题,我的是全部验证码都出现了,一屏幕都是验证码。我先看看您的源文件,一起探讨学习。
    我的邮箱:taro_luo@163.com
    麻烦亲了。

    回复
    1. 请加群自行下载,谢谢。

      回复
  16. 能把文件发给我吗?我总是出现错误
    809559418@qq.com

    回复
    1. 请加群自行下载,谢谢。

      回复
  17. 把文件发给我可以么 我验证码可以刷新,但是不出现提示信息,524718386@qq.com 谢谢

    回复
    1. 请加群自行下载,谢谢。

      回复
  18. 能把文件发给我吗?我总是出现错误
    610454627@qq.com

    回复
    1. 请加群自行下载,谢谢。

      回复
  19. 忍不住自己试试,先去查查函数怎么用的233333

    回复
    1. :mrgreen:

      回复
  20. 简单实用,哈哈。

    回复
    1. :cool:

      回复
  21. 数字里面应该是有0的吧,还有应该取得数值是1到36位的吧。

    回复
    1. 字符串的下标是0开始的

      回复
  22. 有下载文件吗

    回复
    1. 留个邮箱,我发你吧 ;-)

      回复
    2. 按照你的方法做了 但是有很多问题。381807480@qq.com

      回复
    3. 已发~如果有什么疑问,可以给我留言,一起探讨

      回复
    4. 嗯,谢谢啦

      回复
圈子
关注微信公众号
大家都在问