Axure:获取、校验验证码的原型实现方法

21天Excel零基础速成训练营,导师带学+答疑辅导+实战作业,让你真正掌握Excel技能,了解一下>>

本文分享了获取、校验验证码的原型设计方法,希望对想学习Axure的伙伴们有帮助。

一、获取验证码

获取验证码操作,如下:

分析:

  • 左图为矩形,主要展示验证码(本例设置4位验证码),其中验证码为字母和数字组合;
  • 右图为文本输入框,主要设置点击事件,即点击文本文字,矩形框中的验证码随机出现四位值。

实现:

1.准备相关部件:矩形1,命名为“验证码”,随意输入四个值,中间用空格隔开;文本标签,命名为“换一张”,字体随意设置,如下:

2.选择文本标签,设置鼠标点击事件。

第一步:新增全局变量。

第二步,设置全局变量值ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789。

第三步,设置验证码元件文本值,点击FX,插入字符串函数[[全局变量.substr(全局变量.length*Math.random(),1)]],输入四次,中间用空格隔开。

完成,点击“确定”。

F5预览:

原形连接,欢迎下载。

链接: https://pan.baidu.com/s/119S-ERhKMbetLrjCH7pSUg 密码: t5cw

二、校验验证码

输入验证码,并校验验证码是否正确。

实现:

1.在获取验证码的基础上,增加新的元件:

  • 文本框,命名:输入验证码;
  • 增加热区,命名为:具体提示信息,设置值为:正确,错误;

热区样式,初始化为隐藏。

元件设置完成,如下:

设置输入框用例:主要的作用就是为了检查每次输入完成之后,验证码是否正确,如果正确,则提示信息,显示为“√”,如果错误,则提示信息显示为“×”,添加“按键松开时”用例,即,每次输入完成,松开按键时完成用例。

验证信息为:

  • 文字长度:if等于4,则正确,否则错误
  • 文字内容:if 等于验证码内容则正确,否则错误

错误设置,如上。

最后,隐藏提示信息,略。

设置完的用例信息如下:

F5预览:

原形见连接,欢迎下载:

链接: https://pan.baidu.com/s/1XOSLO2lBpDocDaoeaiRlzQ 密码: 6a8c

 

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

题图来自 Pexels ,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
6人打赏
评论
欢迎留言讨论~!
  1. 你好 按照你的方法做 为什么我验证码正确的时候 还是显示错号…

    回复
  2. 哎,原型误区

    回复
  3. 您好,您做得原型很棒,我有几个粗浅的小建议:第二个原型应该是动态面板,不是热区;第二个原型能够多加上两个条件就更完美了:首先,当元件文件长度为4,元件文字不等于验证码的时候,显示错误,而不是隐藏面板;其次,当元件文字长度为0的时候,隐藏面板,而不是显示错误

    回复
    1. 你好,是动态面板,表述错误;第二个问题,我的原形里好像是显示错误哦,不是隐藏模板,隐藏面板是在刚开始未输入任何信息时使用的哦

      回复
  4. 您好 第二个原型 应该不是热区 应该是动态面板吧

    回复
    1. 不好意思,表述错误,造成误解了,是动态面板

      回复
  5. 如果我想一开始就是随机产生该怎么办呢?

    回复
    1. 点击“验证码”元件,右击设置“载入时”用例,用例和文章一样,设置变量值Verification_code=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789;文字验证码函数为“[[Verification_code.substr(Verification_code.length*Math.random(),1)]][[Verification_code.substr(Verification_code.length*Math.random(),1)]][[Verification_code.substr(Verification_code.length*Math.random(),1)]][[Verification_code.substr(Verification_code.length*Math.random(),1)]]”

      回复
    2. 点击“验证码”元件,不是右击设置,是点击设置“载入时”用例 :grin:

      回复
    3. 得同时设置“验证码”元件“载入时”用例和“换一张”原件的“鼠标单机时”用例方可。

      回复
  6. 写的很棒学习了,另外有个小问题,校验验证码为错误的条件应该是or而不是and

    回复
    1. 蟹蟹 ;-)

      回复
  7. 你好,请问还有Axsure的安装包吗?我的邮箱17621600734@163.com ,谢谢小甜甜~~~

    回复
    1. 下载链接:https://pan.baidu.com/s/1sW5qU1mLiat4EHbCzXk67g 密码:2vaf

      回复
    2. 好的,谢谢

      回复
  8. 当我已经验证过一次后第二次换验证码重试,光标回到前面的文本框内,为什么没有显示错误的符号?

    回复
    1. 检查变量值设置。[[全局变量.substr(全局变量.length*Math.random(),1)]]是否有误。希望对你有帮助。

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