码迷,mamicode.com
首页 > Web开发 > 详细

前台jsp校验:js+Ajax+正则表达式--【DRP】

时间:2015-12-01 12:30:33      阅读:280      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>  
<%@ page import ="com.bjpowernode.drp.sysmgr.domain.*"%> 
<%@ page import="com.bjpowernode.drp.sysmgr.manager.*"%>
<%	
	request.setCharacterEncoding("GB18030");
	
	//查询用户Id,并判断数据库中是否存
			
		String command=request.getParameter("command");		
		String userId="";
		String userName="";
		String contactTel="";
		String email="";
		if("add".equals(command)){
			if(UserManager.getInstance().findUserById(request.getParameter("userId"))==null){
				User user=new User();
				user.setUserId(request.getParameter("userId"));
				user.setUserName(request.getParameter("userName"));
				user.setPassword(request.getParameter("password"));
				user.setContactTel(request.getParameter("contactTel"));
				user.setEmail(request.getParameter("email"));
				
				UserManager.getInstance().addUser(user);
				out.println("添加用户成功!");
			
			}else{
				
				userId=request.getParameter("userId");
				userName=request.getParameter("userName");
				contactTel=request.getParameter("contactTel");
				email=request.getParameter("email");				
			
				out.println("添加代码已经存在,代码=【"+ request.getParameter("userId") +"】");
			
			}
			
		};
	
	//String command=request.getParameter("command");		
	//if(command !=null && command.equals("add")){
	/* if("add".equals(command)){
		User user=new User();
		user.setUserId(request.getParameter("userId"));
		user.setUserName(request.getParameter("userName"));
		user.setPassword(request.getParameter("password"));
		user.setContactTel(request.getParameter("contactTel"));
		user.setEmail(request.getParameter("email"));
		
		UserManager.getInstance().addUser(user);
		out.println("添加用户成功!");
	} */
 %>
 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
		<title>添加用户</title>
		<link rel="stylesheet" href="../style/drp.css">
		<script src="../script/client_validate.js"></script>
		
		<script type="text/javascript">
		
		//返回
	function goBack() {
		window.self.location="user_maint.html"
	}
	
	//添加用户前的js判断
	function addUser() {
		//var vUserId=document.getElementById("userId").value;
		var userIdField=document.getElementById("userId");
		//用户代码不能为空
		
		
		//判断用户代码不能为空
		if(trim(userIdField.value)==""){
			alert("用户代码不能为空!");
			userIdField.focus();
			return;			
		}
		
		/*
		//用户代码只能为4-6位!
		if(!(trim(userIdField.value).length>=4 && trim(userIdField.value).length<=6)){
			alert("用户代码只能为4-6位!!");
			userIdField.focus();
			return;
		}
		for(var i=0;i<trim(userIdField.value).length;i++){
			var c=trim(userIdField.value).charAt(i);
			if(!(c>=‘0‘ && c<=‘9‘) || ( c>=‘z‘ && c<=‘Z‘) || (c>=‘A‘ || c<=‘Z‘)){
				alert("用户代码必须为数字和字母!");
				userIdField.focus();
				return;
				
			}
		}
		*/
		
		//用户代码必须为数字和字母!只能为4-6位,从头至尾
		var re=new  RegExp(/^[a-zA-Z0-9]{4,6}$/);
		if(!re.test(trim(userIdField.value))){
			alert("用户代码必须为数字和字母!只能为4-6位!");
			userIdField.focus();
			return;
		}
		
		//用户名称必须输入,不能和用户代码不能为空一致
		if(trim(document.getElementById("userName").value).length==0){
			alert("用户名称不能为空!");	 
			document.getElementById("userName").focus();
			return;
		}
		
		//密码至少6位
		if(trim(document.getElementById("password").value).length<6){
			alert("密码至少6位!");
			document.getElementById("password").focus();
			return;
			
		}
		
		//如果联系电话不为空,进行判断,判断规则:都为数字,采用两种方式1,正则表达式 2,不用
		
		//不采用正则表达式判断
		var contactTelField=document.getElementById("contactTel");
						
		/*
		//alert("a"+trim(contactTelField.value)+"a");
		if(trim(contactTelField.value)!=""){
		
			for(var i=0;i<trim(contactTelField.value).length;i++){
				var c=trim(contactTelField.value).charAt(i);
				alert(c);
				if(!(c>=‘0‘ && c<=‘9‘)){
					alert("电话号码不合法");
					contactTelField.focus();
					return;
				}
			}
		}
		*/
		
		//正则表达式验证是否为数字--王美--2015年11月24日
			/* var reg=new RegExp("^[0-9]*$");
			var obj=document.getElementById("contactTel");
			if(!reg.test(obj.value)){
				alert("请输入数字!");
			}
			if(!/^[0-9]*$/.test(obj.value)){
				alert("请输入数字!");
			}
			 */
			 
		//正则表达式验证是否为数字,DRP视频里面的
		
		if(trim(contactTelField.value)!=""){
		//方法用于在脚本执行过程中编译正则表达式。
		re.compile(/^[0-9]*$/);
	
			if(!re.test(trim(contactTelField.value))){		
				 alert("电话号码不合法!");
				 contactTelField.focus();
				 return;
			}
			
		}	 
		
		
		//如果email不能空,进行判断,判断规则;只要包含@即可,@最好不再最前面和最后面。			
		 var emailField=document.getElementById("email");	
		if(trim(emailField.value).length !=0){
			
			var emailValue=trim(emailField.value);
			if((emailValue.indexOf("@")==0) || (emailValue.indexOf("@")== (emailValue.length-1))){
				alert("email地址格式不正确!");
				emailField.focus();
				return;
			}
			if(emailValue.indexOf("@")<0){
				alert("email地址格式不正确!");
				emailField.focus();
				return;
			}
		} 
		
		
		if(document.getElementById("spanUserId").innerHTML!=null){  
			alert("用户代码已经存在!");
			userIdField.focus();
			return;
			
		}
		/*
		document.getElementById("userForm").action="user_add.jsp";
		document.getElementById("userForm").method="post";	
		document.getElementById("userForm").submit();
		*/
		
		with(document.getElementById("userForm")){
			action="user_add.jsp";
			method="post";	
			submit();
		}
	}
	
	
	function init(){
		//用户代码text获取焦点
		document.getElementById("userId").focus();
	}
	
	function userIdOnKeyPress(){
		//只能输入字母,不能输入数字
		if(!(event.keyCode>=97 && event.keyCode<=122)){
			event.keyCode=0;
		}
	}
	
	
	//回车换行
	/* function  document.onkeydown(){ 
		alert(window.event.keyCode);
		 if(window.event.keyCode==13 && window.event.srcElement.type !=‘button‘){
			window.event.keyCode=9;
		}
		
	}  */
	
	
	//1.创建Ajax核心对象XMLHttpRequest
	var xmlHttp;
	function createXMLHttpRequest(){
		//表示当前浏览器不是ie,如firefox
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	
	//2.创建Ajax对象,完成用户代码的判断
	function validate(field){
		//alert(document.getElementById("userId").value);
		//alert(field.value);
		if(trim(field.value).length !=0){
			//创建Ajax核心对象XMLHttpRequest
			createXMLHttpRequest();	
			//添加一个时间,就不会读取过期缓存了
			var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
			//设置请求方式为get,请求的url,异步提交
			xmlHttp.open("GET",url,true);
			//将方法的地址赋值给onreadystatechange属性
			xmlHttp.onreadystatechange=callback;
			
			//将设置信息发送到Ajax引擎
			xmlHttp.send(null);
		}else{
		
			document.getElementById("spanUserId").innerHTML="";
		}
	
	}
	
	function callback(){
		//alert(xmlHttp.readyState);
		//设置Ajax引擎状态为成功
		if (xmlHttp.readyState==4){
		//Http协议状态为成功
			if(xmlHttp.status==200){
				//取得相应文本
				//alert(xmlHttp.responseText);	
				if(trim(xmlHttp.responseText)!=""){
					document.getElementById("spanUserId").innerHTML="<font color=‘red‘>"+ xmlHttp.responseText+"</font>";	
				}else{
					document.getElementById("spanUserId").innerHTML="";
				}
					
			}else{
				alert("请求失败,错误码="+xmlHttp.status);
			}
		
	}
}
	
</script>

	</head>

	<body class="body1" onload="init()">
		<form name="userForm" target="_self" id="userForm">
		<input type="hidden" name="command" value="add">
			<div align="center">
				<table width="95%" border="0" cellspacing="2" cellpadding="2">
					<tr>
						<td>
							
						</td>
					</tr>
				</table>
				<table width="95%" border="0" cellspacing="0" cellpadding="0"
					height="25">
					<tr>
						<td width="522" class="p1" height="25" nowrap>
							<img src="../images/mark_arrow_03.gif" width="14" height="14">
							 
							<b>系统管理>>用户维护>>添加</b>
						</td>
					</tr>
				</table>
				<hr width="97%" align="center" size=0>
				<table width="95%" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="22%" height="29">
							<div align="right">
								<font color="#FF0000">*</font>用户代码: 
							</div>
						</td>
						<td width="78%">
							<input name="userId" type="text" class="text1" id="userId"
								size="10" maxlength="10" onkeypress="userIdOnKeyPress()" value="<%=userId%>" onblur="validate(this)">
								<span id="spanUserId"></span>
						</td>
					</tr>
					<tr>
						<td height="26">
							<div align="right">
								<font color="#FF0000">*</font>用户名称: 
							</div>
						</td>
						<td>
							<input name="userName" type="text" class="text1" id="userName"
								size="20" maxlength="20" value="<%=userName%>">
						</td>
					</tr>
					<tr>
						<td height="26">
							<div align="right">
								<font color="#FF0000">*</font>密码: 
							</div>
						</td>
						<td>
							<label>
								<input name="password" type="password" class="text1"
									id="password" size="20" maxlength="20">
							</label>
						</td>
					</tr>
					<tr>
						<td height="26">
							<div align="right">
								联系电话: 
							</div>
						</td>
						<td>
							<input name="contactTel" type="text" class="text1"
								id="contactTel" size="20" maxlength="20" value="<%=contactTel%>">
						</td>
					</tr>
					<tr>
						<td height="26">
							<div align="right">
								email: 
							</div>
						</td>
						<td>
							<input name="email" type="text" class="text1" id="email"
								size="20" maxlength="20" value="<%=email%>">
						</td>
					</tr>
				</table>
				<hr width="97%" align="center" size=0>
				<div align="center">
					<input name="btnAdd" class="button1" type="button" id="btnAdd"
						value="添加" onClick="addUser()">
					    
					<input name="btnBack" class="button1" type="button" id="btnBack"
						value="返回" onClick="goBack()" />
				</div>
			</div>
		</form>
	</body>
</html>

 

前台jsp校验:js+Ajax+正则表达式--【DRP】

标签:

原文地址:http://www.cnblogs.com/wangmei/p/5009442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!