无刷新更换验证码图片

       自从读了《网站重构》这本书,现在对网站设计的思想有了根本性的改变。国内越来越多的媒体也极度关注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是一个生成图片的程序文件。为了能够更新验证码的内容,可以在图片旁边加一个更新的链接,单击触发图片重载事件,完成图片验证码的更换。具体代码如下:

<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后面加了一个随机参数,这样每次的链接地址都不一样,从而达到更新的目的。


上一篇:下拉列表跳转,而部分不跳转

下一篇:CSS实现的文字竖排效果

留下脚印压缩包密码:sosuo8
名字:
全部评论:
评论haha2010-7-23 17:39:00
很有用!!!
答复^-^
评论kkk2010-1-18 15:35:00
很有用!
答复不客气!
评论Kally2009-9-18 9:57:00
太解决问题了
答复
评论过客2009-5-13 11:08:00
哈哈!又学到了东西,谢谢!
答复^-^
评论学有专长2009-4-9 16:55:00
真不错,谢谢了
答复^-^
评论hehe2009-4-8 12:28:00
不错。
答复^-^
评论question2008-11-26 17:17:00
code.asp在哪里下载?
答复
评论zhd2008-11-19 10:29:00
挺方便
答复
评论踏雪2008-3-13 12:00:00
哈 
终于找到解决的办法了,谢谢拉
答复^-^
评论qw2008-1-24 2:40:00
谢谢了
答复不客气
评论linko2007-12-30 0:16:00
总算找到了。。。先做做..
答复^-^
评论charles2007-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)
文章档案
  • 作者:浔阳江客
  • 来源:无优脚本
  • 日期:2007-6-10 8:45:00
  • 点击:7633
网友投票(您觉得这篇文章怎样?)
loadding...请稍侯......