教程集 www.jiaochengji.com
教程集 >  脚本编程  >  Asp  >  正文 ajax注册应用一

ajax注册应用一

发布时间:2016-10-17   编辑:jiaochengji.com
教程集为您提供ajax注册应用一等资源,欢迎您收藏本站,我们将为您提供最新的ajax注册应用一资源

注:转载请注明出处(www.jiaochengji.com)

今天没事又写了一个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">
<!--
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>
reg.htm文件没什么好说的.

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

您可能感兴趣的文章:
AJAX在PHP中的简单使用
ASP.NET AJAX in ASP.NET 3.5 and Visual Studio 2008
jQuery源码分析系列(31) : Ajax deferred实现
[原创]ajax 实现用户注册功能教程四
基于jquery+thickbox仿校内登录注册框
在jQuery 1.5中使用deferred对象的代码(翻译)
PHP怎么防止账号批量注册
ajax检查用户名是否注册的实例代码(图文)
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
[原创]ajax 实现用户注册功能教程三

上一篇:什么是FSO? 下一篇:asp Split函数 用法
[关闭]
~ ~