验证码-图片验证篇

之所以一直说“验证码，我只服 12306”，主要的原因是 12306 在 2015 年推出的图片验证码，的确是“前无古人，后无来者”，“鬼见了都发愁”，本文带来这一系列的第7篇教程，分享如何用 Axure 设计出一款类似 12306 图片验证码的功能（。

首先来看一下最终实现的效果（点击文末“阅读原文”可以体验）。

这个设计主要有几个难点：

1）随机挑选图片。

2）随机挑选图片元素，且挑选的图片元素在随机挑选出来的图片中至少能找到一张。

3）验证。

首先来看一下整个设计需要用到的界面元素。

图片是通过中继器来添加的，中继器中只放了一张图片。

下图是中继器的数据配置，第一列导入图片，第二列填写图片包含的元素，第三列是排序值，无需填写内容，后面会说明它的用途。

为了确保中继器能够按照宫格的形式排列，这里需要调整一下中继器的样式，同时还设置了分页，每页显示6项，后面会说明这样设置的用意。

调整之后，出来的效果就是这样。

其他界面元素可以根据上文截图自行设计，并摆放好。

在写交互之前，先添加以下全局变量，每个变量具体的用法在写交互的过程中会加以说明。

准备就绪之后，就可以开始写交互了。

点击图片选中的交互样式

在【交互-交互样式-元件选中的样式】进行设置即可，这里是加了一个宽度为6的红色边框。

随机挑选6张图片

这个功能的实现，在于从中继器随机挑选指定数量的数据，但中继器并没有提供这样的功能。

那换一个思路，我们刚刚在中继器的样式中设置了分页，每页显示数量是6，如果我们能随机让6张图片显示在第一页，也是能够达到相同的目的，但中继器同样没有提供这样的功能，因此我们还是没有解决这个问题。

再换一个思路，中继器提供了一个排序的功能，如果用于排序的值是随机的，那么我们每次排序就都能得到一个随机的结果，那么第一页的6张图片也就变成随机的了。

说到这里，相信你应该想到了，在中继器的数据里，还有一个没用上的字段，那就是【SortValue】，这个字段正是用来产生随机排序的关键。

这里梳理一下思路，当中继器载入的时候，【标记全部行】，【更新】【所有标记的行】的【SortValue】，添加一个随机值，然后按【SortValue】字段进行排序（升降序没关系），具体交互配置如下。

我这里没有选择数字，是因为我用的通用版汉化包会到这这个选项的排序失效，如果你也遇到相同问题，可以替换为与 Axure 版本匹配的汉化包，或者跟我一样，选择【Text (Case Sensitive)】。

随机挑选图片元素

通过上面的操作，我们已经能够得到6张随机的图片，如果我们要随机挑选一个图片元素，并且确保6张图片中至少有一张包含该元素，最简单的方式就是直接获取这6张图片中任意一张的元素。

在中继器【载入时】，我们生成一个1-6的随机数，保存到全局变量【Pic_Index】中。

接下来添加中继器【每项加载】时的交互，这里做了一个判断，如果当前加载的图片序号【Item.index】等于变量【Pic_Index】时，取出当前图片的图片元素【Item.PictureElement】，保存到变量【Pic_Element】中，并且设置图片为【Item.Picture】；否则的话，只需要设置图片即可。

梳理一下以上的思路：假设生成的随机数是2，当加载第1张图片的时候，只显示图片即可，当加载第2张图片时，序号与随机数相同，除了显示图片，还将第2张图的图片元素保存到变量中，这样在验证时，至少能够确保有一张图片是包含图片元素的，也就是第2张图片。

通过上面的设置，我们就可以得到如下效果。

在刚刚的设置中，我们其实已经拿到待验证的图片元素了，因此，上方提示验证的文本也可以将图片元素放进去。

这样就会得到如下效果。

验证

这是整个设计中最复杂的一个点，先来说说验证的思路。

首先你得知道在随机出现的6张图片中，具体有多少张图片是包含我们随机选出来的待验证的图片元素的，我们假设为 x；

然后你得知道所有已经点选的图片中，有多少张是包含待验证的图片元素的，我们假设为 y；

