Ajax应用研究-注册应用

Submitted by kinglong on 2006-8-7 9:35:50

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();">
<table width="100%" border="0" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<th width="20%" bgcolor="#EEEEEE" scope="row">用户名</th>
<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="usrFrameDiv"><input name="usrInput" type="text" id="usrInput" maxlength="16" onKeyUp="checkUsr(this.value);changeUsr();" onFocus="checkUsr(this.value);">
<div id="usrInfoDiv"></div>
</div></td>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="row">&nbsp;</th>
<td bgcolor="#FFFFFF" ><input name="checkBtn" type="button" id="checkBtn" onClick="loadCheck();" value="检测用户名是否可用"> <div id="checkDiv"></div></td>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="row">密码强度</th>
<td bgcolor="#FFFFFF">
<script language="javascript">
var ps = new PasswordStrength();
ps.setSize("200","22");
</script>
</td>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="row">密码</th>
<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="pwdFrameDiv"><input name="pwdInput" type="password" id="pwdInput" maxlength="16" onKeyUp="checkPwd(this.value);" onFocus="checkPwd(this.value);">
<div id="pwdInfoDiv"></div>
</div></td>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="row">确认密码</th>
<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="repwdFrameDiv"><input name="repwdInput" type="password" id="repwdInput" maxlength="16" onKeyUp="checkPwd2(this.value);" onFocus="checkPwd2(this.value);">
<div id="repwdInfoDiv"></div>
</div></td>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="row">EMail</th>
<td bgcolor="#FFFFFF"><div class="FrameDivNormal" id="emlFrameDiv"><input name="emlInput" type="text" id="emlInput" onFocus="checkEml(this.value);" onKeyUp="checkEml(this.value);" maxlength="40">
<div id="emlInfoDiv"></div>
</div></td>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="row">&nbsp;</th>
<td bgcolor="#FFFFFF"><input type="submit" name="Submit" value="提交"></td>
</tr>
</table>
</body>
</html>

PS.本是一个习作,不想公开的,没想到有很多人都想要,算了,我就把相关文件打包一下了,提供大家下载研究了!下载地址:http://www.klstudio.com/demo/ajax/reg.rar

Posted in JavaScript, Tags:js  javascript  ajax  代码  学习  

Trackback:

TrackBack URL for this entry:
http://www.klstudio.com/cmd.asp?act=tb&id=92


Comments:

#359 On 2006-8-7 10:03:15 avram (e) said,

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

#363 On 2006-8-7 20:03:26 magic (e) said,

reg.js下载不了。试过几个地址都不可以。。能否提供一份研究一下？
chenhuiba@163.com

#364 On 2006-8-8 3:09:19 magic (e) said,

ps.update
问一下。在密码那一块你的这个是什么意思呢？可否解释一下？

#370 On 2006-8-8 19:23:10 P2P (e) said,

ajax可以利用到p2p中

#372 On 2006-8-9 9:05:33 kinglong (e) said,

to magic:
reg.js文件没有的，就是页面上面的代码！
update就是数据更新的意思呀!

#373 On 2006-8-9 9:30:34 dianpa (e) said,

loadAjaxData("reg.asp",{usr:$F('usrInput')},successCheck,errorCheck);

reg.asp??如何得到数据库中是否的数据？

#376 On 2006-8-10 9:57:11 张严峻 (e) said,

你好．看见你写的注册模块很不错．能否发个源码给我．非常感谢！

#377 On 2006-8-10 10:53:34 虎子 (e) said,

学习Flash，高手多多指点！

#379 On 2006-8-10 15:27:00 张严峻 (e) said,

着急啊!!帮忙发一个给我好吗!

#380 On 2006-8-10 16:40:23 kinglong (e) said,

to 张严峻:
这些都是客户端代码，你看到就源码！

#383 On 2006-8-11 8:37:58 张严峻 (e) said,

你好,能把全部的源码打包发给我吗!!
我的油箱是zyj0017@126.com!

#385 On 2006-8-11 16:28:50 张严峻 (e) said,

你的源代码下来后运行不了啊!帮忙发个完整的带数据库的好吗?

#391 On 2006-8-14 12:43:36 狂躁的野火 (e) said,

多谢! 很实用!

http://www.3linkserver.com3LINK

#410 On 2006-8-16 11:21:08 龙泉 (e) said,

Sad有C＃版的吗

#428 On 2006-8-22 10:50:56 echo (e) said,

不错。想研究一下，俺也要完整的带数据库的好吗?，偶的邮箱：spyecho@qq.com

#455 On 2006-9-4 17:18:28 小牛 (e) said,

确实不错，能不能给我一个带数据库的压缩包，小弟将感激万分！

#460 On 2006-9-6 9:12:10 kinglong (e) said,

晕，我这个本来就没有数据库！

#490 On 2006-9-14 18:04:11 过客 (e) said,

楼主精神可嘉啊!3q!

#513 On 2006-9-23 4:12:03 RomanYu (e) said,

