最近發現Ajax在用戶注冊表單和用戶登錄表單方面應用,最能體現Ajax的交互特點,因此又是寫了一個習作!
演示效果
新開窗口地址: http://www.klstudio.com/demo/ajax/reg.htm
下載地址:http://www.klstudio.com/demo/ajax/reg.rar
<!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>