最后你得知道所有已经点选的图片中，有多少张是不包含待验证的图片元素的，我们假设为 z。

当 y = x 且 z ≠ 0 时，验证通过，因此，我们只要能够获取到 x、y、z 的值，就可以进行验证。

其中，y 和 z 并不难获取，我们只需要在点选图片时进行判断即可。

首先找到中继器中的图片，添加【单击时】切换【当前图片】的【选中状态】。

注意这里还需再设置一次图片的加载，否则选中图片再取消选中之后，会出现如下问题。

接下来再给图片添加【选中】和【取消选中】事件，这里用到两个变量，【Sel_Match】等同于上文所说的 y，【Sel_Not_Match】等同于上文所说的 z。

上图的配置逻辑是：

当图片被选中时，如果当前图片包含图片元素，则给变量【Sel_Match】+1，如果不包含，则给【Sel_Not_Match】+1；

当图片被取消选中，如果当前图片包含图片元素，则给变量【Sel_Match】-1，如果不包含，则给【Sel_Not_Match】-1。

通过上述的配置，在每一次点选之后，【Sel_Match】将记录到所选的图片中包含待验证图片元素的数量，【Sel_Not_Match】则记录到不包含待验证图片元素的数量。

这样，y 和 z 的值就有了，再来处理最复杂的 x。其实要获取 x 的思路很简单，可以将所有图片的图片元素取出来，拼成一个长字符串，然后再判断我们需要验证的图片元素总共在这个字符串中出现多少次。但难就难在 Axure 中没有现成的函数可以实现这样的功能。

因此，这里用了一种迂回的方式，我举个例子，通过这个例子你能更好理解这个实现的思路。

例：我爱北京，但我还没有去过北京，听说北京雾霾很严重，但我还是希望有朝一日能去北京。

问：“北京”一词在句中一共出现多少次？

我的解决思路是这样的：

首先整句话的字符长度为：40

接着把整句话中的“北京”删除，删除后的字符长度为：32

减少的字符长度为：40-32=8

要匹配的字符长度为：2

字符出现的次数为：8/2=4

因此，通过以上的过程，我们可以知道“北京”一词总共在句中出现了4次。

看到这里也许你还不太明白到底要怎么做，没关系，我们再到原型的交互配置看一下。

首先我们需要把随机出现的6张图所包含的元素都存下来，在刚刚已经配置的中继器的【每项加载】事件中，给变量【Element_For_Match】【追加】当前图片的图片元素，【concat】的作用就是在旧字符串的基础上追加新的字符串，比如【"x".concat("y")】的结果就是“xy”。

这样，当6张图片加载完成之后，【Element_For_Match】就会获得一个由6个图片元素拼接成的长字符串。

接下来我们就可以写验证了，找到【确定】按钮，添加点击事件。

这里最重要的就是判断条件，上文说过，当 y = x 且 z ≠ 0 时，验证通过，【Sel_Match】等同于 y，【Sel_Not_Match】等同于 z，而下图这一长串的公式其实就是在计算 x 的值，公式的含义可以结合我上文举的例子来理解，其中【replace】是用来将字符串中的指定字符串替换成另外一个字符串，这里替换的字符串没有传值，等同于删除掉指定的字符串。

经过上面这番配置，验证功能就完成了。

**刷新
**

刷新的功能很简单，由于我们在载入中继器的时候，就已经把该做的事情都做完了，所以这里可以【单击时】直接【触发】中继器的【载入时】事件即可，同时注意有可能用户是在验证成功后点击了刷新按钮，所以刷新时，验证成功和失败的弹窗也需要隐藏。

最后，因为在刷新时，有很多的变量需要初始化，所以在中继器载入时，我们需要将变量进行重置。

以上便是这个验证码的全部教程，本身设计并不复杂，但思路很重要，你不妨也来试一下吧！

Axure 教程28

Axure 验证码设计教程7

Axure 教程 · 目录

上一篇Axure 中继器+动态面板实现拖拽式穿梭框教程下一篇**【Axure 教程】中继器，你这个“渣男”（番外篇）**