Ajax的注冊應用

最近發現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">&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>

轉載于:https://www.cnblogs.com/vmusicworm/archive/2008/06/06/1215069.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/380018.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/380018.shtml
英文地址,請注明出處:http://en.pswp.cn/news/380018.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java——集合(模擬斗地主洗牌和發牌進行排序)

//改進版&#xff0c;沒有進行按牌的地位從小到大排序 package com.yy.test;import java.util.ArrayList; import java.util.Collections;public class Test2 {/*** * A&#xff1a;案例演示* 模擬斗地主洗牌核發牌&#xff0c;牌沒有排序* * 分析&#xff1a;* 1&#xff0c;…

應用程序控件

活動指示器 當任務或進程已經完成時&#xff0c;活動指示器就會消失。推薦您使用這種默認行為&#xff0c;因為用戶期望在有動作發生時看到活動指示器&#xff0c;而且他們會將靜止不動的活動指示器與停滯的進程聯想到一起。 要了解如何顯示網絡活動指示器&#xff0c;請參考UI…

離散數學與集合論_離散數學中的集合論和集合類型

離散數學與集合論集合論 (Set theory) The set is a well-defined collection of definite objects of perception or thought and the Georg Cantor is the father of set theory. A set may also be thought of as grouping together of single objects into a whole. The ob…

XADD和NEG命令

XADD 交換相加指令&#xff0c;先交換然后相加 比如說&#xff1a; xadd eax&#xff0c;ecx /* 相當于&#xff1a;先執行&#xff1a;xchg eax,ecx然后執行&#xff1a;add eax,ecx */此時eax2&#xff0c;ecx3&#xff0c;執行完&#xff1a;eax5&#xff0c;ecx2 neg …

Visual C# 2008+SQL Server 2005 數據庫與網絡開發--11.3.2 LINQ to SQL對數據庫建模

Visual Studio 2008版本中為LINQ to SQL提供了一個特別的設計器&#xff0c;使用這個設計器可以很方便的將數據庫可視化地轉換為LINQ to SQL對象模型。在LINQ to SQL中&#xff0c;設計器在關系數據庫的數據模型和開發語言之間建立一座橋梁。當應用程序運行時&#xff0c;LINQ …

Java——異常處理(鍵盤錄入一個整數,輸出其對于二進制)

例題&#xff1a; 鍵盤錄入一個int類型的整數&#xff0c;對其求二進制表現形式 如果錄入的整數過大&#xff0c;給予提示&#xff0c;錄入的整數過大&#xff0c;請重新錄入一個整數BigInteger 如果錄入的是小數&#xff0c;給予提示&#xff0c;錄入的是小數&#xff0c;請…

認清SQL_Server_2005的基于行版本控制的兩種隔離級別

--認清SQL_Server_2005的基于行版本控制的兩種隔離級別--By:zc_0101 Date:2010-03-31--快照隔離級別(snapshot)和已提交讀快照隔離級別(read committed snapshot)--特點&#xff1a;在這兩種隔離級別下&#xff0c;讀取數據時不再請求共享鎖&#xff0c;而且永遠不會與修改進程…

Java SecurityManager checkPermission()方法與示例

Syntax: 句法&#xff1a; public void checkPermission(Permission perm);public void checkPermission(Permission perm, Object cntxt);SecurityManager類的checkPermission()方法 (SecurityManager Class checkPermission() method) checkPermission() method is availa…

匯編test指令

功能&#xff1a;將兩個操作數進行邏輯與運算&#xff0c;并根據運算結果設置相關的標志位&#xff0c;并不改變操作數1和操作數2的值 test 操作數1&#xff0c;操作數2我們經常用test來判斷一個值是否為0&#xff0c;用法&#xff1a; test 操作數1&#xff0c;操作數1比如我…

CSS兼容IE/Firefox要點

