注册用户添加Js和Ajax验证

      注册用户的时候几乎所有的网站都会用到Js和Ajax进行验证操作，这也是一个做WEB程序员必须要掌握的技能点。

      现在我们来看一下怎么写这个js和ajax代码：（以jsp页面为例）

      首先 jsp页面代码：此处只设登录名和密码   

         首先js验证一般我们在做注册功能时是用来验证用户输入的格式是否正确，输入是否为空等等。

         则这时候应该去写JS代码部分，如果代码过长在jsp页面中显示过于冗长，写在外部文件然后引入：

        
        
         
  
  
  
  
 
  
    
 
  

 
  
 
  
     
 
  
 
 
 
 
  
  
  
 
  
 
  
 
  
               然后是各个js文件里面的具体代码：
 
  
                首先看看utils.js中的代码：
 
  
                 
 
  
function $(e){
	return document.getElementById(e);
}

String.prototype.trim=function(){
	return this.replace(/(^\s+)|(\s+$)/g, "");
}

/**
 * 验证表单域的值是否符合指定的格式
 * fieldObj是传入的表单对象  比如：username表单中传入的this对象
 * msgOb是指表单后面的span对象  用来显示验证的具体情况包括js和Ajax验证
 * re表示正则表达式
 * nullMsg输入如果为空的消息
 * errorMsg输入信息错误的消息
 */
function checkField(fieldObj,msgObj,re,nullMsg,errorMsg){
	msgObj.innerHTML="";
	var v=fieldObj.value.replace(/(^\s+)|(\s+$)/g,"");
	var flag=true;
	if(v.length==0){
		msgObj.innerHTML=nullMsg;
		flag=false;
	}else{
		if(!re.test(v)){
			msgObj.innerHTML=errorMsg;
			flag=false;
		}
	}
	return flag;
}
 
  
   上面的代码抽象出来了验证的流程  ，如果信息为空span里面显示输入为空的相关信息，如果输入信息错误则提示错误信息。 
  
  下面是checkMessage.js的验证信息。验证每一个表单对象的具体方法：
 
  
 
  
var var nameOnly_ok=false;
/*
 *验证用户名是否符合规范的方法 
 *1.验证用户名的输入格式是否正确和是否为空
 *2.验证用户名输入是否唯一（ajax）
 */
function checkUsername(username){
    	//alert(nameOnly_ok);
        //验证用户名的输入格式
        var username_ok=checkField(username, $("usernameMsg"), /^[a-zA-Z0-9_]{1,20}$/, "对不起用户名不能为空！", "对不起用户名不能是字母，数字，下划线以外的数！");
    	//alert(nameOnly(username));
    	//用户名的格式正确的条件成立则验证用户名是否唯一
        if(username_ok){
    		nameOnly(username);
    	}
    	return username_ok&&nameOnly_ok;
    }
//验证用户名是否唯一
function nameOnly(username){
              //ajaxUtils.js验证工具中的方法
        sendAjaxRequest("get","user","method=nameOnly&username="+username.value,true,function(data){
             if(data=="true"){
                 $("usernameMsg").innerHTML="恭喜你！当前输入的用户名可用！"
                     //nameOnly_ok=true;
                     return true;
             }else{
                 $("usernameMsg").innerHTML="很抱歉！当前的用户名已存在！请重新输入用户名！";
                 return false;
             }            
        });   
/*
 *用户密码验证
 */
 function checkPassword(password){
        var password_ok=checkField(password,$("passwordMsg"),/^[a-zA-Z0-9]{6,20}$/,"对不起密码不能为空！","对不起密码只能由字母、数字组成且必须六位及六位以上！");
        return password_ok;
    }
上面代码是验证用户名格式、是否为空、用户名是否唯一的方法写在checkMessage.js中。 
  
下面的代码是ajax的创建过程以及使用ajax验证用户是否唯一的代码：(代码在ajaxUtils.js中)
 
  
 
  
//创建XMLHttpRequest对象异步发送请求
function createAjax(){
     var req;
     //考虑浏览器的兼容性 
   if(window.XMLHttpRequest){
       req=new XMLHttpRequest();
     }else{
       req=new ActiveXObject("Msxml2.XMLHTTP");
     }
     return req;
}
//使用json格式发送请求的
function sendAjaxRequest(method,url,param,asyn,handle200,loading,handle404,handle500){
   //创建XMLHttpRequest对象
   var req=createAjax();
   req.onreadystatechange=function(){
      if(4==req.readyState){
          if(200==req.status){
        	  if(handle200){
        		  var data=req.responseText;
        		  handle200(data);
        	  }
          }else if(404==req.status){
        	  if(handle404){
        		  handle404();
        	  }
          }else if(500==req.status){
        	  if(handle500){
        		  handle500();
        	  }
          }
      }else{
    	  if(loading){
    		  loading();
    	  }
      }
   }
   
   if("get"==method.toLowerCase()){
	   var s=(param==null)? "" :"?"+param;
	   req.open(method,url+s,asyn);
	   req.send(null);
   }else if("post"==method.toLowerCase()){
	   req.open(method,url,asyn);
	   req.setRequestHeader("Content-Type","application/x-www-form-urlendcode");
	   req.send(param);
   }
}
//受用xml格式发送请求
function sendAjaxReqGetXML(method,url,param,asyn,handle200,loading,handle404,handle500){
	var req=createAjax();
	req.onreadystatechange=function(){
		if(4==req.readyState){
			if(200==req.status){
				if(handle200){
					var xmlDoc=req.responseXML;
					if(xmlDoc==null){
						var result=req.responseText;
						xmlDoc=new ActiveXObject("MicroSoft.XMLDOM")
						xmlDoc.loadXML(result);
					}
					handle200(xmlDoc);
				}
			}else if(404==req.status){
				if(handle404){
					handle404();
				}
			}else if(500==req.status){
				if(handle500){
					handle500();
				}
			}
			
		}
	}
	 if("get"==method.toLowerCase()){
		   var s=(param==null)? "" :"?"+param;
		   req.open(method,url+s,asyn);
		   req.send(null);
	   }else if("post"==method.toLowerCase()){
		   req.open(method,url,asyn);
		   req.setRequestHeader("Content-Type","application/x-www-form-urlendcode");
		   req.send(param);
	   }
}
 
  
 验证完毕 ！如果有什么错误请多多指教!