2023年【Axure 教程】验证码除了 12306我还没有服过谁（图形验证篇）

【Axure教程】验证码，除了12306，我还没有服过谁（图形验证篇）在软件设计中，为了防止暴力注册或爬虫爬取等机器恳求，需要验证操本尊是人还是机器，因此催生了验证码这个设计，目前验证码已经衍生出很多的形式，包括图形验证、数学运算、点选文字、滑动拼图等，本文主要介绍怎么使用Axure来设计一个动态的图形验证码。

一、验证码外观

验证码的外观设计大家可以各自发挥自己的创意，以下是我绘制的，仅供大家参考：

可以给大家供应几点思路：

使用识别和阅读有肯定难度的字体，比如带倾斜、描边或变形的一些字体添加干扰因素，比如线条、背景等设置跟背景相近或相像的字体颜色原则就是能够尽可能干扰用户对文字的识别，当然，不能让用户完全识别不出来，不然就失去了它存在的意义。

二、验证码字库

常规的图形验证码文字主要由大小写字母+数字组成，因此我们需要将全部会用到的文字放到字库中，生成的时候只需要从字库中选择即可。为了便利调用，我们使用【全局变量】来存储字库，在Axure顶部菜单中找到【项目】，点开之后选择【全局变量】：

接着我们添加一个全局变量【code_library】并输入默认值，默认值是【0-9，A-Z，a-z】的全部字符：

三、验证码位数

一般常见图形验证码都是4位，现在也有一些平台为了提升难度，会增加到5位或6位，为了能够敏捷掌握验证码位数，我们也同样通过变量来掌握位数的生成，在【全局变量】中添加【code_bits】，默认值是4：

四、验证码存储

我们生成验证码的时候，并不是一下子就从字库中选择出指定位数的验证码，而是一个一个字符选择出来，最终组成指定位数的验证码，在选择过程中，需要有一个变量来存储已经选择出来的字符，所以，我们还需要一个变量，用来存储生成的验证码，在【全局变量】中添加【code】，无需默认值：

五、验证码生成器

上文提到，我们需要按指定位数从字库中逐一选择字符来组成验证码，也就是说，验证码的生成过程是一个循环的过程，因此，我们可以使用一个【动态面板】来作为验证码的生成器，当动态面板循环的时候，根据指定的位数从字库中选择字符（动态面板如何循环调用可参考我之前发过的文章《【Axure动态面板】让你的动画变成“永动机”》），所以，这里我们先在页面中拖入一个动态面板，并确保动态面板中至少有2个状态（状态中无需放置任何内容，Axure9.0建议将动态面板拖动到【负空间】）：

至此，我们全部的预备工作就做完了，接下来我们就来实现验证码的生成规律。

六、验证码生成思路

首先，我们先来拆解一下生成的步骤：

总结一下思路：

当验证码载入或被点击时，验证码生成器【动态面板】开头循环；生成器循环时，推断验证码【code】的长度是否等于指定的位数【code_bits】，假如是，表示已经从字库【code_liabrary】中选择出足够字符，这时可以停止生成器循环，并把验证码显示出来；假如验证码的长度【code】不等于指定位数【code_bits】，表示还没有选择出足够的字符，这个时候就从字库【code_library】随机选择一个字符添加到验证码【code】中，直到字符数满意指定的位数，停止生成器循环并将验证码显示出来。思路基本清楚了，但在动手之前，我们还需要知道这个设计中的一个难点，就是怎么从字库【code_library】中【随机】选择一个字符，这里就会涉及到几个【函数表达式】：

LVAR.charAt(index)：我们可以用这个函数来从字库【code_library】中取字符，这个函数的作用是从字符串【LVAR】中取出排在【index】位置的字符，这里需要留意，【index】的索引值是从0开头的，也就是说，index=0表示取出第一个字符，index=1表示取出其次个字符，以此类推，最终一个字符的index=LVAR.length-1。Math.random()：我们可以用这个函数作为上述函数的索引值【index】，随机生成取值的索引，这个函数的作用是随机生成0-1的小数，假如我们要随机生成0-n的小数，我们只需要将Math.random()乘以n（Math.random()*n）就行了，这个n的取值需要确保在字库的长度范围内，超过字库的长度范围就会取不到值，所以n=code_library.length-1(index索引是从0开头，所以要减去1，否则当n=code_library.length时会取不到值。Math.floor(x)：Math.random()生成的是小数，但LVAR.charAt(index)中的index必需是整数，所以我们可以通过这个函数来对Math.random()生成的小数进行取整，这个函数的作用是返回x的下舍整数，简洁说就是将生成的结果，只保留整数，舍去小数部分，例：Math.floor(1.23)=1。所以要从字库中随机取值，完整的函数表达式就是：code_library.charAt(Math.floor(Math.random()*(code_library.length-1)))。

这下，我们可以开头动手进行配置了。

七、生成验证码

首先给验证码添加点击大事，【单击时】开启验证码生成器（动态面板）循环，循环间隔设为0毫秒即可：

接着，我们给验证码生成器添加【状态转变时】的大事，这里需要区分两种场景：

场景1：验证码位数=指定位数，表示验证码生成胜利，我们只需要停止生成器循环并把验证码显示出来即可：

场景2：验证码位数≠指定位数，表示验证码未生成胜利，需要从字库中随机选择一个字符添加到验证码【code】中：

上图中后半部分的表达式上文已经解释过了，这里就不再赘述，关于为什么要在那个表达式前面加上[[code]]，这里解释一下：

假设验证码生成器循环4次，每次从字库中抽出的字符分别是1、2、3、4，假如不加[[code]]，则循环4次分别是以下4种结果：

第一次循环：1其次次循环：2第三次循环：3第四次循环：4从上面4次循环的结果可以看出，每次生成之后都会给【code】重新赋值，所以【code】永久都只会有一个数字，就会陷入无限的循环中，而在前面添加[[code]]之后，4次循环的结果是：

第一次循环：1其次次循环：12第三次循环：123第四次循环：1234由于每一次循环都会将之前已经生成的【code】拼接到新生成的【code】，再重新赋值给【code】，所以才能形成上述这种追加内容的效果，然后在第四次循环结束之后，验证码【code】长度满意指定长度，退出循环并显示验证码，接下来我们在扫瞄器中看看效果：

效果是对的，但是只有第一次点击有效，后面怎么点击都不会变化，哪里出了问题呢？

我们来分析一下，既然第一次点击能生成说明随机生成验证码的规律是没有问题的，那问题应当是出在推断验证码位数的那个规律上，原来，【code】默认是空的，所以第一次点击的时候能够正常生成，但是其次次点击的时候，由于【code】已经有值，所以不会再次生成，所以这里我们在点击验证码时，应当先清空【code】：

这样就能确保每次点击验证码时【code】都没有值，才能够正常生成，再来看看修改后的效果：

现在还有一个问题，就是验证码在载入时就会自动生成，但目前还是显示我们设置的默认文本，这里我们做个简洁的优化，你可以将验证码【单击时】的大事复制粘贴到验证码【载入时】的大事