最近发现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" > </ 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" > </ th >
< td bgcolor ="#FFFFFF" >< input type ="submit" name ="Submit" value ="提交" ></ td >
</ tr >
</ table >
</ body >
</ html >
"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" > </ 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" > </ th >
< td bgcolor ="#FFFFFF" >< input type ="submit" name ="Submit" value ="提交" ></ td >
</ tr >
</ table >
</ body >
</ html >
PS.本是一个习作,不想公开的,没想到有很多人都想要,算了,我就把相关文件打包一下了,提供大家下载研究了!下载地址:http://www.klstudio.com/demo/ajax/reg.rar