ajax在用户注册中的应用,类似淘宝网

最新推荐文章于 2025-04-25 12:01:45 发布
转载 最新推荐文章于 2025-04-25 12:01:45 发布 · 1.3k 阅读 · 0
文章标签：

#ajax #email #null #xmlhttprequest #url #table

本文介绍了一种利用Ajax技术在用户注册过程中实现即时反馈的方法。通过客户端验证用户名、密码及邮箱的有效性和唯一性，增强了用户体验并提高了数据安全性。
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ajax在用户注册上的简单应用</title>
<script language=javascript>
var username_help='用户名长度为20位以内，只能由中文、英文字母、数字、中横杠（"-"）、下横杠（"_"）组成。';
var username_error='用户名超过了20个字符！';
var username_error_1='您的用户名输入格式不正确!';
var username_exist='您填写的用户名已经存在!';
var username_null='用户名不能为空!';
var password_help='密码6-20位英文字母、数字组成。为了您的帐户安全，建议您使用字母大小与数字混合设置密码。';
var password_too_simple='您设置的密码过于简单！';
var password_too_length='您设置的密码长度超过了20个字符！';
var password_null='密码不能为空。';
var repassword_help='请再输入一次登陆密码！';
var repassword_unsame='输入的登陆密码不一致，请重新输入！';
var repassword_null='验证密码不能为空！';
var email_help='请认真填写,便于企业或我们与您联系。';
var email_error='您的邮箱填写不正确！';
var email_exist='您使用的邮箱已经注册过，请登陆或者输入其他邮箱地址！';
var email_null='邮箱不能为空！';
var word_help='word_help';
var word_error='word_error';
var oTR;
var oTD;
//该函数可以创建我们需要的XMLHttpRequest对象 
function getHTTPObject(){ 
 var xmlhttp = false; 
 if(window.XMLHttpRequest){ 
 xmlhttp = new XMLHttpRequest(); 
 if(xmlhttp.overrideMimeType){ 
 xmlhttp.overrideMimeType('text/xml'); 
 } 
 }else{ 
 try{ 
 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
 }catch(e){ 
 try{ 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
 }catch(E){ xmlhttp = false; } 
 } 
 } 
 return xmlhttp; 
} 
var http = getHTTPObject();

function getAbsLeft(e){
 var l=e.offsetLeft; 
 while(e=e.offsetParent) l += e.offsetLeft; 
 return l;
}
function getAbsTop(e) {
 var t=e.offsetTop; 
 while(e=e.offsetParent) t += e.offsetTop; 
 t=t+18;
 return t;
}
//-------------------------------------------------------
function onFouces(str){
 document.getElementById(str).className='word_help';
 if(str=='unamespan'){
 document.getElementById(str).innerHTML=username_help;
 }else if(str=='upw'){
 document.getElementById(str).innerHTML=password_help;
 }else if(str=='uhrtype'){
 document.getElementById(str).innerHTML=hrtype_help;
 }else if(str=='urpw'){
 document.getElementById(str).innerHTML=repassword_help;
 }else if(str=='uemail'){
 document.getElementById(str).innerHTML=email_help;
 }
}
function backState(str){ 
 if(str=='uname'){
 document.getElementById('username').keytype=0;
 document.getElementById('unamespan').className='gray';
 document.getElementById('unamespan').innerHTML=username_help;
 }else if(str=='pw'){
 document.getElementById('password').keytype=0;
 document.getElementById('upw').className='gray';
 document.getElementById('upw').innerHTML=password_help;
 }else if(str=="hr"){
 document.getElementById('hrlibtype').keytype=0;
 document.getElementById('uhrtype').className='gray';
 document.getElementById('uhrtype').innerHTML=hrtype_help;
 
 }else if(str=="rpw"){
 document.getElementById('passAgain').keytype=0;
 document.getElementById('urpw').className='gray';
 document.getElementById('urpw').innerHTML=repassword_help;
 
 }
 else if(str=="ue"){
 document.getElementById('email').keytype=0;
 document.getElementById('uemail').className='gray';
 document.getElementById('uemail').innerHTML=email_help;
 
 }
}

function checkUserName_1(obj_str,num,obj_str1){ 
 var obj=document.getElementById(obj_str);
 var obj_help=document.getElementById(obj_str1);
 obj.keytype=0;
 if(obj.value.length==0){
 obj.keytype=1;
 obj_help.innerHTML=username_null;
 obj_help.className=word_error;
 return false; 
 }
 if(obj.value.length>num){
 obj.keytype=1;
 obj_help.innerHTML=username_error;
 obj_help.className=word_error;
 return false; 
 }
 //检查是否有不符合规定的字符
 var name_str=obj.value;
 name_str=name_str.replace(/[/u4e00-/u9fa5]/g,'');
 name_str=name_str.replace(/[a-zA-Z0-9_]/g,'');
 name_str=name_str.replace(/-/g,''); 
 if(name_str!=''){ 
 obj.keytype=1;
 obj_help.innerHTML=username_error_1;
 obj_help.className=word_error;
 return false; 
 }
 //检查用户名是否存在
 
 var username =document.getElementById('username').value; 
 
 url="/chksn.asp?username="+username; //如果用户名存在，chksn.asp的返回结果必须是“您填写的用户名已经存在”
 // alert(url);
 http.open("GET",url,true); 
 http.onreadystatechange = handleHttpResponseForUserName_1; 
 http.send(null); 
 if(obj.keytype==0){
 backState("uname");
 } 
}
function handleHttpResponseForUserName_1(){ 
 if(http.readyState == 4){ 
 if (http.status == 200) { 
 returnStr=Trim(http.responseText); 
 if(returnStr=="您填写的用户名已经存在"){ 
 var obj_1=document.getElementById("unamespan"); 
 obj_1.innerHTML=username_exist;
 document.getElementById("username").keytype=1; 
 obj_1.className=word_error;
 return false;
 } 
 }
 }
}
function checkpw_1(obj_str,num,obj_str1){ 
 var obj=document.getElementById(obj_str);
 var obj_help=document.getElementById(obj_str1);
 obj.keytype=0;
 if(obj.value.length==0){
 obj.keytype=1; 
 obj_help.innerHTML=password_null;
 obj_help.className=word_error;
 return false;
 }
 if(obj.value.length<num){
 obj.keytype=1; 
 obj_help.innerHTML=password_too_simple;
 obj_help.className=word_error;
 return false;
 }
 if(obj.value.length>20){
 obj.keytype=1; 
 obj_help.innerHTML=password_too_length;
 obj_help.className=word_error;
 return false;
 }
 backState('pw');
}
function checkSame_1(obj_str,obj_str1,obj_targ){ 
 var obj=document.getElementById(obj_str);
 var obj1=document.getElementById(obj_str1);
 var obj_help=document.getElementById(obj_targ);
 obj.keytype=0; 
 if(obj1.value.length==0){
 obj.keytype=1; 
 obj_help.innerHTML=repassword_null;
 obj_help.className=word_error;
 return false;
 }
 if(obj.value!=obj1.value){
 obj.keytype=1; 
 obj_help.innerHTML=repassword_unsame;
 obj_help.className=word_error;
 return false;
 }
 backState('rpw');
}
function checkEmail_1(obj_str,obj_str1){ 
 var obj=document.getElementById(obj_str);
 var obj_help=document.getElementById(obj_str1);
 obj.keytype=0; 
 //验证电子邮件
 var str="";
 var email =obj.value;
 if(email.length==0){
 obj.keytype=1;
 obj_help.innerHTML=email_null;
 obj_help.className=word_error;
 return false; 
 }else if (email.length < 8)
 {
 obj.keytype=1;
 obj_help.innerHTML=email_error;
 obj_help.className=word_error;
 return false; 
 }else{
 if (email.indexOf(".") <=0 || email.indexOf("@") == -1)
 { obj.keytype=1;
 obj_help.innerHTML=email_error;
 obj_help.className=word_error;
 return false; 
 } 
 }

 url="/checkEmail.asp?email="+email; //如果email存在，checkEmail.asp的返回结果必须是“您使用的邮箱已经注册过，请登陆或者输入其他邮箱地址” 
 http.open("GET",url,true); 
 http.onreadystatechange = handleHttpResponseEmail; 
 http.send(null);
}

function handleHttpResponseEmail(){ 
 if(http.readyState == 4){ 
 if (http.status == 200) { 
 returnStr=Trim(http.responseText); 
 if(returnStr=="您使用的邮箱已经注册过，请登陆或者输入其他邮箱地址"){ 
 var obj_1=document.getElementById("uemail"); 
 obj_1.innerHTML=email_exist;
 document.getElementById("email").keytype=1; 
 obj_1.className=word_error;
 return false; 
 }else if(document.getElementById("email").keytype==0){
 backState('ue');
 }
 }
 }
}
//-------------------------------------------------------
function checkpw(obj,num){ 
 var rownum=obj.parentElement.parentElement.rowIndex; 
 obj.keytype=0;
 if(obj.value.length<num){
 obj.keytype=1;
 oTD=document.getElementById("reg_table").rows[rownum+1].cells[0]; 
 oTD.innerHTML="<span class='"+word_error+"'>"+password_too_simple+"</span>" 
 return false;
 }
 hidden_text(obj);
}
function checkSame(obj,obj_str1){ 
 var rownum=obj.parentElement.parentElement.rowIndex; 
 obj.keytype=0;
 if(obj.value!=document.getElementById(obj_str1).value){
 obj.keytype=1;
 oTD=document.getElementById("reg_table").rows[rownum+1].cells[0]; 
 oTD.innerHTML="<span class='"+word_error+"'>"+repassword_unsame+"</span>" 
 return false;
 }
 hidden_text(obj);
}
function show_text(obj){ 
 var rownum=obj.parentElement.parentElement.rowIndex;
 if(obj.keytype==0){
 oTR=document.getElementById("reg_table").insertRow(rownum+1);
 oTD=oTR.insertCell(0);
 oTD.colSpan=2;
 }else{
 oTD=document.getElementById("reg_table").rows[rownum+1].cells[0];
 }
 if(obj.keytype2=="uname"){
 oTD.innerHTML="<span class='"+word_help+"'>"+username_help+"</span>"
 }else if(obj.keytype2=="hrtype"){
 oTD.innerHTML="<span class='"+word_help+"'>"+hrtype_help+"</span>"
 }else if(obj.keytype2=="pw"){
 oTD.innerHTML="<span class='"+word_help+"'>"+password_help+"</span>" 
 }else if(obj.keytype2=="rpw"){
 oTD.innerHTML="<span class='"+word_help+"'>"+repassword_help+"</span>"
 }else if(obj.keytype2=="eml"){
 oTD.innerHTML="<span class='"+word_help+"'>"+email_help+"</span>"
 } 

}
function hidden_text(obj){ 
 var rownum=obj.parentElement.parentElement.rowIndex; 
 //if(obj.keytype==0){
 document.getElementById("reg_table").deleteRow(rownum+1);
 //}
}
function hidden_error(){
 document.getElementById("word_error").style.display='none';
}
function Trim(str) {
 return RTrim(LTrim(str));
}
function LTrim(str) { 
return str.replace(/^[ /t/n/r]+/g, "");
}

function RTrim(str) {
return str.replace(/[ /t/n/r]+$/g, "");
}
function validator()
{ 
 if(document.PersonForm.username.keytype==1)
 {
 return false; }
 if(document.PersonForm.password.keytype==1)
 {
 return false; }
 if(document.PersonForm.passAgain.keytype==1)
 {
 return false; } 
 if(document.PersonForm.email.keytype==1)
 {
 return false;}
 if(document.PersonForm.isaccept.checked==false)
 {
 alert("您是否接受协议？");
 document.PersonForm.isaccept.focus();
 return false;
 }
 return true;
}
</SCRIPT>
<STYLE type=text/css>
.word_help {
 BORDER-RIGHT: #00aaff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #00aaff 1px solid; PADDING-LEFT: 28px; BACKGROUND: url(ico_at.gif) #e7f7ff no-repeat 3px 2px; PADDING-BOTTOM: 4px; BORDER-LEFT: #00aaff 1px solid; WIDTH: 100%; LINE-HEIGHT: 110%; PADDING-TOP: 6px; BORDER-BOTTOM: #00aaff 1px solid
}
.word_error {
 BORDER-RIGHT: #ff3300 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ff3300 1px solid; PADDING-LEFT: 28px; BACKGROUND: url(ico_err.gif) #fff3ef no-repeat 3px 2px; PADDING-BOTTOM: 4px; BORDER-LEFT: #ff3300 1px solid; WIDTH: 100%; LINE-HEIGHT: 110%; PADDING-TOP: 6px; BORDER-BOTTOM: #ff3300 1px solid
}
BODY {
 BACKGROUND-IMAGE: none; BACKGROUND-COLOR: #b8b8b8
}
.gray {
 BORDER-RIGHT: #ffffff 0px solid; PADDING-RIGHT: 0px; BORDER-TOP: #ffffff 0px solid; PADDING-LEFT: 25px; FONT-SIZE: 12px; BACKGROUND: url(ico_xing.gif) #ffffff no-repeat 3px 10px; PADDING-BOTTOM: 4px; VERTICAL-ALIGN: middle; BORDER-LEFT: #ffffff 0px solid; WIDTH: 300px; COLOR: #999999; LINE-HEIGHT: 120%; PADDING-TOP: 8px; BORDER-BOTTOM: #ffffff 0px solid
}
.tip {
 BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid
}
.tip INPUT {
 BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #666666 1px solid; WIDTH: 137px; PADDING-TOP: 3px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 22px
}
</STYLE>
</head>
<body>
<FORM name=PersonForm onSubmit="return validator()" action=person.do?op=register method=post>
 <TABLE id=reg_table cellSpacing=0 cellPadding=0 width="94%" align=left border=0>
 <TBODY>
 <TR>
 <TD align=right width=120 height=50>用户名：</TD>
 <TD align=left width=168><INPUT onblur="checkUserName_1('username',20,'unamespan')" onfocus="onFouces('unamespan')" name=username keytype2="uname" keytype="1">
 <SPAN class=t></SPAN></TD>
 <TD align=left><SPAN class=gray id=unamespan>用户名长度为20位以内，只能由中文、英文字母、数字、中横杠（"-"）、下横杠（"_"）组成。</SPAN></TD>
 </TR>
 <TR>
 <TD align=right height=50>登录密码：</TD>
 <TD align=left><INPUT onblur="checkpw_1('password',6,'upw')" onfocus="onFouces('upw')" type=password maxLength=30 name=password keytype2="pw" keytype=1>
 </TD>
 <TD align=left><SPAN class=gray id=upw>密码6-20位字母、数字、字符组成。为了您的帐户安全，建议您使用字母大小与数字混合设置密码。</SPAN></TD>
 </TR>
 <TR>
 <TD align=right height=50>验证密码：</TD>
 <TD align=left><INPUT onblur="checkSame_1('password','passAgain','urpw')" onfocus="onFouces('urpw')" type=password maxLength=30 name=passAgain keytype2="rpw" keytype="1">
 </TD>
 <TD align=left><SPAN class=gray id=urpw>请再输入一次登陆密码。</SPAN></TD>
 </TR>
 <TR>
 <TD align=right height=50>E-MAIL：</TD>
 <TD align=left><INPUT onblur="checkEmail_1('email','uemail')" onfocus="onFouces('uemail')" maxLength=64 name=email keytype2="eml" keytype="1"></TD>
 <TD align=left><SPAN class=gray id=uemail>请认真填写,便于我们与您联系。</SPAN></TD>
 </TR>
 &nbsp;
 <TR>
 <TD align=right colSpan=2 height=66><INPUT class=input2 type=checkbox value=checkbox name=isaccept>
 接受<A href="#">《协议》</A></TD>
 <TD>&nbsp;&nbsp;&nbsp;
 <INPUT class=input_reg type=image height=26 width=104 src="buuton_reg.gif" border=0 name=image></TD>
 </TR>
 </TABLE>
</FORM>
</body>
</html>
http://www.corange.cn/archives/2008/04/987.html
LoRA学习： SX1276/SX1277/SX1278对比
HowieXue 薛永浩的博客
09-14 1万+
Lora芯片 SX1276/SX1277/SX1278的比较SX1276/7/8是一种半双工传输的低中频收发器，配备标了标准FSK和远距离扩频Lora调制解调器。该芯片可以用于超长距离的Lora扩频通信，并且抗干扰性强，同时达到低功耗要求。1、芯片关键参数对比： 可以看出SX1276的带宽范围为 7.8~500kHz ，扩频 因子6~12，并覆盖所有可用频段。 SX1277的带宽和频段方位与 S
后台响应式模板 PHP程序员最爱
05-07
后台响应式模板 PHP程序员最爱 全后台响应式 所有功能性UI元素 表单 等
C#版递归下降语法分析
06-02
以下描述算术表达式的LL(1)文法的递归下降分析程序构造 G[E]: E→TE′ E′→+TE′|ε T→FT′ T′→*FT′|ε F→(E)|i 说明：终结符号i为用户定义的简单变量,即标识符的定义。 要求具有如下功能： 1)从终端输入表达式 2)总控函数分析算术表达式； 3)根据分析结果正误，分别给出不同信息
555计时器工作原理及应用
03-09
对于555计时器电路及计算，各电气元件值的分配，有系统描述。
安卓手机控制遥控飞机程序
06-19
通过WIFI控制遥控飞机汽车，实时传输航拍图像，安卓app，非常经典的应用。（航模需要支持WIFI通信）
在线购物平台实战开发：仿淘宝网项目
最新发布
weixin_42600407的博客
04-25 936
简介：本项目旨在打造一个类似淘宝网的在线购物平台，开发者将通过构建一个电商系统学习Web开发和电商运作的核心功能。系统将包括用户注册、商品展示、购物车管理、订单处理、支付集成、评论系统以及后台管理等关键模块，涵盖前端和后端开发，以及数据库和安全策略的运用。项目详细解析了每个模块的功能和设计，帮助开发者掌握电商系统的构建和业务逻辑，提升实际开发能力。
Ajax详解
weixin_62466605的博客
10-09 1711
Ajax的全称是（异步和XML）。通俗的理解：在网页中利用对象和服务器进行数据交互的方式，就是Ajax。5.2 为什么要学Ajax 之前所学的技术，只能把网页做的更美观漂亮，或添加一些动画效果，但是，Ajax能让我们轻松实现网页与服务器之间的数据交互。
(八)ajax封装和跨域
m0_74350516的博客
02-26 1145
本文全面介绍 ajax 相关知识，涵盖原生 ajax 概念、特点及 HTTP 协议，阐述 node.js 和 express 框架搭建服务端。详细讲解原生 ajax、JQuery 及 axios 发送请求的实现方式，包括 get、post 等请求类型及处理。还深入探讨跨域问题，介绍同源策略，以及 JSONP 和 CORS 两种跨域解决方案。
AJAX —— 学习（一）
qq_63342197的博客
04-01 1694
AJAX 全称是 Asynchronous JavaScript And XML根据意思就是异步的 JS 和 XMLAJAX 不是新的编程语言 是将现有的标准组合在一起使用的新方式XML 全称叫做可扩展标记语言和 HTML 超文本标记语言 类似，都是由标签组成的，但是 HTML 里面都是预定义标签 就是都是本来就定义好的标签，标签不是我们自己起的名。XML 里面都是自定义标签之前浏览器实现上面的应用例子就是使用 AJAX 让 服务器向浏览器返回 XML 文件数据的形式实现的。
ip锁定器
11-25
此款软件分a b两个一个是锁定ip，一个是解锁ip。是xp系统应用的
几个flash动画作品带源文件
01-28
几个flash动画带源文件，其中有写毛笔字、图片缩放影藏、跟随鼠标的小狗等几个适合初学者的flash动画作品
职工签到C语言课程设计
04-27
职工签到C语言课程设计 职工签到C语言课程设计
Arcgis按图斑批量出图(按卫片图斑批量出图)
04-19
批量出图工具，用于卫片批量出图，一个图斑一个jpg，方便操作查看，主要用到的就是数据驱动工具，Arcgis版本10以上，版本太低，没有这个工具不行的
中学教师考编
01-27
word文件 教师考编复习资料 历年真题
原生AJAX
weixin_51249285的博客
08-15 648
原生AJAX
Ajax 学习之路
weixin_44934478的博客
12-21 649
初识Ajax 基础知识铺垫 Wamp的安装 PHP基本语法 AJAX的使用 同步和异步的理解 数据格式 Ajax的封装 jQuery中使用Ajax 跨域 模板引擎的使用
恒浪仿淘宝多用户商城系统ASP.NET源码
“恒浪仿淘宝多用户商城 build 1229_hlft（ASP.NET源码）”是一款基于ASP.NET技术开发的电子商务平台系统，其设计目标是模仿淘宝网的多用户经营模式，实现一个支持多个商家入驻、独立运营店铺的B2B/B2C综合型在线...
校园淘宝网源码
11-07
这个源码实现了类似于淘宝网的功能，包括买家、卖家和管理员三个主要角色，旨在为学生提供一个便捷、安全的虚拟市场，进行商品交易和服务。 在Java编程语言中，这个系统可能采用了MVC（Model-View-Controller）设计...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值