主页 > 建站知识 > 建站指南 > 策划方案 >

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

作者/整理:07fly 来源:人人都是产品经理 2018-09-07 Tag:


6367069748378412154867081.jpg

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

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

文/十月大神

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

实现效果

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

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

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

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

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

原理分析

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

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

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

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

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

元件准备

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

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

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

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

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

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

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

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

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

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

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

实现步骤

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

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


上一篇:页面中不能承受之——多重引导如何处理?

下一篇:聊聊授权登录的那些事

相关新闻

2008-2020 © 成都零起飞科技有限公司 网站建设 开源CRM 建站系统 旅行社ERP系统 虚拟主机