关于图片验证码设计的思考


Posted in Javascript onJanuary 29, 2007
自从读了《网站重构》这本书,现在对网站设计的思想有了根本性的改变。国内越来越多的媒体也极度关注WEB标准的进展情况,很多门户网站也开始使用符合标准的设计方法重新设计页面,像网易等。
这段时间正好在制作一个访谈系统,采用了符合W3C标准的布局方法,分别在IE5.5、IE6.0、IE7.0、Firefox 2.0、Opera 9.0环境下进行了测试,各不同厂商对CSS的理解也进一步趋于完善,这对于前台页面的制作人员减少了一定的工作量。
好了,归于正题,谈谈关于图片验证码设计的问题。
现在越来越多的网站的注册、发布等页面都采用了防止一些恶意程序的图片验证码选项,不知道大家有没有碰到这样的情况,一个注册表单,填写了帐号信息、个人信息,最后一项的验证码太模糊了竟然看不清,只能是重新刷新整个页面来刷新图片验证码的内容,这是一个不良好的交互设计。
参考了一些门户网站的方法,我的改进设计思路如下:
  1. 把验证码输入项放在表单的第一行;
  2. 客户端可以在不刷新整个页面的情况下更新图片验证码的内容。
    下面重点讲讲第2点的实现方法,以ASP为例吧(目前我只会ASP,^_^)。
    我们一般要插入验证码都是使用<img />标签,例如<img src="inc/code.asp" />,其中inc/code.asp是一个生成图片的程序文件。为了能够更新验证码的内容,可以在图片旁边加一个更新的链接,单击触发图片重载事件,完成图片验证码的更换。具体代码如下:
    HTML:
    <a href="javascript:reloadcode();" title="更换一张验证码图片"><img src="inc/code.asp" id="safecode" alt="看不清,请换一张" /></a> <a href="javascript:reloadcode();" title="更换一张验证码图片">看不清,请换一张</a>
    JavaScript:
    function reloadcode(){
    document.getElementById('safecode').src = 'inc/code.asp?' + Math.random();
    }

    关于图片验证码设计的思考
    我的一个设计界面

    注意,在reloadcode函数中,我们在code.asp后面加了一个随机参数,这样每次的链接地址都不一样,从而达到更新的目的。
    第一次写原创的文章,欢迎大家多多评论和指点。
    Javascript 相关文章推荐
    javascript 打印页面代码
    Mar 24 Javascript
    40款非常棒的jQuery 插件和制作教程(系列一)
    Oct 26 Javascript
    JSON无限折叠菜单编写实例
    Dec 16 Javascript
    JavaScript闭包实例讲解
    Apr 22 Javascript
    与Math.pow 相反的函数使用介绍
    Aug 04 Javascript
    微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
    Apr 18 Javascript
    node.js中express中间件body-parser的介绍与用法详解
    May 23 Javascript
    详解使用路由延迟加载 Angular 模块
    Oct 12 Javascript
    p5.js入门教程和基本形状绘制
    Mar 15 Javascript
    vue-quill-editor富文本编辑器简单使用方法
    Sep 21 Javascript
    VUE.CLI4.0配置多页面入口的实现
    Nov 25 Javascript
    JavaScript实现点击出现子菜单效果
    Feb 08 Javascript
    一些易混淆且不常用的属性,希望有用
    Jan 29 #Javascript
    WebGame《逆转裁判》完整版 代码下载(1月24日更新)
    Jan 29 #Javascript
    判断页面是关闭还是刷新的js代码
    Jan 28 #Javascript
    用JavaScript和注册表脚本实现右键收藏Web页选中文本
    Jan 28 #Javascript
    用js自动判断浏览器分辨率的代码
    Jan 28 #Javascript
    innerHTML,outerHTML,innerTEXT三者之间的区别
    Jan 28 #Javascript
    一个无限级XML绑定跨框架菜单(For IE)
    Jan 27 #Javascript
    You might like
    codeigniter自带数据库类使用方法说明
    2014/03/25 PHP
    PHP附件下载中文名称乱码的解决方法
    2015/12/17 PHP
    PHP简单判断字符串是否包含另一个字符串的方法
    2016/03/25 PHP
    PHP 绘制网站登录首页图片验证码
    2016/04/12 PHP
    [原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
    2016/06/22 PHP
    PHP设计模式之观察者模式定义与用法分析
    2019/04/04 PHP
    Thinkphp整合阿里云OSS图片上传实例代码
    2019/04/28 PHP
    通过JAVAScript实现页面自适应
    2007/01/19 Javascript
    异步动态加载js与css文件的js代码
    2013/09/15 Javascript
    文本框回车提交与禁止提交示例
    2013/09/27 Javascript
    JSuggest自动匹配下拉框使用方法(示例代码)
    2013/12/27 Javascript
    ubuntu下安装nodejs以及升级的办法
    2015/05/08 NodeJs
    黑帽seo劫持程序,js劫持搜索引擎代码
    2015/09/15 Javascript
    第一篇初识bootstrap
    2016/06/21 Javascript
    基于Bootstrap仿淘宝分页控件实现代码
    2016/11/07 Javascript
    JavaScript实现简单的树形菜单效果
    2017/06/23 Javascript
    原生JS封装_new函数实现new关键字的功能
    2018/08/12 Javascript
    mpvue 单文件页面配置详解
    2018/12/02 Javascript
    浅谈JavaScript窗体Window.ShowModalDialog使用
    2020/07/22 Javascript
    [01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
    2018/06/03 DOTA
    Django卸载之后重新安装的方法
    2017/03/15 Python
    Python书单 不将就
    2017/07/11 Python
    详解Python Matplotlib解决绘图X轴值不按数组排序问题
    2019/08/05 Python
    Python Excel vlookup函数实现过程解析
    2020/06/22 Python
    Visual Studio Code搭建django项目的方法步骤
    2020/09/17 Python
    澳大利亚领先的时尚内衣零售商:Bras N Things
    2020/07/28 全球购物
    建筑项目策划书
    2014/01/13 职场文书
    学习交流会主持词
    2014/04/01 职场文书
    高中生第一学年自我鉴定2015
    2014/09/28 职场文书
    庆六一开幕词
    2015/01/29 职场文书
    承诺保证书格式
    2015/02/28 职场文书
    困难补助申请报告
    2015/05/19 职场文书
    付款证明模板
    2015/06/19 职场文书
    签证扫盲贴,41个常见签证知识,需要的拿走
    2019/08/09 职场文书
    nginx proxy_cache 缓存配置详解
    2021/03/31 Servers
    浅析Python中的随机采样和概率分布
    2021/12/06 Python