ajax注册应用一

注:转载请注明出处(www.111cn.net)

今天没事又写了一个ajax+asp注册应用,下面来讲一讲.

分为三部份,第一部份就是reg.htm文件,第二部分是js,第三部分是asp文件了,下面我就来一一讲解.

首先来看看第一部份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">

</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>
reg.htm文件没什么好说的.

请继续查看:ajax注册应用二

时间： 2024-10-27 06:50:38

ajax注册应用一

ajax注册应用一的相关文章

Ajax注册用户时实现表单验证_AJAX相关

php+ajax注册实时验证功能_php实例

ajax 注册页面检测效果二

ajax 注册验证

ajax 注册页面检测效果

Ajax注册用户时实现表单验证

ASP+ajax注册即时提示程序代码_应用技巧

asp.net AJAX注册类_实用技巧

JQuery运用ajax注册用户实例(后台asp.net)_实用技巧