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


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中的Screen屏幕对象
    Jan 16 Javascript
    jQuery的选择器中的通配符使用介绍
    Mar 20 Javascript
    confirm的用法示例用于按钮操作时确定是否执行
    Jun 19 Javascript
    简单总结JavaScript中的String字符串类型
    May 26 Javascript
    javascript中递归的两种写法
    Jan 17 Javascript
    js实现音频控制进度条功能
    Apr 01 Javascript
    JavaScript中字符串的常用操作方法及特殊字符
    Mar 18 Javascript
    分享vue里swiper的一些坑
    Aug 30 Javascript
    npm 常用命令详解(小结)
    Jan 17 Javascript
    通过循环优化 JavaScript 程序
    Jun 24 Javascript
    JavaScript解析JSON数据示例
    Jul 16 Javascript
    如何在vue-cli中使用css-loader实现css module
    Jan 07 Vue.js
    一些易混淆且不常用的属性,希望有用
    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
    暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
    2020/03/08 星际争霸
    PHP递归调用数组值并用其执行指定函数的方法
    2015/04/01 PHP
    33道php常见面试题及答案
    2015/07/06 PHP
    php 流程控制switch的简单实例
    2016/06/07 PHP
    PHP+Redis 消息队列 实现高并发下注册人数统计的实例
    2018/01/29 PHP
    PHP中实现中文字串截取无乱码的解决方法
    2018/05/29 PHP
    PHP上传图片到数据库并显示的实例代码
    2019/12/20 PHP
    一个用js实现的页内搜索代码
    2007/05/23 Javascript
    javascript转换字符串为dom对象(字符串动态创建dom)
    2010/05/10 Javascript
    利用JQuery制作符合Web标准的QQ弹出消息
    2014/01/14 Javascript
    在JS中如何调用JSP中的变量
    2014/01/22 Javascript
    jquery自定义插件开发之window的实现过程
    2016/05/06 Javascript
    JS模仿腾讯图片站的图片翻页按钮效果完整实例
    2016/06/21 Javascript
    完美的js div拖拽实例代码
    2016/09/24 Javascript
    实例解析Array和String方法
    2016/12/14 Javascript
    jQuery实现可编辑表格并生成json结果(实例代码)
    2017/07/19 jQuery
    浅谈通过JS拦截 pushState和replaceState事件
    2017/07/21 Javascript
    实时监控input框,实现输入框与下拉框联动的实例
    2018/01/23 Javascript
    React组件中的this的具体使用
    2018/02/28 Javascript
    Vue登录注册并保持登录状态的方法
    2018/08/17 Javascript
    详解小程序input框失焦事件在提交事件前的处理
    2019/05/05 Javascript
    [01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
    2020/11/26 DOTA
    Python使用random.shuffle()打乱列表顺序的方法
    2018/11/08 Python
    在python中使用requests 模拟浏览器发送请求数据的方法
    2018/12/26 Python
    django2.0扩展用户字段示例
    2019/02/13 Python
    多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
    2019/09/11 Python
    Python基于pyecharts实现关联图绘制
    2020/03/27 Python
    python实现经纬度采样的示例代码
    2020/12/10 Python
    传统HTML页面实现模块化加载的方法
    2018/10/15 HTML / CSS
    彪马日本官网:PUMA日本
    2019/01/31 全球购物
    迟到早退检讨书
    2014/02/10 职场文书
    《口技》教学反思
    2014/02/21 职场文书
    服务质量承诺书
    2014/03/27 职场文书
    小学生感恩演讲稿
    2014/04/25 职场文书
    《天游峰的扫路人》教学反思
    2014/04/25 职场文书
    房屋所有权证明
    2014/10/20 职场文书