网站安全之获取大小写字母及数字图形校验码

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

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

网页题目：网站安全之获取大小写字母及数字图形校验码
当前链接：https://www.cdcxhl.com/news32/106282.html

成都网站建设公司_创新互联，为您提供App设计、全网营销推广、网站内链、品牌网站制作、域名注册、微信公众号

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联