Axure8.0-制作图片验证码

比眉伴天荒 2021-09-23 11:02 469阅读 0赞

## 需求分析 ##

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

## 元件准备 ##

*  文本框（输入验证码）；
 *  矩形框（显示生成的验证码）；
 *  动态面板（提示验证码输入结果对错），并且设置三个动态面板提示状态，默认为隐藏；
 *  提交按钮；
 *  文本标签（文本提示“看不清？换一张！”）

## 开始制作 ##

文本框输入四个字符，作为默认验证码，如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70]

给文本标签添加交互，如下步骤：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 1]  
将变量值设置为abcdefghijklmnopqrstuvwxyz0123456789（26个英文字母+10个数字），验证码的值将会在这36个字符中产生。

设置好之后，不要关闭面板，继续在case1里面添加，选择设置文本，选中矩形元件，将值设为\[\[OnLoadVariable.substr(OnLoadVariable.length\*Math.random(),1)\]\]，并连续输入4遍，中间不需要符号，完成后点确定，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 2]

接下来给按钮添加交互，先添加条件，在设置状态。设置情形一：如果输入框文字 == 验证码文字，设置面板状态为提示正确状态，且设置面板状态为可见。具体步骤如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 4]  
同理，设置情形二：如果输入框文字 ！= 验证码文字，设置面板状态为提示错误状态，且设置面板状态为可见。添加case2的条件并设置状态，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 5]  
总体设置如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 6]

## 预览效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 8]

## 原型地址 ##

[>>点击查看“图片验证码”原型][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70]: /images/20210923/01b7f50175c9418891d78ae35e62ea0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 1]: /images/20210923/dc298541a2894025af7cc941616f560c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 2]: /images/20210923/df38acfa274842e6ba68a0ad87a05969.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 3]: /images/20210923/558844b8eafe43f3a8eab3af256af1fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 4]: /images/20210923/6dc13c7d0f02413889177ddc663b3780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 5]: /images/20210923/976877c41de045c8bee7ceb587723468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 6]: /images/20210923/ae5c63d66f1f4b73970f889d11a9e02b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 7]: /images/20210923/5c122d2847b44b51a945231474975c8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nbGVpMzA1_size_16_color_FFFFFF_t_70 8]: /images/20210923/b9a39a4b6d3d4f50a8c1eee8b115a703.png
[Link 1]: https://lieep0.axshare.com