最近发现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>
