您的位置:首页 > 其它

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

2009-03-14 10:21 274 查看
Code

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

 

<TR>

<TD align=right colSpan=2 height=66><INPUT class=input2 type=checkbox value=checkbox name=isaccept>

接受<A href="#">《协议》</A></TD>

<TD>   

<INPUT class=input_reg type=image height=26 width=104 src="buuton_reg.gif" border=0 name=image></TD>

</TR>

</TABLE>

</FORM>

</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: