最近發現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>
PS.本是一個習作,不想公開的,沒想到有很多人都想要,算了,我就把相關文件打包一下了,提供大家下載研究了!下載地址:http://www.klstudio.com/demo/ajax/reg.rar