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


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的最佳方法分享
    Oct 21 Javascript
    jquery实现输入框动态增减的实例代码
    Jul 14 Javascript
    javascript格式化日期时间方法汇总
    Jun 19 Javascript
    javascript作用域问题实例分析
    Jul 13 Javascript
    Bootstrap作品展示站点实战项目2
    Oct 14 Javascript
    BootStrap轻松实现微信页面开发代码分享
    Oct 21 Javascript
    AngularJS创建自定义指令的方法详解
    Nov 03 Javascript
    JavaScript中绑定事件的三种方式及去除绑定
    Nov 05 Javascript
    JS判断两个对象内容是否相等的方法示例
    Apr 10 Javascript
    JS实现图片旋转动画效果封装与使用示例
    Jul 09 Javascript
    基于vue.js实现分页查询功能
    Dec 29 Javascript
    字节飞书面试promise.all实现示例
    Jun 16 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
    php 进度条实现代码
    2009/03/10 PHP
    PHP将身份证正反面两张照片合成一张图片的代码
    2017/04/08 PHP
    thinkPHP5.0框架事务处理操作简单示例
    2018/09/07 PHP
    PHP实现的文件浏览器功能简单示例
    2019/09/12 PHP
    用javascript做拖动布局的思路
    2008/05/31 Javascript
    html 锁定页面(js遮罩层弹出div效果)
    2009/10/27 Javascript
    js调用后台、后台调用前台等方法总结
    2014/04/17 Javascript
    JS实现星星评分功能实例代码(两种方法)
    2016/06/09 Javascript
    AngularJS extend用法详解及实例代码
    2016/11/15 Javascript
    jQuery实现判断控件是否显示的方法
    2017/01/11 Javascript
    js判断PC端与移动端跳转
    2020/12/24 Javascript
    JavaScript实现三级联动菜单实例代码
    2017/06/26 Javascript
    微信小程序云开发实现数据添加、查询和分页
    2019/05/17 Javascript
    如何让微信小程序页面之间的通信不再变困难
    2019/06/03 Javascript
    微信小程序 确认框的实现(附代码)
    2019/07/23 Javascript
    create-react-app中添加less支持的实现
    2019/11/15 Javascript
    python 文件与目录操作
    2008/12/24 Python
    用 Python 连接 MySQL 的几种方式详解
    2018/04/04 Python
    tensorflow1.0学习之模型的保存与恢复(Saver)
    2018/04/23 Python
    pandas 将list切分后存入DataFrame中的实例
    2018/07/03 Python
    Python实现繁?转为简体的方法示例
    2018/12/18 Python
    pycharm的console输入实现换行的方法
    2019/01/16 Python
    Python实现简单层次聚类算法以及可视化
    2019/03/18 Python
    python顺序执行多个py文件的方法
    2019/06/29 Python
    Python安装及Pycharm安装使用教程图解
    2019/09/20 Python
    基于Django统计博客文章阅读量
    2019/10/29 Python
    在html5的Canvas上绘制椭圆的几种方法总结
    2013/01/07 HTML / CSS
    移动端html5 meta标签的神奇功效
    2016/01/06 HTML / CSS
    基于MUI框架使用HTML5实现的二维码扫描功能
    2018/03/01 HTML / CSS
    印度尼西亚综合购物网站:Lazada印尼
    2016/09/07 全球购物
    高三生物教学反思
    2014/01/25 职场文书
    教师师德承诺书
    2014/03/26 职场文书
    学校安全责任书范本
    2014/07/23 职场文书
    郭明义电影观后感
    2015/06/08 职场文书
    SpringDataJPA在Entity中常用的注解介绍
    2021/12/06 Java/Android
    使用compose函数优化代码提高可读性及扩展性
    2022/06/16 Javascript