这个应用太棒了，先赞一个，学到很多东西。loadAjaxData的确太帅了，但改了很长时间都不知道sendAjaxData该怎么用，如果楼主再写一个用来rs.Update的Asp文件那就更棒了，非常感谢提供！我会每天光顾你的Blog，期待sendAjaxData。

#517 On 2006-9-23 23:07:15 feng (e) said,

楼主，能不能提供一份给我呢~~页面上的地址不能下载~~
我的邮箱是feng_hp@tom.com
谢谢了~~

#541 On 2006-10-14 14:53:07 哈欠 (e) said,

请问$F
这个是什么意思

#546 On 2006-10-14 21:20:00 kinglong (e) said,

$F()这个就是返回form表单元素的value值!

#592 On 2006-11-2 10:14:59 shawn (e) said,

这个效果最初在ALIBABA上看到过，当时挺震撼的，AJAX太酷了，前几天在这里看到同样的效果，还有源码，实在是兴奋！

#593 On 2006-11-2 15:01:02 shawn (e) said,

但是如果有几个必填项没填就点提交，报错的效果怎么来跟submit来关联呢？

#597 On 2006-11-2 16:44:59 kinglong (e) said,

to shawn:这只要在<form onSubmit="checkEl();">增加onSubmit事件就可以了

#598 On 2006-11-3 9:06:18 shawn (e) said,

有没有这方面的源码参考一下呢？

#611 On 2006-11-7 15:20:35 uusky (e) said,

请问如果选项填错了,不让用户提交数据要怎么做,就是如果有一个地方不正确,就不让点击提交按扭,要不用户填错了还是能提交数据,谢谢了,我QQ4793947

#613 On 2006-11-7 19:46:05 kinglong (e) said,

to shawn:我不是已经提供下载文件包了吗?

#614 On 2006-11-7 19:46:52 kinglong (e) said,

to uusky:用户数据不对,不是不让提交了吗!

#668 On 2006-11-27 17:02:18 jyc (e) said,

"这只要在<form onSubmit="checkEl();">增加onSubmit事件就可以了"
这个checkEl()Javascript函数应该怎么写呢？

#691 On 2006-12-11 11:47:08 slamdunk (e) said,

帮帮帮帮我...谢谢
ASP..这些攻能我都全会用....但是.我现在想用JSP在做,,也就是说.只要把REG.ASP.

改成JSP的页面...但是...就得不到.USR 的值了.(String username=request.getParmeter("usr");),,其它东西我想应该不用改吧.但是为什么就是返回不了值呢????不知道谁可以..帮忙一下...

#693 On 2006-12-11 19:32:53 slamdunk (e) said,

还有就是把..reg.js 那文件传给我..麻烦了.

楼主谢谢谢你啦.小妹妹在此先谢过了.gang368@sohu.com

#698 On 2006-12-12 22:42:33 kinglong (e) said,

to slamdunk:reg.js文件这个就是页面里的那段js代码,我当时没有忘记删除了!
至于那个reg.asp,你的改写应该没有错的,可能是其他原因吧,你可以做一个最简单的表单来测试一下!

#720 On 2006-12-16 11:38:17 slamdunk (e) said,

喔 谢谢了..

我把reg.asp 写成了SERVErleT了..很好用..而且这样安全更高...西西!

#721 On 2006-12-16 14:26:15 slamdunk (e) said,

对了.小妹妹再问.楼主一个问题...

帮我解决一下..提交的时候的问题..

你是怎么在点提交时..检察上边的数据..比如..在别人输入错误数据的时候.或是没输入数据的时候..点提交是没有反应的...这个怎么做..楼主...帮帮我呀....谢谢咯...

#735 On 2006-12-16 17:18:32 kinglong (e) said,

这个可以通过form标签的onSubmit来处理的

#739 On 2006-12-18 8:47:48 slamdunk (e) said,

.喔.谢谢咯.

你加我.QQ吧.帅多多..173260270

#757 On 2006-12-25 13:12:01 slamdunk (e) said,

onSubmit 这个怎么写呀!我用了没反应呀.

#804 On 2007-1-7 13:48:56 古月文武 (e) said,

是个好东西哦。谢谢哈，

#859 On 2007-1-15 17:09:47 Leo.yang (e) said,

学习，感谢:-)

#907 On 2007-1-30 11:11:18 wdw (e) said,

onFailure: f 这个方法我用了怎么没什么效果?
请多多帮忙解释一下怎么用!谢谢了!!!

#1298 On 2007-4-3 16:16:25 请教 (e) said,

请问 common.js 里出现很多 p.test() 这个test是什么

#1302 On 2007-4-3 22:31:00 kinglong (e) said,

to wdw:
onFailure主要返馈Ajax在请求服务端数据时出错时,调用的方法!

#1303 On 2007-4-3 22:33:19 kinglong (e) said,

to 请教:
p.test()是js里的正则表达式调用的方法,你可以到google上搜索一下.test()主要是进行数据匹配!

#1306 On 2007-4-4 10:35:12 请教 (e) said,

谢谢您!我在百度怎么都没搜到,才来打搅呵呵

