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

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

注意:在reloadcode函数中,我们在code.asp后面加了一个随机参数,这样每次的链接地址都不一样,从而达到更新的目的。
上一篇:下拉列表跳转,而部分不跳转
下一篇:CSS实现的文字竖排效果
全部评论:
haha | 2010-7-23 17:39:00 |
| 很有用!!! | |
^-^ | |
kkk | 2010-1-18 15:35:00 |
| 很有用! | |
不客气! | |
Kally | 2009-9-18 9:57:00 |
| 太解决问题了 | |
![]() | |
过客 | 2009-5-13 11:08:00 |
| 哈哈!又学到了东西,谢谢! | |
^-^ | |
学有专长 | 2009-4-9 16:55:00 |
| 真不错,谢谢了 | |
^-^ | |
hehe | 2009-4-8 12:28:00 |
| 不错。 | |
^-^ | |
question | 2008-11-26 17:17:00 |
| code.asp在哪里下载? | |
![]() | |
zhd | 2008-11-19 10:29:00 |
| 挺方便 | |
![]() | |
踏雪 | 2008-3-13 12:00:00 |
| 哈 终于找到解决的办法了,谢谢拉 | |
^-^ | |
qw | 2008-1-24 2:40:00 |
| 谢谢了 | |
不客气 | |
linko | 2007-12-30 0:16:00 |
| 总算找到了。。。先做做.. | |
^-^ | |
charles | 2007-12-10 22:58:00 |
| 哥,我是一个新手,做起东西来很困难, 你的咚咚就是及时雨。 感激涕零。 | |
^-^ | |
过客 | 2007-9-20 12:36:00 |
| 谢谢你啊 看贴必回!!!!!!!!!!!!!!! | |
^-^ | |
游侠 | 2007-9-14 22:14:00 |
| safecode 指的是什么? | |
那张验证码图片的ID名 | |
申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“
无刷新更换验证码图片
”的原作者,若侵犯您的版权,请与我联系!在此请您原谅我的幼稚和无知!联系方法:email:ahuinan@21cn.com QQ:106494262
感谢以下网友对网站提出的建议:
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)
感谢以下网友对网站提出的建议:
1、感谢“蓝树叶kiss”网友发现一个评论漏洞。(2009-2-28)
2、感谢“陈臣”对程序优化和seo方面的建议。(2009-3-18)
文章档案
- 作者:浔阳江客
- 来源:无优脚本
- 日期:2007-6-10 8:45:00
- 点击:7633
网友投票(您觉得这篇文章怎样?)
请稍侯......
请稍侯......
文章阅读排行
随便看看
最新评论
- 不錯的東東,
打包demoupload.asp,js部分尾多了一個逗號
有空多交流:QQ 37787553 - 不錯的東東,
打包demoupload.asp,js部分尾多了一個逗號
有空多交流:QQ 37787553 - 站长 好!
- 网站不错<br>不知道URl是用什么生成的?
- update A
set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - update A
set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - 例子举得不好,为什么不直接用update解决呢?
update set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - 例子举得不好,为什么不直接用update解决呢?
update set A.OriginSalary=A.OriginSalary+B.AddSalary
from dbo.OriginSalary as A left join dbo.AddSalary as B on A.O_ID=B.O_ID - 恭喜站长改进 支持
- 改版了? 牛叉
- 网站不错^-^ 多多向站长学习
- 212
- 啊 是
haha
^-^