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 == 0return;
$(
"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 == "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.mzph.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…