注册用户添加Js和Ajax验证

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

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

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

    <input type="text" name="username"/><br/>
    <input type="password" name="password"/>
         首先js验证一般我们在做注册功能时是用来验证用户输入的格式是否正确,输入是否为空等等。

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

       <html> <pre name="code" class="html">        <head>
         <!--ajaxUtils是使用AJAX来异步发送请求的文件-->
<script type="text/javascript" src="ajaxUtils.js"></script>
<!--checkMessage是用来验证输入的js文件-->

    <script src="checkMessage.js"></script>

<!--utils是将验证的抽象方法将它抽取出来另外置于一个文件-->

<script type="text/javascript" src="utils.js"></script></head>

    <body>

<!--添加onblur事件当监听鼠标是否移出  并传入当前对象-->

<input type="text" name="username" onblur="checkUsername(this)"/><span id="usernameMsg" class="error"></span><br/> <input type="password" name="password" onblur="checkPassword(this)"/><span id="passwordMsg" class="error"></span><br />
</body></html>

               然后是各个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);
	   }
}

验证完毕 !如果有什么错误请多多指教!

 

   

              

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dukangcheng/article/details/50789382
个人分类: Js/Ajax
上一篇Tomcat的项目发布路径
下一篇使用springmvc做项目时资源的的引入问题 (CSS/JS/IMAGES)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