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


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 相关文章推荐
    动态表格Table类的实现
    Aug 26 Javascript
    JS与框架页的操作代码
    Jan 17 Javascript
    jquery动态加载select下拉框示例代码
    Dec 10 Javascript
    jquery五角星评分插件示例分享
    Feb 21 Javascript
    JS+CSS实现实用的单击输入框弹出选择框的方法
    Feb 28 Javascript
    JavaScript数组去重的3种方法和代码实例
    Jul 01 Javascript
    Easyui 之 Treegrid 笔记
    Apr 29 Javascript
    基于JavaScript实现复选框的全选和取消全选
    Feb 09 Javascript
    详解用node-images 打造简易图片服务器
    May 08 Javascript
    JavaScript中document.referrer的用法详解
    Jul 04 Javascript
    基于Axios 常用的请求方法别名(详解)
    Mar 13 Javascript
    javascript实现倒计时效果
    Feb 17 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
    优化网页之快速的呈现我们的网页
    2007/06/29 Javascript
    XML的代替者----JSON
    2007/07/21 Javascript
    锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
    2010/03/24 Javascript
    tangram框架响应式加载图片方法
    2013/11/21 Javascript
    js获取url中指定参数值的示例代码
    2013/12/14 Javascript
    js判断60秒以及倒计时示例代码
    2014/01/24 Javascript
    使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
    2014/04/23 Javascript
    node.js中的events.emitter.listeners方法使用说明
    2014/12/10 Javascript
    Bootstrap3制作自己的导航栏
    2016/05/12 Javascript
    如何用JavaScript实现动态修改CSS样式表
    2016/05/20 Javascript
    原生Javascript插件开发实践
    2017/01/09 Javascript
    ztree实现左边动态生成树右边为内容详情功能
    2017/11/03 Javascript
    centos 上快速搭建ghost博客方法分享
    2018/05/23 Javascript
    javascript实现前端input密码输入强度验证
    2020/06/24 Javascript
    vue使用echarts实现水平柱形图实例
    2020/09/09 Javascript
    uniapp实现可以左右滑动导航栏
    2020/10/21 Javascript
    vue中如何自定义右键菜单详解
    2020/12/08 Vue.js
    Vue实现简单计算器
    2021/01/20 Vue.js
    [06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
    2021/03/11 DOTA
    Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
    2014/06/04 Python
    NumPy 基本切片和索引的具体使用方法
    2019/04/24 Python
    Python分支语句与循环语句应用实例分析
    2019/05/07 Python
    python实现统计文本中单词出现的频率详解
    2019/05/20 Python
    python实现最大子序和(分治+动态规划)
    2019/07/05 Python
    tensorflow将图片保存为tfrecord和tfrecord的读取方式
    2020/02/17 Python
    HTML5学习笔记之History API
    2015/02/26 HTML / CSS
    医学专业大学生求职的自我评价
    2013/11/27 职场文书
    安全事故检讨书
    2014/01/18 职场文书
    会计自荐信范文
    2014/03/09 职场文书
    婚礼秀策划方案
    2014/05/19 职场文书
    法人代表身份证明书及授权委托书
    2014/09/16 职场文书
    领导干部作风建设自查报告
    2014/10/23 职场文书
    场地使用证明模板
    2014/10/25 职场文书
    2016年优秀共产党员先进事迹材料
    2016/02/29 职场文书
    sql注入教程之类型以及提交注入
    2021/08/02 MySQL
    使用Redis实现分布式锁的方法
    2022/06/16 Redis