#1311 On 2007-4-4 14:52:52 请教 (e) said,

不好意思,还有个问题,
reg.htm 里面
checkpwd()里有代码
if(limitLen($F("pwdInput"),5,16)){
if(trim($F("pwdInput")) == trim(s)){
showInfo("pwd");
showInfo("repwd");
return true;
}


这里的$F()是在哪里定义的我只找到function $()的定义

#1312 On 2007-4-4 14:57:21 请教 (e) said,

不好意思找到了
var $F = Form.Element.getValue;

#1524 On 2007-4-25 11:45:02 风 (e) said,

你好 能不能给个带数据库的 谢谢

#1539 On 2007-4-27 8:39:10 kinglong (e) said,

我做得实例并没有用到数据库呀，数据库使用和原来asp调用数据库并无区别呀

#1734 On 2007-5-26 13:07:18 blackbat (e) said,

作者的代码 并没有写form表单
而他说的onsubmit="checkEl()"也没有写
所以说 按了提交 还得再一次的检查各个元素是否填写正确。
然而他做的检查在填写的时候就显示了信息，那么按了提交检查数据时不再可能分别调用每个checkQQ(s)去检查数据是否填写正确，所以，在按了提交后，只是检查它有没有填写数据，就算是我乱填的数据一样被提交。那么怎么解决？

那么你在提交的时候，再分别检查每一个函数，分别获得每个文本框的值，再传入进去每个检查的函数，
只有当它们返回的值都为true时，这是才通过提交。

暂时我是这么想的，不知道还有什么好的办法。

#1866 On 2007-6-16 19:06:17 sam (e) said,

这个源码放到我的网站就可以用了吗？我还需要注意哪些事项

#1868 On 2007-6-16 19:15:10 kinglong (e) said,

你可以直接使用的!因为这部分都是客户端代码,所以代码你都可以看到!

#1961 On 2007-7-4 10:05:51 simon803 (e) said,

作者的代码 并没有写<form>表单
而他说的onsubmit="checkEl()"也没有写
请问,提示的错误怎么和button想关联 ?
不然即使有错误还是能提交 ...

#1968 On 2007-7-5 9:06:03 simon803 (e) said,

错误信息怎么和button关联 ?
你的示例没有<form> ,现在即使有错误还是能提交 !`

#2268 On 2007-8-23 19:29:04 cpxtnt (e) said,

<form onSubmit="checkEl();">增加onSubmit事件

function checkEl()

则怎么写？

给一个吧 ,邮箱写在上面了！！！！谢谢谢谢在谢谢！！Surprise

#2303 On 2007-8-29 23:44:45 kinglong (e) said,

如果是通过onSubmit事件的话应该下面这样写
<form onSubmit="return checkEl();">
function checkEl(){
//如果检查有问题的话,用下面的代码,就会中止form表单提交的
return false;
//如果检查没有问题的话,就用下面的代码,就是提交form表单信息了
return true;
}

#2517 On 2007-9-28 18:11:25 wzh (e) said,

为什么我用该项目，在access下可以，而在sql 2000下却不行，总是显示一个内容，不是可以，就是不可以。难道有什么区别吗？特别说明：单独执行asp的数据库查询没有问题，返回的值也正确，搞了好几天，没有弄明白，希望指教。

#2520 On 2007-9-29 14:28:22 kinglong (e) said,

这个技术和你用什么数据库是没有关系的
我想是你数据库操作那部分代码有问题!

#2597 On 2007-10-14 2:41:20 allen (e) said,

如果是通过onSubmit事件的话应该下面这样写
<form onSubmit="return checkEl();">
function checkEl(){
//如果检查有问题的话,用下面的代码,就会中止form表单提交的
return false;
//如果检查没有问题的话,就用下面的代码,就是提交form表单信息了
return true;
}


希望作者能把代码写全,本人太菜实在不知道怎么写,谢谢
本人QQ:515659,希望可以指点

#2612 On 2007-10-16 16:26:20 迷你倉 (e) said,

楼主非常有耐心, 精神可嘉啊! 謝謝!

#2889 On 2007-11-29 16:15:00 蜗牛 (e) said,

很棒!路过顶下!希望能够把代码写的更完善些~~
谢谢~

#2890 On 2007-11-29 16:29:05 changleikkk (e) said,

再问下prototype.js的作用是什么?

#3716 On 2008-4-6 11:16:32 sea (e) said,

谢谢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");

不知道为什么，任何用户名都返回“对不起，该用户名已经被注册！”

#3808 On 2008-4-10 8:56:38 sea (e) said,

同志们,以上问题请回答啊

#4015 On 2008-4-25 15:43:39 死掉 (e) said,

楼主，你想晕死掉我啊

#4969 On 2008-8-6 22:22:28 乱78招 (e) said,

我写的用户注册
http://www.mlcq.net/2008/06/11/ajax-jquery/
有完整的后台检测。用户名重复。



Post a comment:(为了防止垃圾留言信息,您的留言需要通过审核才能显示出来)

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。