ajax註冊應用一

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

注:轉載請註明出處(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註冊應用二

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More