新闻中心

您的位置:首页 > 新闻中心

网站安全之获取大小写字母及数字图形校验码
来源:www.cdwanxin.com/news/1216.html日期:2018-09-07


各大互联网站因为安全校验需要,防止站点大量重复请求、机器人暴力访问等情况,在校验用户身份时常采用图形校验码方式。作者将通过这篇案列分享,教大家使用axure制作实现“获取验证包含大小写字母与数字的随机图形校验码”。

文/十月大神

演示地址:http://www.pmgod.cn/demo/

实现效果

  1. 校验码随机显示,包含0- 9 的数字,a-z的小写字母,a-z的大写字母;

  2. 点击“验证码区域”或“看不清,换一张”文本时,刷新校验码;

  3. 校验码输入为空时,点击“提交验证”,弹出内容为“校验码不能为空!”的提示信息,刷新校验码;

  4. 校验码输入错误时,点击“提交验证”,弹出内容为“请输入正确的校验码!”的提示信息,刷新校验码,清空文本框内容;

  5. 校验码输入正确时,点击“提交验证”,弹出内容为“校验码验证成功!”的提示信息。

原理分析

(1)图片背景+随机校验码组成图形校验码

(2)随机校验码是由 4 个随机的字母或数字组成

(3)先实现获取 1 位随机校验码

  • 将大写a-y,小写a-y,数字0- 9 写入一个文本标签中,共计 62 个字符;

  • 利用math.random()函数获取0- 1 之间的随机数a(0≤a<1);

  • 利用随机数a* 62 获取0- 62 之间的随机数b(0≤b<62);

  • 利用math.floor(b)函数 获取b向下取整数c(0≤c<62);

  • 利用charat(c)函数 获取文本指定位置为c的字符。

(4)将 1 位随机校验码复制 3 次,组成 4 个随机校验码

(5)利用元件载入、单击元件等方式触发校验码动态变化

元件准备

  1. 源数据文本标签,用于存放大小写a-y字母及0- 9 数字;

  2. 校验码文本标签,用于显示图形检验码的文字;

  3. 校验码背景图片,放在图形校验码文字底部;

  4. 刷新元件,用于点击触发校验码刷新;

  5. 输入框,用于动态输入校验码;

  6. 输入框背景,放在输入框底部;

  7. 提交按钮,触发输入框中文字校验;

  8. 背景,整个案例的演示背景,可要可不要;

  9. 错误提示组合元件,用于显示校验出错时的提示;

  10. 成功提示组合元件,用于显示校验成功时的提示。

隐藏源文件、提示元件,重新布局元件后效果如下: