注册用户添加Js和Ajax验证

最新推荐文章于 2022-11-04 20:10:47 发布

杜sir2010

最新推荐文章于 2022-11-04 20:10:47 发布

阅读量5.8k

点赞数 1

分类专栏： Js/Ajax

本文链接：https://blog.csdn.net/dukangcheng/article/details/50789382

版权

Js/Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注册用户的时候几乎所有的网站都会用到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来异步发送请求的文件-->

<body>

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

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