Axure设计:动态随机获取“大小写字母及数字”图

作者:admin | 分类:数字论坛 | 浏览:111 | 评论:

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

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

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

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

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

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

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

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

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

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

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

  既然都已经列出二十六位英文数字了 只需要取随机一位就可以了 弄那么复杂做什么

  译文 如何开始你的第一个线门产品、运营课程随便学,做个有竞争力互联网人

  人人都是产品经理(是以产品经理、数字论坛运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

上一篇:云聪数学来了!打破传统教学智能学数学     下一篇:没有了

网名:baidu | 百度

姓名:百度

籍贯:湖南省-岳阳市

现居:北京市—海淀区

职业:网站建设、网站制作

副业:吃饭、睡觉、打豆豆

喜欢的书:《福尔摩斯》《论语》

喜欢的音乐:《十年》《孤独啊》

填写您的邮件地址,订阅我们的精彩内容:

网站分类
友情链接
电话营销、网络营销、互联网营销

互联网营销维码