Axure8.0-制作图片验证码

需求分析

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

元件准备

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

开始制作

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

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

将变量值设置为abcdefghijklmnopqrstuvwxyz0123456789（26个英文字母+10个数字），验证码的值将会在这36个字符中产生。

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

  接下来给按钮添加交互，先添加条件，在设置状态。设置情形一：如果输入框文字 == 验证码文字，设置面板状态为提示正确状态，且设置面板状态为可见。具体步骤如下：


同理，设置情形二：如果输入框文字 ！= 验证码文字，设置面板状态为提示错误状态，且设置面板状态为可见。添加case2的条件并设置状态，如下：

总体设置如下：

预览效果

原型地址

>>点击查看“图片验证码”原型