ajax 表单效验

ajax.js@H_502_1@

function Ajax(recvType){  
    var aj=new Object();  
    aj.recvType=recvType ? recvType.toUpperCase() : 'HTML'; 
    aj.targetUrl='';  
    aj.sendString='';  
    aj.resultHandle=null;  
    aj.createXMLHttpRequest=function(){  
	    var request=false;    
	    //window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）  
	    if(window.XMLHttpRequest){  
	        request=new XMLHttpRequest();  
	        if(request.overrideMimeType){  
	            request.overrideMimeType("text/xml");  
	        }  
	    //window对象中有ActiveXObject属性存在就是IE  
	    }else if(window.ActiveXObject){  
	        var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];  
	        for(var i=0; i<versions.length; i++){  
	            try{  
	                request=new ActiveXObject(versions[i]);  
	                if(request){  
	                   return request;  
	                }  
	            }catch(e){  
	                request=false;  
	            }  
	        }  
	    }  
	    return request;  
    }  
    aj.XMLHttpRequest=aj.createXMLHttpRequest();  
    aj.processHandle=function(){  
        if(aj.XMLHttpRequest.readyState == 4){  
            if(aj.XMLHttpRequest.status == 200){  
                if(aj.recvType=="HTML")  
                    aj.resultHandle(aj.XMLHttpRequest.responseText);  
                else if(aj.recvType=="XML")  
                    aj.resultHandle(aj.XMLHttpRequest.responseXML);  
            }  
        }  
    }    
    aj.get=function(targetUrl,resultHandle){  
        aj.targetUrl=targetUrl;   
          
        if(resultHandle!=null){  
            aj.XMLHttpRequest.onreadystatechange=aj.processHandle;    
            aj.resultHandle=resultHandle;     
        }  
        if(window.XMLHttpRequest){  
            aj.XMLHttpRequest.open("get",aj.targetUrl);  
            aj.XMLHttpRequest.send(null);  
        }else{  
            aj.XMLHttpRequest.open("get",aj.targetUrl,false);  
            aj.XMLHttpRequest.send();  
        }  
    }   
    aj.post=function(targetUrl,sendString,resultHandle){  
        aj.targetUrl=targetUrl;  
        if(typeof(sendString)=="object"){  
            var str="";  
            for(var pro in sendString){  
                str+=pro+"="+sendString[pro]+"&";     
            }  
            aj.sendString=str.substr(0,str.length-1);  
        }else{  
            aj.sendString=sendString;  
        }  
        if(resultHandle!=null){  
            aj.XMLHttpRequest.onreadystatechange=aj.processHandle;    
            aj.resultHandle=resultHandle;     
        }  
        aj.XMLHttpRequest.open("post",targetUrl,false);  
        aj.XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
        aj.XMLHttpRequest.send(aj.sendString);  
    }  
    return aj;  
}

user.js

function validate(val) {
	var boolean1 = false;
    var userText = document.getElementById('userText'); // 获取 SPAN 对象  
    // 如果为空或者输入空格执行  
    if (!(val.match(/^\S+$/))) {  
        userText.innerHTML = '<font color="red">请输入用户名！</font>';  
    } else {  
        if (val.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/)) {  
           var ajax = Ajax(); //创建 Ajax 对象  
            // 通过 Ajax POST 方法把用户名提交,进行验证用户名是否存在，并返回结果  
           ajax.post('user_findUser.action',{"userName":val},function(data){	     
               if(data == 'false'){
               		userText.innerHTML = '<font color="red">用户名已存在！</font>';
               }else{
               		boolean1 = true;               		
               		userText.innerHTML = '';
               }       
            });      
        } else {
        	userText.innerHTML = '<font color="red">用户名格式不正确，请输入邮箱！</font>';   
       }  
    }
    return boolean1;      
}  
function checkPwd(val) {
	var boolean2 = false; 
    var pwdText = document.getElementById('pwdText');
    if (!(val.match(/^\S+$/))) {  
        pwdText.innerHTML = '<font color="red">请输入密码！</font>';            
    } else {
		pwdText.innerHTML = '';     
      	boolean2 = true;
    }
    return boolean2;  
}
function checkLogin(val) {
	var boolean3 = false; 
    var userText = document.getElementById('userText'); 
    if (!(val.match(/^\S+$/))) {  
        userText.innerHTML = '<font color="red">请输入用户名！</font>';  
    }else{  
       if (!(val.match(/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/))) {  
        	userText.innerHTML = '<font color="red">用户名格式不正确，请输入邮箱！</font>';   
       }else{
    	    userText.innerHTML = ''; 
    		boolean3 = true;
       }  
    }
    return boolean3;  
}

user_update.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="<%=basePath%>css/zhaopin.css" rel="stylesheet" />
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=basePath%>js/ajax.js"></script>
<script type="text/javascript" src="<%=basePath%>js/user.js"></script>

<script type="text/javascript">
	function _onsubmit(){
		var username = document.getElementsByName("user.userName")[0].value;
		var pwd = document.getElementsByName("user.password")[0].value;	
		var lastName = "<s:property value="user.userName"/>";
	 	if(lastName == username){
	 		if(checkLogin(username) && checkPwd(pwd)){
	 			document.forms[0].submit();
	 		}
	 	}else{
	 		if(validate(username) && checkPwd(pwd)){
	 			document.forms[0].submit();
	 		}
	 	}
	}

</script>


</head>

<body>
	<form action="user_updateExcute.action" method="post">
<div class="qtzc">
	<div class="title">
    	<div class="text">修改</div>
        <div class="text1">已有账号？<a href="<%=basePath%>login.jsp">马上登陆</a></div>
        <div class="cle"></div>
    </div>
	<div class="btn">
    	<table>
        	<tr>
            	<td width="60" height="50">用户名</td>
                <td class="inp1">
                <input name="user.userName" type="text" onBlur="checkLogin(this.value);" value="<s:property value="user.userName"/>"/><span id="userText"></span>
                </td>
            </tr>
            <tr>
            	<td height="50">密码</td>
                <td class="inp1"><input name="user.password" type="password" onBlur="checkPwd(this.value);" value="<s:property value="user.password"/>"/><span id="pwdText"></span>
                	
                	<input type="hidden" name="user.usersid" value="<s:property value="user.usersid"/>"/>
        			<input type="hidden" name="user.createtime" value="<s:property value="user.createtime"/>"/>
        			<input type="hidden" name="user.state" value="<s:property value="user.state"/>"/>
                </td>
            </tr>
            
            
            
            <tr>
            	<td height="50"></td>
                <td><a href="#" onclick="_onsubmit();"><img src="<%=basePath%>images/zc_bgqt1.jpg" width="109" height="34" /></a></td>
            </tr>
        </table>
    </div>

</div>
</form>
</body>
</html>

后台处理方法：

	public void findUser() throws IOException {
		HttpServletResponse response =ServletActionContext.getResponse();
		user=userService.getUserByUserName(userName);
		if(user != null){
			//用户名已存在
			response.getWriter().print(false);
		}else{
			response.getWriter().print(true);
		}	
	}

原文链接：https://www.f2er.com/ajax/166450.html

猜你在找的Ajax相关文章