Axure设计:获取大小写字母及数字图形校验码

6367069748378412154867081.jpg

图片来源图虫:已授站长之家使用

各大互联网站因为安全校验需要,防止站点大量重复请求、机器人暴力访问等情况,在校验用户身份时常采用图形校验码方式。作者将通过这篇案列分享,教大家使用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. 成功提示组合元件,用于显示校验成功时的提示。

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

实现步骤

(1)页面首次加载时事件

源数据文本标签载入时,设置校验码元件的文字为 4 位随机校验码。

声明:本文转载自第三方媒体,如需转载,请联系版权方授权转载。协助申请

相关文章

相关热点

查看更多