欢迎您加入草根网站目录: 提交网站流程 -> 注册会员 -> 提交网站 -> 等待审核...
数据统计:122个主题分类,500个优秀站点,236个站点正在排队审核,7254篇站长资讯
网站快速审核仅需10元/站,联系:点击这里给我发消息
当前位置:草根网站目录 » 站长资讯 » 站长资讯 » 行业资讯 » 文章详细 订阅RssFeed

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

来源:草根网站目录 浏览:171次 时间:2018-09-08

.

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 位随机校验码。


赋值校验码元件文字时,需要设置为富文本格式,从而可以设置校验码的 4 位字符显示不同颜色。

利用Math.random()、Math.floor(x)函数获取 0 到 62 之间的整数C(0≤C<62),利用b.charAt(C)函数获取b元件在C位置的字符;依次复制三次,每次设置不同的颜色。

到这里,就已经完成了四位随机校验码的获取功能。

(2)图形校验码点击事件

点击图形校验码时,设置校验码元件的文字为 4 位随机校验码。

实用小技巧:复制源数据元件载入时的设置方法,黏贴至校验码元件单击时,即可完成单击时的文字设置。

(3)“看不清,换一换”点击事件

点击“看不清,换一换”元件时,我们可以采用与图形校验码点击事件相同的方式设置元件文字,但是此处我们用一种新的方式设置元件文字。我们在点击元件时,触发“图形校验码点击事件”,从而设置校验码元件的文字为 4 位随机校验码。

触发“校验码”鼠标单击事件。

(4)校验码提交验证事件

当我们点击“提交验证”按钮时,如果提交的输入表单为空,提示“校验码不能为空!”;如果提交的输入表单内容与图形校验码内容不同时,提示“请输入正确的校验码”,同时重置图形校验码内容;如果提交的输入表单内容与图形校验码内容一致时,则进入下一环节。

实用小技巧:利用显示事件的“灯箱效果”,背景色为黑色,透明度设置为20%,提示效果很漂亮。

本文章“草根网站目录 www.571517.com”编辑收录

推荐站点

  • 365体育365体育

    看足球比分,上365体育网(www.365ty.cn).三六五体育提供最快最准最全的足球比分,比分直播,篮球比分直播,足球即时比分,365足球比赛在线观看与比赛现场同步,更有赛事数据统计,现场分析等专业体育数据及综合球类比分直播的体育资讯网站.

    www.365ty.cn
  • 365体育365体育

    365体育权威提供最全体育新闻,体育数据,365体育网址.聚合知名体育比分网:球探比分,7m比分,90比分,捷报比分,8bo比分,大赢家体育比分.7m篮球比分,90vs篮球比分,188篮球比分等综合比分专题参考.提供快,准,全的足球即时比分,比分直播,足球比分直播与比赛现场同步,赛事数据统计等专业数据.

    www.365ty.com.cn
  • 365体育365体育

    看体育,上365体育.365体育提供权威体育比分数据,体育新闻.体育足球网址导航.展示多家知名足球比分网:球探比分网,365足球比分,90比分,捷报比分,8bo比分,大赢家体育.7m篮球比分,90vs篮球比分,188篮球比分等综合比分数据参考.提供快,准,全的足球即时比分,比分直播,足球比分直播与体育比赛现场同步,赛事数据统计等专业比分数据.

    www.365ty.com
  • 网页游戏大全网页游戏大全

    UU游戏论坛是国内领先的热门网页游戏公益服平台;致力打造优质的页游新服和新开网页游戏大全为己任,专业提供新出网页游戏、稀有游戏、页游开服表等服务。

    www.uuwl520.com
  • 微商厂家货源微商厂家货源

    微商厂家货源的好坏是提升微商代理品牌与人气声望的唯一途径,微信用户找优质的微商代理货源、微商货源以及高端的微商推广技巧等信息请关注微商厂家货源网:www.comicbar.com.cn。

    www.comicbar.com.cn
  • 男人团男人团

    男人天堂每日为您及时分享男人资讯内容,如八卦,搞笑,美女,资讯,数码,游戏,健康,情感,手机,婚姻,爱情精彩内容,做男人喜爱的资讯网站,一切尽在男人天堂!

    www.andr.com.cn