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

自从读了《网站重构》这本书，现在对网站设计的思想有了根本性的改变。国内越来越多的媒体也极度关注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();
}

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2007129223955386.jpg');}" alt="" src="http://zsrimg.ikafan.com/upload/2007129223955386.jpg" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
我的一个设计界面

注意，在reloadcode函数中，我们在code.asp后面加了一个随机参数，这样每次的链接地址都不一样，从而达到更新的目的。
第一次写原创的文章，欢迎大家多多评论和指点。

赞 (0)

相关推荐

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

    自从读了<网站重构>这本书,现在对网站设计的思想有了根本性的改变.国内越来越多的媒体也极度关注WEB标准的进展情况,很多门户网站也开始使用符合标准的设计方法重新设计页面,像网易等.这段时间正好在制作一个访谈系统,采用了符合W3C标准的布局方法,分别在IE5.5.IE6.0.IE7.0.Firefox 2.0.Opera 9.0环境下进行了测试,各不同厂商对CSS的理解也进一步趋于完善,这对于前台页面的制作人员减少了一定的工作量.好了,归于正题,谈谈关于图片验证码设计的问题.现在越来越多的网站的

  • SpringBoot整合kaptcha实现图片验证码功能

    SpringBoot整合kaptcha实现图片验证码功能

    目录 栗子 配置文件 SpringBoot项目中pom.xml文件 项目代码 项目结构 SpringBootVerifyCodeApplication.java VerifyCodeConfig.java KaptchaController.java 测试 生成运算符验证码 1.设置字符个数为7 2.获取图片 3.演示一下 栗子 登录是所有系统都绕不开的一道坎,很多系统会在用户名和密码下发放置一个图形验证码,例如:  这些图形验证码看起来不仅很丑,而且模糊,但却是保护系统的第一道屏障,它的作用是

  • PHP编写的图片验证码类文件分享

    适用于自定义的验证码类! <?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ Class Image{ private $img; public $width = 85; pub

  • iOS开发实现随机图片验证码封装

    iOS开发实现随机图片验证码封装

    在 iOS 开发中,为了防止短信验证码的恶意获取,注册时需要图片验证,比如某共享单车 APP 在注册时就用了图片验证码,如下图: 图片验证码封装思路: 第一眼看到图片验证码,可能会觉得图片验证码是由 UIImage 实现的,但事实上明显不是,这里简单说下图片验证码封装思路. 首先要有一个数组,里面包含 1-9.a-z 这些字符 在 UIView 上显示这些字符 同时在 UIView 上绘制干扰线 效果图 图片验证码效果图 用法 _testView = [[NNValidationView all

  • node.js WEB开发中图片验证码的实现方法

    用node做web开发很多都可能碰到需要验证码的地方,之前在github上搜索,有一些比如node-captcha等的类库,都需要依赖第三方的图形处理库或者软件,像我之前安装cario这个图形库时,真是费了好大一番劲,但是其实我们只用到了这些图形库的一点点小功能,比如图片的尺寸修改裁剪,或者生产验证码. 先介绍一下CImg这个c++的图形库吧,CImg是一个跨平台的C++的图像处理库,提供了加载.处理.显示.保存等一系列功能,最吸引人的地方是整个图形库就一个CImg.h这个文件,所以非常的便携绿

  • Java仿12306图片验证码

    Java仿12306图片验证码

    由于要做一个新项目,所以打算做一个简单的图片验证码. 先说说思路吧:在服务端,从一个文件夹里面找出8张图片,再把8张图片合并成一张大图,在8个小图里面随机生成一个要用户验证的图片分类,如小狗.啤酒等.在前端,访问这个页面时,把图片加载上去,用户在图片上选择提示所需要的图片,当用户点登陆时,根据用户选择的所有坐标判断所选的图片是不是实际上的验证图片. 先放两张效果图: 为了让文件查找比较简单,在图片文件结构上可以这样: 这样方便生成用户要选择的Key图片,和取出8张小图合并成大图. 上代码:这是选

  • Java实现图片验证码具体代码

    Java实现图片验证码具体代码

    本文实例为大家分享了Java图片验证码代码,供大家参考,具体内容如下 网页显示效果: index.jsp 使用两种方式强制图片更新: 1.设置图片输出时不缓存. 2.用js改变请求的地址. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> <title>第一个web项目的主页</

  • java web中图片验证码功能的简单实现方法

    用户在注册网站信息的时候基本上都要数据验证码验证.那么图片验证码功能该如何实现呢? 大概步骤是: 1.在内存中创建缓存图片 2.设置背景色 3.画边框 4.写字母 5.绘制干扰信息 6.图片输出 废话不多说,直接上代码 package com.lsgjzhuwei.servlet.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buffer

  • Java版仿QQ验证码风格图片验证码

    Java版仿QQ验证码风格图片验证码

    本文为大家分享了Java版仿QQ验证码风格图片验证码,具体内容如下 功能包括:自定义图片尺寸和字符长度,随机背景颜色和字符颜色,随机字符偏移角度,字符平滑边缘,干扰线,噪点,背景扭曲. 本来想做字符扭曲的,不知道怎的先生成文字再扭曲就报错了,先就这样吧,希望有高手能帮助修正一下. 需要说明的是之所以有几分像QQ的验证码感觉是因为这个Algerian字体,如果系统没有的话需要自行安装,百度搜字体名能下载到,丢系统Fonts文件夹就行. 效果图: package hh.com.util; impor

  • python 图片验证码代码

    下面是一个实战项目的结果. 复制代码 代码如下: #coding: utf-8 import Image,ImageDraw,ImageFont,os,string,random,ImageFilter def initChars(): """ 允许的字符集合,初始集合为数字.大小写字母 usage: initChars() param: None return: list 返回允许的字符集和 for: picChecker类初始字符集合 todo: Nothing &quo

随机推荐