Ajax的注册应用
最近发现Ajax在用户注册表单和用户登录表单方面应用,最能体现Ajax的交互特点,因此又是写了一个习作!
演示效果
新开窗口地址: http://www.klstudio.com/demo/ajax/reg.htm
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ajax注册应用</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="javascript" src="js/common.js"></script> <script language="javascript" src="js/prototype.js"></script> <script language="javascript" src="js/passwordstrength.js"></script> <script language="javascript" src="reg.js"></script> <style type="text/css"> <!-- body,td,th,div,input { font-family: Courier New, Courier, mono; font-size: 12px; } body { margin: 0px; } .FrameDivPass{ background-color: #F7F7F7; border: 1px solid #EEEEEE; padding: 2px; height: 100%; float: left; } .FrameDivPass input{ background-color: #FFFFFF; width: 150px; float: left; border: 1px solid #6FBE44; } .FrameDivPass div{ color: #999999; float: left; margin-right: 5px; margin-left: 10px; height: auto; width: auto; display: block; } .FrameDivWarn{ background-color: #FFFBE7; border: 1px solid #B5B5B5; padding: 2px; height: 100%; float: left; } .FrameDivWarn input{ background-color: #FFFFFF; width: 150px; float: left; border: 1px solid #FF0000; } .FrameDivWarn div{ color: #333333; float: left; margin-right: 5px; margin-left: 10px; height: auto; width: auto; display: block; } .FrameDivNormal{ border: 1px solid #FFFFFF; padding: 2px; height: 100%; float: left; background-color: #FFFFFF; } .FrameDivNormal input{ background-color: #FFFFFF; width: 150px; float: left; border: 1px solid #999999; } .FrameDivNormal div{ color: #333333; float: left; margin-right: 5px; margin-left: 10px; height: auto; width: auto; display: block; } #checkBtn{ float: left; } #checkDiv{ color: #333333; float: left; margin-right: 5px; margin-left: 10px; height: auto; width: auto; display: block; } --> </style> <script language="javascript"> var icon = '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">'; var ns = ["usr","pwd","repwd","eml"]; function changeUsr(){ if($("checkBtn").disabled) $("checkBtn").disabled = false; } function checkUsr(s){ var ma = ["用户名(3-16位)!","用户名由数字、英文、下划线、中杠线组成!"]; if(!limitLen(s,3,16)){ showInfo("usr",ma[0]); return false; } if(!hasAccountChar(s)){ showInfo("usr",ma[1]); return false; } showInfo("usr"); return true; } function checkPwd(s){ var ma = ["密码(5-16位)!","密码不能包含中文或全角符号!","两次输入的密码不一致!"]; ps.update(s); if(!limitLen(s,5,16)){ showInfo("pwd",ma[0]); return false; } if(hasChineseChar(s)){ showInfo("pwd",ma[1]); return false; } if(limitLen($F("repwdInput"),5,16)){ if(trim($F("repwdInput")) == trim(s)){ showInfo("pwd"); showInfo("repwd"); return true; }else{ showInfo("pwd",ma[2]); return false; } } showInfo("pwd"); return true; } function checkPwd2(s){ var ma = ["确认密码(5-16位)!","密码不能包含中文或全角符号!","两次输入的密码不一致!"]; if(!limitLen(s,5,16)){ showInfo("repwd",ma[0]); return false; } if(hasChineseChar(s)){ showInfo("repwd",ma[1]); return false; } if(limitLen($F("pwdInput"),5,16)){ if(trim($F("pwdInput")) == trim(s)){ showInfo("pwd"); showInfo("repwd"); return true; }else{ showInfo("repwd",ma[2]); return false; } } showInfo("repwd"); return true; } function checkEml(s){ var ma = ["请输入常用邮件!","邮件格式不正确!"]; if(s.length < 5){ showInfo("eml",ma[0]); return false; } if(!isEmail(s)){ showInfo("eml",ma[1]); return false; } showInfo("eml"); return true; } function showInfo(n,s){ var fdo = $(n+"FrameDiv"); var ido = $(n+"InfoDiv"); if(typeof s == 'undefined'){ fdo.className = "FrameDivPass"; ido.innerHTML = "填写正确!"; }else{ fdo.className = "FrameDivWarn"; ido.innerHTML = icon + s; } } //======================================================; function loadCheck(){ if(trim($F('usrInput')).length == 0) return; $("checkBtn").disabled = true; var o = $("checkDiv"); o.innerHTML = getLoadInfo(); loadAjaxData("reg.asp",{usr:$F('usrInput')},successCheck,errorCheck); } function successCheck(v){ var o = $("checkDiv"); o.innerHTML = getCheckHTML(v.responseText); } function errorCheck(){ $("checkBtn").disabled = false; var o = $("checkDiv"); o.innerHTML = getErrorInfo(); } function getCheckHTML(s){ s = (s == "1")? "恭喜您,用户名可以注册!":"对不起,该用户名已经被注册!"; return s; } //======================================================; function getLoadInfo(){ return '<img src="images/loading.gif" width="16" height="16" border="0" align="absmiddle">正在加载数据...'; } function getErrorInfo(){ return '<img src="images/warning.gif" width="14" height="14" border="0" align="absmiddle">数据加载失败!'; } //======================================================; function initPage(){ for(var i=0;i<ns.length;i++){ $(ns[i]+"Input").value = ""; } } </script> </head> <body onLoad="initPage();"> |
PS.本是一个习作,不想公开的,没想到有很多人都想要,算了,我就把相关文件打包一下了,提供大家下载研究了!下载地址:http://www.klstudio.com/demo/ajax/reg.rar
Trackback:
TrackBack URL for this entry:
http://www.klstudio.com/cmd.asp?act=tb&id=92
Comments:
reg.js下载不了。试过几个地址都不可以。。能否提供一份研究一下?
chenhuiba@163.com
ps.update
问一下。在密码那一块你的这个是什么意思呢?可否解释一下?
ajax可以利用到p2p中
to magic:
reg.js文件没有的,就是页面上面的代码!
update就是数据更新的意思呀!
loadAjaxData("reg.asp",{usr:$F('usrInput')},successCheck,errorCheck);
reg.asp??如何得到数据库中是否的数据?
你好.看见你写的注册模块很不错.能否发个源码给我.非常感谢!
学习Flash,高手多多指点!
着急啊!!帮忙发一个给我好吗!
to 张严峻:
这些都是客户端代码,你看到就源码!
你好,能把全部的源码打包发给我吗!!
我的油箱是zyj0017@126.com!
你的源代码下来后运行不了啊!帮忙发个完整的带数据库的好吗?
多谢! 很实用!
http://www.3linkserver.com3LINK
有C#版的吗
不错。想研究一下,俺也要完整的带数据库的好吗?,偶的邮箱:spyecho@qq.com
确实不错,能不能给我一个带数据库的压缩包,小弟将感激万分!
晕,我这个本来就没有数据库!
楼主精神可嘉啊!3q!
这个应用太棒了,先赞一个,学到很多东西。loadAjaxData的确太帅了,但改了很长时间都不知道sendAjaxData该怎么用,如果楼主再写一个用来rs.Update的Asp文件那就更棒了,非常感谢提供!我会每天光顾你的Blog,期待sendAjaxData。
楼主,能不能提供一份给我呢~~页面上的地址不能下载~~
我的邮箱是feng_hp@tom.com
谢谢了~~
请问$F
这个是什么意思
$F()这个就是返回form表单元素的value值!
这个效果最初在ALIBABA上看到过,当时挺震撼的,AJAX太酷了,前几天在这里看到同样的效果,还有源码,实在是兴奋!
但是如果有几个必填项没填就点提交,报错的效果怎么来跟submit来关联呢?
to shawn:这只要在<form onSubmit="checkEl();">增加onSubmit事件就可以了
有没有这方面的源码参考一下呢?
请问如果选项填错了,不让用户提交数据要怎么做,就是如果有一个地方不正确,就不让点击提交按扭,要不用户填错了还是能提交数据,谢谢了,我QQ4793947
to shawn:我不是已经提供下载文件包了吗?
to uusky:用户数据不对,不是不让提交了吗!
"这只要在<form onSubmit="checkEl();">增加onSubmit事件就可以了"
这个checkEl()Javascript函数应该怎么写呢?
帮帮帮帮我...谢谢
ASP..这些攻能我都全会用....但是.我现在想用JSP在做,,也就是说.只要把REG.ASP.
改成JSP的页面...但是...就得不到.USR 的值了.(String username=request.getParmeter("usr");),,其它东西我想应该不用改吧.但是为什么就是返回不了值呢????不知道谁可以..帮忙一下...
还有就是把..reg.js 那文件传给我..麻烦了.
楼主谢谢谢你啦.小妹妹在此先谢过了.gang368@sohu.com
to slamdunk:reg.js文件这个就是页面里的那段js代码,我当时没有忘记删除了!
至于那个reg.asp,你的改写应该没有错的,可能是其他原因吧,你可以做一个最简单的表单来测试一下!
喔 谢谢了..
我把reg.asp 写成了SERVErleT了..很好用..而且这样安全更高...西西!
对了.小妹妹再问.楼主一个问题...
帮我解决一下..提交的时候的问题..
你是怎么在点提交时..检察上边的数据..比如..在别人输入错误数据的时候.或是没输入数据的时候..点提交是没有反应的...这个怎么做..楼主...帮帮我呀....谢谢咯...
这个可以通过form标签的onSubmit来处理的
.喔.谢谢咯.
你加我.QQ吧.帅多多..173260270
onSubmit 这个怎么写呀!我用了没反应呀.
是个好东西哦。谢谢哈,
学习,感谢:-)
onFailure: f 这个方法我用了怎么没什么效果?
请多多帮忙解释一下怎么用!谢谢了!!!
请问 common.js 里出现很多 p.test() 这个test是什么
to wdw:
onFailure主要返馈Ajax在请求服务端数据时出错时,调用的方法!
to 请教:
p.test()是js里的正则表达式调用的方法,你可以到google上搜索一下.test()主要是进行数据匹配!
谢谢您!我在百度怎么都没搜到,才来打搅呵呵
不好意思,还有个问题,
reg.htm 里面
checkpwd()里有代码
if(limitLen($F("pwdInput"),5,16)){
if(trim($F("pwdInput")) == trim(s)){
showInfo("pwd");
showInfo("repwd");
return true;
}
这里的$F()是在哪里定义的我只找到function $()的定义
不好意思找到了
var $F = Form.Element.getValue;
你好 能不能给个带数据库的 谢谢
我做得实例并没有用到数据库呀,数据库使用和原来asp调用数据库并无区别呀
作者的代码 并没有写form表单
而他说的onsubmit="checkEl()"也没有写
所以说 按了提交 还得再一次的检查各个元素是否填写正确。
然而他做的检查在填写的时候就显示了信息,那么按了提交检查数据时不再可能分别调用每个checkQQ(s)去检查数据是否填写正确,所以,在按了提交后,只是检查它有没有填写数据,就算是我乱填的数据一样被提交。那么怎么解决?
那么你在提交的时候,再分别检查每一个函数,分别获得每个文本框的值,再传入进去每个检查的函数,
只有当它们返回的值都为true时,这是才通过提交。
暂时我是这么想的,不知道还有什么好的办法。
这个源码放到我的网站就可以用了吗?我还需要注意哪些事项
你可以直接使用的!因为这部分都是客户端代码,所以代码你都可以看到!
作者的代码 并没有写<form>表单
而他说的onsubmit="checkEl()"也没有写
请问,提示的错误怎么和button想关联 ?
不然即使有错误还是能提交 ...
错误信息怎么和button关联 ?
你的示例没有<form> ,现在即使有错误还是能提交 !`
<form onSubmit="checkEl();">增加onSubmit事件
function checkEl()
则怎么写?
给一个吧 ,邮箱写在上面了!!!!谢谢谢谢在谢谢!!![]()
如果是通过onSubmit事件的话应该下面这样写
<form onSubmit="return checkEl();">
function checkEl(){
//如果检查有问题的话,用下面的代码,就会中止form表单提交的
return false;
//如果检查没有问题的话,就用下面的代码,就是提交form表单信息了
return true;
}
为什么我用该项目,在access下可以,而在sql 2000下却不行,总是显示一个内容,不是可以,就是不可以。难道有什么区别吗?特别说明:单独执行asp的数据库查询没有问题,返回的值也正确,搞了好几天,没有弄明白,希望指教。
这个技术和你用什么数据库是没有关系的
我想是你数据库操作那部分代码有问题!
如果是通过onSubmit事件的话应该下面这样写
<form onSubmit="return checkEl();">
function checkEl(){
//如果检查有问题的话,用下面的代码,就会中止form表单提交的
return false;
//如果检查没有问题的话,就用下面的代码,就是提交form表单信息了
return true;
}
希望作者能把代码写全,本人太菜实在不知道怎么写,谢谢
本人QQ:515659,希望可以指点
楼主非常有耐心, 精神可嘉啊! 謝謝!
很棒!路过顶下!希望能够把代码写的更完善些~~
谢谢~
再问下prototype.js的作用是什么?
谢谢kinglong,请教:
我将reg.asp改为reg.aspx
string usrName;
usrName = "kinglong";
if(Request.QueryString["usr"]==string.Empty)
Response.Write("0");
else
if(usrName== Request.QueryString["usr"].Trim())
Response.Write("0");
else
Response.Write("1");
不知道为什么,任何用户名都返回“对不起,该用户名已经被注册!”
同志们,以上问题请回答啊
楼主,你想晕死掉我啊
我写的用户注册
http://www.mlcq.net/2008/06/11/ajax-jquery/
有完整的后台检测。用户名重复。
Post a comment:(为了防止垃圾留言信息,您的留言需要通过审核才能显示出来)
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

楼主打个包提供一下下载吧!感谢