ajax在用户注册中的应用,类似淘宝网
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>