首先我們說說firefox和IE對CSS的寬度顯示有什么不同&#xff1a; 其實CSS ’width’ 指的是標準CSS中所指的width的寬度&#xff0c;在firefox中的寬度就是這個寬度。它只包含容器中內容的寬度。而Internet Explorer ’width’則是指整個容器的寬度&#xff0c;包括內容&#x…

Java GregorianCalendar computeFields()方法與示例

GregorianCalendar類computeFields()方法 (GregorianCalendar Class computeFields() method) computeFields() method is available in java.util package. 在java.util包中提供了validateFields()方法 。 computeFields() method is used to compute the calendar fields and…

JS、JNS、JP(JPE)、JNP(JPO)指令詳解、從原理上解釋

JS 格式&#xff1a; js 地址當執行到JS指令時&#xff0c;如果標志位SF1&#xff0c;則跳轉到指定的地址&#xff0c;如果SF0&#xff0c;不跳轉 比如&#xff1a; cmp eax&#xff0c;ecx js 0040100c此時eax0&#xff0c;ecx1&#xff0c;執行完cmp命令&#xff0c;符號標…

zz如何保持專心

養成好習慣 養成在固定時間、固定地點專心學習工作的好習慣。 如果可能&#xff0c;在進入學習或者工作狀態前做一些小儀式&#xff0c;比如擺個姿勢&#xff0c;戴上學習帽什么的。就好像在運動前做準備活動一樣&#xff0c;給身體一個提示。讓頭腦做好準備 避免在學習前做什么…

Java——File類

一&#xff0c;File類的概述和構造方法 A&#xff1a;file類的概述 file類可以理解成一個路徑 文件夾或者是文件夾路徑 路徑分為絕對路徑和相對路徑 絕對路徑是一個固定的路徑&#xff0c;從盤符開始 這里的G&#xff1a;\TIM 就是一個絕對路徑&#xff0c;是一個固定的路…

Linux進程環境

一 main函數 當內核使用一個exec函數執行C程序時&#xff0c;在調用main函數之前先調用一個特殊的啟動例程&#xff0c;可執行程序將此例程指定為程序的起始地址。啟動例程從內核獲取命令行參數和環境變量&#xff0c;然后為調用main函數做好準備。 二 進程終止 進程終止的方式…

JO、JNO、JB、JNB命令詳解(從原理上)

JO 當執行到jo命令時&#xff0c;如果ZF標志位為1&#xff0c;則跳轉&#xff0c;反之不跳轉 add eax,ecx jo 00401000c此時eax7fff ffff &#xff0c;ecx0000 0001&#xff0c;執行完add命令&#xff0c;OF1&#xff0c;原因是eax存儲的最大值是7fffffff&#xff0c;再加1&a…

java 根據類名示例化類_Java類類getProtectionDomain()方法及示例

java 根據類名示例化類類class getProtectionDomain()方法 (Class class getProtectionDomain() method) getProtectionDomain() method is available in java.lang package. getProtectionDomain()方法在java.lang包中可用。 getProtectionDomain() method is used to return …

snagit 9.0注冊碼

8.0的注冊碼 A5CCU-RYNM4-C9ECC-5CWW9-B5R7B 5HCC5-4CCC9-NGXCM-XYDZ5-H6ER6 HLHAD-2CZLC-8XYDC-CC5CB-P289A D5DSC-WZCBM-JRHSC-QVTEV-TR7R8 snagit 9.0: name:Team Z.W.T sn:XMYU5-9CMBC-5SLBZ-DKML2-JE8M5 謝謝 name:Team Z.W.T sn: WDYMP-8ALRM-GVVV2-PH8VK-6MD27 Z…

vue3 配置 @符號

config,ts 配置 有 爆紅 安裝 npm install 一下 然后 配置 路徑提示功能 tsconfig.json 配置 路徑提示功能 一共這兩個路徑配置

android 頁面轉換

通過setContentView來改變布局 很簡單 ViewchangeActivity.java package idrc.change;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.widget.Button;public class ViewchangeActivity extends Activity {/** Called when the…