首页 >  图片

Axure9.0教程:轻松制作图片验证码

发布日期: 2019-12-30

今【天和大家聊聊如何利用Axur▕e实现图片验证码的随机切换,并且验证对错!

首先来分析下需要实现的效果:

图片中的验证码为数字和字母的随机组合; 点击更换验证码实现验证码的更换,验证码随机出现4位字母或数字; β验证码输入时,点击提Θ交按钮,若验证码错误进行错误提示。

1. 准备

文本框(◀用来输入验证码); 矩形框(用来显示生成的二维码); 动态面板(提示验←证码输入结果对错与空),设置三个动态面板提示状态,默认为隐藏; 提交按钮; 文♂本标*签(看〗不清?换一张!)。

以上元件自行命ⓥ名,在做交互效果时候方便自己操作即可,这里命名为。

随机验证码≤是显示在Ψ一个矩形框内,这里只需要从26个大写英文字母和10个数字中随机获取一位字符,四个字⿻符拼成一个随机验证码,且允许有重复字母出现。

2. 开始

①文本框ⓞ先输入四个字符,作为起始默认验证码!如┑下图所示!

②点击【换一张】→ 新建交互 ▍→ 单击时 → 设置变量值 → 全局变量

将变量值设置∑为abcdefghij…〾…xyz01234√56789(2Щ6个英文字ì母+10个数字),意思是验证码的值♀将会在以上字符中产生。

③继续上面的交互状态,单击时 → 设置文本 →@ 选择“验证∩码”Й◎,值为∑[[O┊┋nLoadVariable.substг╥r(OnLoadↃVari↘ableв.length*Math.random(),1)]],将以上代码连续输入四遍,中间′不Ф需要№加符号。

这一步的意思是点击【换一张】,随机选中四个字符设置为验证码的值显示在验证码框中。

④这一步我们开始进≈行验证码提交验证。

点击【提交】→ 新建交互 → 单击时

设置情形一:如果∣输入框文字 == 验证码文字

设置面板状态到提示正确面板状态,且设置面板┒状态〩为可见。

设置情形→二:如果输入框文字 != 验&证码文字

设置面板状态§到提示错误面板状态,且设置面板状态为⊥可见。☑

⑤点击预览,这样我▎▏们一个图形验证码就Ш做好啦~

 

本文由 @胡同学 原创发布于人人都ч是产品经理。未经许可,εїз禁止转载

题图来自Unsplash┎,基于CC0协议