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 >