Ajax应用研究-注册应用

最近发现Ajax在用户注册表单和用户登录表单方面应用，最能体现Ajax的交互特点，因此又是写了一个习作！

演示效果如下图：

<!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>

PS.本是一个习作,不想公开的,没想到有很多人都想要,算了,我就把相关文件打包一下了,提供大家下载研究了!

本文配套源码

时间： 2024-10-29 09:30:13

Ajax应用研究-注册应用的相关文章

jquery+ajax实现注册实时验证实例详解_jquery

本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector

sql server-c#+jquery+ajax实现注册登录功能

问题描述 c#+jquery+ajax实现注册登录功能 数据库是sql server 客户端和服务器端怎么交换数据 页面代码如下 <nav class="main_nav"> <ul> <li ><a class="cd-signin" href="#0">登录</a></li> <li ><a class="cd-signup" hre

ASP.NET Ajax验证注册用户名

问题描述 Sys.Net.WebServiceProxyinvoke方法功能:调用指定的Web服务方法.语法:varwebRequest=Sys.Net.WebServiceProxy.invoke(path,methodName,useHttpGet,parameters,succeededCallback,failedCallback,userContext,timeout);参数参数说明pathWeb服务URL.path可设置为完全限定URL(http://www.mySite.com/m

ajax 验证注册用户名是否己经注册代码

  <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <script language="javascript教程"> function createxmlhttp()  {   

Ajax检测注册用户是否存在

HTML代码如下: LoginValidate.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoginValidate.aspx.cs" Inherits="LoginValidate" %> <html xmlns="http://www.w3.org/1999/xhtml" > <head run

jQuery的Ajax用户认证和注册技术实例教程(附demo源码)_jquery

前面介绍了<jquery+ajax注册实时验证>及<jQuery使用$.ajax进行即时验证的方法>.这里进一步总结了jQuery的Ajax用户认证和注册技术.分享给大家供大家参考,具体如下: Ajax 表单提交是一个功能强大的技术,提供一种发送 web 表单的方法,无需重载浏览器窗口.jQuery 库让您使用 Ajax 表单提交功能进一步提供一个方便快捷的方法,以少量代码生成可用 Ajax 的 Web 表单.在本文中,学习如何使用 jQuery 创建基础 Ajax 表单提交,以及

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

ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这对于用户来说,体验上是很不友好的. ajax的模式几乎是所有站点应用的需求,ajax作为前端无刷新验证,可以和所有后台语言进行组合使用,比如asp+ajax,php+ajax,.net+ajax等等组合,这里主要讲解的是php+ajax的注册验证. 下面的验证是一个完整的实例,我们在网站上面注

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">

ajax-关于Ajax 入门一直出错

问题描述 关于Ajax 入门一直出错 在客户端页面输入自己的名字,服务端返回'你好+名字'执行会有错误提示AjaxGet()函数未定义我是在VS下开发的给你们贴出目录和源码 HTMLPage.htm是客户端页面,源码如下<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi