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

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Ajax在用户注册上的简单应用</title>
<scriptlanguage=javascript>
varusername_help='用户名长度为20位以内,只能由中文、英文字母、数字、中横杠("-")、下横杠("_")组成。';
varusername_error='用户名超过了20个字符!';
varusername_error_1='您的用户名输入格式不正确!';
varusername_exist='您填写的用户名已经存在!';
varusername_null='用户名不能为空!';
varpassword_help='密码6-20位英文字母、数字组成。为了您的帐户安全,建议您使用字母大小与数字混合设置密码。';
varpassword_too_simple='您设置的密码过于简单!';
varpassword_too_length='您设置的密码长度超过了20个字符!';
varpassword_null='密码不能为空。';
varrepassword_help='请再输入一次登陆密码!';
varrepassword_unsame='输入的登陆密码不一致,请重新输入!';
varrepassword_null='验证密码不能为空!';
varemail_help='请认真填写,便于企业或我们与您联系。';
varemail_error='您的邮箱填写不正确!';
varemail_exist='您使用的邮箱已经注册过,请登陆或者输入其他邮箱地址!';
varemail_null='邮箱不能为空!';
varword_help='word_help';
varword_error='word_error';
varoTR;
varoTD;
//该函数可以创建我们需要的XMLHttpRequest对象
functiongetHTTPObject(){
varxmlhttp=false;
if(window.XMLHttpRequest){
xmlhttp=newXMLHttpRequest();
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType('text/xml');
}
}else{
try{
xmlhttp=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}catch(E){xmlhttp=false;}
}
}
returnxmlhttp;
}
varhttp=getHTTPObject();

functiongetAbsLeft(e){
varl=e.offsetLeft;
while(e=e.offsetParent)l+=e.offsetLeft;
returnl;
}
functiongetAbsTop(e){
vart=e.offsetTop;
while(e=e.offsetParent)t+=e.offsetTop;
t=t+18;
returnt;
}
//-------------------------------------------------------
functiononFouces(str){
document.getElementById(str).className='word_help';
if(str=='unamespan'){
document.getElementById(str).innerHTML=username_help;
}elseif(str=='upw'){
document.getElementById(str).innerHTML=password_help;
}elseif(str=='uhrtype'){
document.getElementById(str).innerHTML=hrtype_help;
}elseif(str=='urpw'){
document.getElementById(str).innerHTML=repassword_help;
}elseif(str=='uemail'){
document.getElementById(str).innerHTML=email_help;
}
}
functionbackState(str){
if(str=='uname'){
document.getElementById('username').keytype=0;
document.getElementById('unamespan').className='gray';
document.getElementById('unamespan').innerHTML=username_help;
}elseif(str=='pw'){
document.getElementById('password').keytype=0;
document.getElementById('upw').className='gray';
document.getElementById('upw').innerHTML=password_help;
}elseif(str=="hr"){
document.getElementById('hrlibtype').keytype=0;
document.getElementById('uhrtype').className='gray';
document.getElementById('uhrtype').innerHTML=hrtype_help;

}elseif(str=="rpw"){
document.getElementById('passAgain').keytype=0;
document.getElementById('urpw').className='gray';
document.getElementById('urpw').innerHTML=repassword_help;

}
elseif(str=="ue"){
document.getElementById('email').keytype=0;
document.getElementById('uemail').className='gray';
document.getElementById('uemail').innerHTML=email_help;

}
}

functioncheckUserName_1(obj_str,num,obj_str1){
varobj=document.getElementById(obj_str);
varobj_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;
returnfalse;
}
if(obj.value.length>num){
obj.keytype=1;
obj_help.innerHTML=username_error;
obj_help.className=word_error;
returnfalse;
}
//检查是否有不符合规定的字符
varname_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;
returnfalse;
}
//检查用户名是否存在

varusername=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");
}
}
functionhandleHttpResponseForUserName_1(){
if(http.readyState==4){
if(http.status==200){
returnStr=Trim(http.responseText);
if(returnStr=="您填写的用户名已经存在"){
varobj_1=document.getElementById("unamespan");
obj_1.innerHTML=username_exist;
document.getElementById("username").keytype=1;
obj_1.className=word_error;
returnfalse;
}
}
}
}
functioncheckpw_1(obj_str,num,obj_str1){
varobj=document.getElementById(obj_str);
varobj_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;
returnfalse;
}
if(obj.value.length<num){
obj.keytype=1;
obj_help.innerHTML=password_too_simple;
obj_help.className=word_error;
returnfalse;
}
if(obj.value.length>20){
obj.keytype=1;
obj_help.innerHTML=password_too_length;
obj_help.className=word_error;
returnfalse;
}
backState('pw');
}
functioncheckSame_1(obj_str,obj_str1,obj_targ){
varobj=document.getElementById(obj_str);
varobj1=document.getElementById(obj_str1);
varobj_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;
returnfalse;
}
if(obj.value!=obj1.value){
obj.keytype=1;
obj_help.innerHTML=repassword_unsame;
obj_help.className=word_error;
returnfalse;
}
backState('rpw');
}
functioncheckEmail_1(obj_str,obj_str1){
varobj=document.getElementById(obj_str);
varobj_help=document.getElementById(obj_str1);
obj.keytype=0;
//验证电子邮件
varstr="";
varemail=obj.value;
if(email.length==0){
obj.keytype=1;
obj_help.innerHTML=email_null;
obj_help.className=word_error;
returnfalse;
}elseif(email.length<8)
{
obj.keytype=1;
obj_help.innerHTML=email_error;
obj_help.className=word_error;
returnfalse;
}else{
if(email.indexOf(".")<=0||email.indexOf("@")==-1)
{obj.keytype=1;
obj_help.innerHTML=email_error;
obj_help.className=word_error;
returnfalse;
}
}

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

functionhandleHttpResponseEmail(){
if(http.readyState==4){
if(http.status==200){
returnStr=Trim(http.responseText);
if(returnStr=="您使用的邮箱已经注册过,请登陆或者输入其他邮箱地址"){
varobj_1=document.getElementById("uemail");
obj_1.innerHTML=email_exist;
document.getElementById("email").keytype=1;
obj_1.className=word_error;
returnfalse;
}elseif(document.getElementById("email").keytype==0){
backState('ue');
}
}
}
}
//-------------------------------------------------------
functioncheckpw(obj,num){
varrownum=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="<spanclass='"+word_error+"'>"+password_too_simple+"</span>"
returnfalse;
}
hidden_text(obj);
}
functioncheckSame(obj,obj_str1){
varrownum=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="<spanclass='"+word_error+"'>"+repassword_unsame+"</span>"
returnfalse;
}
hidden_text(obj);
}
functionshow_text(obj){
varrownum=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="<spanclass='"+word_help+"'>"+username_help+"</span>"
}elseif(obj.keytype2=="hrtype"){
oTD.innerHTML="<spanclass='"+word_help+"'>"+hrtype_help+"</span>"
}elseif(obj.keytype2=="pw"){
oTD.innerHTML="<spanclass='"+word_help+"'>"+password_help+"</span>"
}elseif(obj.keytype2=="rpw"){
oTD.innerHTML="<spanclass='"+word_help+"'>"+repassword_help+"</span>"
}elseif(obj.keytype2=="eml"){
oTD.innerHTML="<spanclass='"+word_help+"'>"+email_help+"</span>"
}

}
functionhidden_text(obj){
varrownum=obj.parentElement.parentElement.rowIndex;
//if(obj.keytype==0){
document.getElementById("reg_table").deleteRow(rownum+1);
//}
}
functionhidden_error(){
document.getElementById("word_error").style.display='none';
}
functionTrim(str){
returnRTrim(LTrim(str));
}
functionLTrim(str){
returnstr.replace(/^[\t\n\r]+/g,"");
}

functionRTrim(str){
returnstr.replace(/[\t\n\r]+$/g,"");
}
functionvalidator()
{
if(document.PersonForm.username.keytype==1)
{
returnfalse;}
if(document.PersonForm.password.keytype==1)
{
returnfalse;}
if(document.PersonForm.passAgain.keytype==1)
{
returnfalse;}
if(document.PersonForm.email.keytype==1)
{
returnfalse;}
if(document.PersonForm.isaccept.checked==false)
{
alert("您是否接受协议?");
document.PersonForm.isaccept.focus();
returnfalse;
}
returntrue;
}
</SCRIPT>
<STYLEtype=text/css>
.word_help{
BORDER-RIGHT:#00aaff1pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#00aaff1pxsolid;PADDING-LEFT:28px;BACKGROUND:url(ico_at.gif)#e7f7ffno-repeat3px2px;PADDING-BOTTOM:4px;BORDER-LEFT:#00aaff1pxsolid;WIDTH:100%;LINE-HEIGHT:110%;PADDING-TOP:6px;BORDER-BOTTOM:#00aaff1pxsolid
}
.word_error{
BORDER-RIGHT:#ff33001pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#ff33001pxsolid;PADDING-LEFT:28px;BACKGROUND:url(ico_err.gif)#fff3efno-repeat3px2px;PADDING-BOTTOM:4px;BORDER-LEFT:#ff33001pxsolid;WIDTH:100%;LINE-HEIGHT:110%;PADDING-TOP:6px;BORDER-BOTTOM:#ff33001pxsolid
}
BODY{
BACKGROUND-IMAGE:none;BACKGROUND-COLOR:#b8b8b8
}
.gray{
BORDER-RIGHT:#ffffff0pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#ffffff0pxsolid;PADDING-LEFT:25px;FONT-SIZE:12px;BACKGROUND:url(ico_xing.gif)#ffffffno-repeat3px10px;PADDING-BOTTOM:4px;VERTICAL-ALIGN:middle;BORDER-LEFT:#ffffff0pxsolid;WIDTH:300px;COLOR:#999999;LINE-HEIGHT:120%;PADDING-TOP:8px;BORDER-BOTTOM:#ffffff0pxsolid
}
.tip{
BORDER-RIGHT:#6666661pxsolid;BORDER-TOP:#6666661pxsolid;FONT-SIZE:12px;BORDER-LEFT:#6666661pxsolid;BORDER-BOTTOM:#6666661pxsolid
}
.tipINPUT{
BORDER-RIGHT:#6666661pxsolid;PADDING-RIGHT:0px;BORDER-TOP:#6666661pxsolid;PADDING-LEFT:1px;PADDING-BOTTOM:1px;BORDER-LEFT:#6666661pxsolid;WIDTH:137px;PADDING-TOP:3px;BORDER-BOTTOM:#6666661pxsolid;HEIGHT:22px
}
</STYLE>
</head>
<body>
<FORMname=PersonFormonSubmit="returnvalidator()"action=person.do?op=registermethod=post>
<TABLEid=reg_tablecellSpacing=0cellPadding=0width="94%"align=leftborder=0>
<TBODY>
<TR>
<TDalign=rightwidth=120height=50>用户名:</TD>
<TDalign=leftwidth=168><INPUTonblur="checkUserName_1('username',20,'unamespan')"onfocus="onFouces('unamespan')"name=usernamekeytype2="uname"keytype="1">
<SPANclass=t></SPAN></TD>
<TDalign=left><SPANclass=grayid=unamespan>用户名长度为20位以内,只能由中文、英文字母、数字、中横杠("-")、下横杠("_")组成。</SPAN></TD>
</TR>
<TR>
<TDalign=rightheight=50>登录密码:</TD>
<TDalign=left><INPUTonblur="checkpw_1('password',6,'upw')"onfocus="onFouces('upw')"type=passwordmaxLength=30name=passwordkeytype2="pw"keytype=1>
</TD>
<TDalign=left><SPANclass=grayid=upw>密码6-20位字母、数字、字符组成。为了您的帐户安全,建议您使用字母大小与数字混合设置密码。</SPAN></TD>
</TR>
<TR>
<TDalign=rightheight=50>验证密码:</TD>
<TDalign=left><INPUTonblur="checkSame_1('password','passAgain','urpw')"onfocus="onFouces('urpw')"type=passwordmaxLength=30name=passAgainkeytype2="rpw"keytype="1">
</TD>
<TDalign=left><SPANclass=grayid=urpw>请再输入一次登陆密码。</SPAN></TD>
</TR>
<TR>
<TDalign=rightheight=50>E-MAIL:</TD>
<TDalign=left><INPUTonblur="checkEmail_1('email','uemail')"onfocus="onFouces('uemail')"maxLength=64name=emailkeytype2="eml"keytype="1"></TD>
<TDalign=left><SPANclass=grayid=uemail>请认真填写,便于我们与您联系。</SPAN></TD>
</TR>
&nbsp;
<TR>
<TDalign=rightcolSpan=2height=66><INPUTclass=input2type=checkboxvalue=checkboxname=isaccept>
接受<Ahref="#">《协议》</A></TD>
<TD>&nbsp;&nbsp;&nbsp;
<INPUTclass=input_regtype=imageheight=26width=104src="buuton_reg.gif"border=0name=image></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
http://www.corange.cn/archives/2008/04/987.html

你可能感兴趣的:(JavaScript,Ajax,css,企业应用,asp)