Axure RP 9 学习笔记 - 随机验证码

【知识点39】随机验证码

01 预期效果

（1）每次加载页面时，随机显示不同的验证码图片。

（2）点击验证码图片或“换一张”时，随机切换不同的验证码图片。

（3）在输入框内输入验证码，点击“验证”按钮，可与验证码图片进行比对。若不一致，则提示“请输入正确的验证码！”；若一致，则提示“验证码输入正确！”。

02 具体操作步骤

（1）在原型文件的画布中，拖入文本框（名称：inputcode）、中继器（名称：codepic）、提示文本标签（名称：message）、按钮（名称：check）以及两个文本标签。

（2）点击codepic中继器，在“样式”功能面板中，编辑中继器text、picture列下内容。导入验证码图片，并设置与验证码内容一致的文字。

在“交互”功能面板中，打开“交互编辑器”。添加“每项加载”事件。点击“设置文本”，在“值”中插入“[[Item.text]]”函数。点击“设置图片”，在“值”中插入“[[Item.picture]]”函数。

双击codepic中继器，在中继器中设置pic图片的文字样式为透明，即在验证码图片中不显示文本内容。

在“样式”功能面板中，“分页”处勾选“多页显示”，“每页项数量”设为“1”。

（3）点击“换一张”，设置随机切换不同的验证码图片。

点击“换一张”文本标签，在“交互”功能面板中，打开“交互编辑器”。添加“单击时”事件。点击“设置当前显示页面”选择codepic中继器，在“页码”处点击“fx”，插入随机页码设置函数。

①获取0~1之间的随机小数；②获取中继器的随机小数；③向上取整。

（4）中继器“载入时”以及点击验证码图片，设置随机切换不同的验证码图片。

将“换一张”设置的“单击时”事件，同样设置（复制）到codepic中继器“载入时”事件中和pic图片的单击事件中。

（5）验证判断

点击check“验证”按钮，在“交互”功能面板中，打开“交互编辑器”。添加“单击时”事件。点击“启用情形”，进行inputcode文本框输入文本与codepic中继器文本的判断。若“元件文字-inputcode ！= 元件文字-pic”，点击“设置文本”，选择message提示文本标签，“值”中设置“请输入正确的验证码！”。Else，点击“设置文本”，选择message提示文本标签，“值”中设置“验证码输入正确！”。

这样，即可实现在每次加载页面以及点击验证码图片或“换一张”时，随机显示不同的验证码图片。在输入框内输入验证码，点击“验证”按钮，可与验证码图片进行比对。若不一致，提示“请输入正确的验证码！”，若一致，提示“验证码输入正确！”的效果。

待续~