由于安全验证的需要，各大互联网网站在验证用户身份时往往会使用图形验证码，以防止网站大量重复请求和机器人暴力访问。 笔者将分享这个案例系列，教大家使用Axure制作并实现“获取并验证包含大小写字母和数字的随机图形校验码”。
达到效果
验证码随机显示，包括0-9的数字、小写字母az、大写字母AZ； 点击“验证码区域”或“看不清，换一个”文字时，验证码刷新； 验证码 当输入为空时，点击“提交验证”，弹出内容为“验证码不能为空！” 刷新验证码； 当验证码输入错误时，点击“提交验证”，弹出内容为“请输入正确的验证码！” 提示信息、刷新验证码、清除文本框内容； 验证码输入正确后，点击“提交验证”，提示“验证码验证成功！” 弹出。
原理分析
(1)图片背景+随机校验码组成图形校验码
(2)随机校验码由4个随机字母或数字组成
(3)首先实现1位随机校验码的获取
将大写AY、小写ay和数字0-9写入文本标签，共62个字符； 使用数学。 函数获取0-1之间的随机数A（0≤A<1）； 使用随机数A* 62 获取0-62之间的随机数B（0≤B<62）； 使用数学。 位置C处的角色。
(4)将1个随机校验码复制3次，形成4个随机校验码
（5）使用组件加载、点击组件等方式触发验证码的动态变化
组件准备
源数据文本标签，用于存储大小写AY字母和0-9数字； 校验码文字标签，用于显示图形校验码的文字； 校验码背景图片，放置在图形校验码文字的底部； 刷新组件，用于点击触发验证码刷新； 输入框，用于动态输入验证码； 输入框的背景，放置在输入框的底部； 提交按钮，触发输入框中的文字验证； 背景，整个案例的演示背景，可选或不可选； 错误提示组合组件，用于验证错误时显示提示； 成功提示组合组件用于验证成功时显示提示。
隐藏源文件，提示组件，重新排列组件，效果如下：
实施步骤
(1) 页面首次加载时的事件
加载源数据文本标签时，将校验码组件的文本设置为4位随机校验码。
在分配校验码组件的文本时，需要将其设置为富文本格式，以便可以设置校验码的4个字符显示不同的颜色。
使用数学。 使用Math.floor(x)函数获取0到62之间的整数C（0≤C<62），并使用b.(C)函数获取b分量在C位置的字符； 依次复制三遍，每次设置不同的颜色。
至此，四位随机校验码的获取功能已经完成。
(2)图形验证码点击事件
点击图形校验码时，将校验码组件的文本设置为4位随机校验码。
实用提示：复制源数据组件加载时的设置方法，粘贴到验证码组件中，点击即可完成文字设置。
(3)“看不清楚，更改一下”点击事件
当点击“我看不清楚，改一下”组件时，我们可以像图形验证码点击事件一样设置组件文本，但是这里我们使用了新的方法来设置组件文本。 当我们点击该组件时，会触发“图形校验码点击事件”，从而将校验码组件的文本设置为4位随机校验码。
触发“”鼠标单击事件。
（4）验证码提交验证事件
当我们点击“提交验证”按钮时，如果提交的输入表单为空，会提示“验证码不能为空！”； 如果提交的输入表单内容与图形验证码内容不同，则提示“请输入正确的校验码”并重置图形校验码内容； 若提交的输入表单内容与图形校验码内容一致，则进入下一步。
实用提示：使用“灯箱效果”来显示事件，背景色为黑色，透明度设置为20%，提示效果非常漂亮。
本案例已完成，点击查看上一个案例“带计数选择的双向列表”。
