日期:2014-05-16  浏览次数:20412 次

在登录页面中js进行正则验证电话号码和邮箱地址,并使用ajax进行用户ID的数据库验证

本文说的是在登录页面中使用js进行正则验证并使用ajax进行用户ID的数据库验证,另外也加入键盘监听。


先看一下登录的jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="org.ml.drp.sysmgr.domain.*"%>
<%@ page import="org.ml.drp.sysmgr.manager.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
String command = request.getParameter("command"); 
if("addUser".equals(command)){
	if(UserManager.getInstance().findUserById(request.getParameter("userId"))!=null){
		out.write("<font color=red>用户"+request.getParameter("userId")+"已经存在</font>");  
	}else{
		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"));
		if(UserManager.getInstance().addUser(user)){
			out.write("<font color=red>用户信息添加成功</font>"); 
		}else{
			out.write("<font color=red>添加用户过程中出现异常</font>");  
		}
	}
}
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<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";
		} 
		function addUser() {
			//验证用户代码 
			var userId = document.getElementById("userId");
			var userIdValue = userId.value;			
			if(!(/^[a-zA-Z]+[a-zA-Z0-9]*$/.test(trim(userIdValue))&&/^[a-zA-Z0-9]{4,6}$/.test(trim(userIdValue)))){
				alert("用户代码必须以字母开头,并且为4-6位!");  
				userId.focus();
				userId.select();
				return;
			}
			/*
			if(trim(userIdValue)==""){
				alert("用户代码不能为空 !"); 
				userId.focus();
				userId.select();
				return;
			}
			if(trim(userIdValue).length<4){
				alert("用户代码至少为4位!"); 
				userId.focus();
				userId.select(); 
				return;
			}
			*/ 
			//验证用户名 
			var userName = document.getElementById("userName");
			var userNameValue = userName.value;
			if(trim(userNameValue)==""){
				alert("用户名不能为空 !"); 
				userName.focus();
				userName.select();
				return;
			}
			//验证密码 
			var password = document.getElementById("password");
			var passwordValue = password.value;
			if(trim(passwordValue)==""){
				alert("密码不能为空 !"); 
				password.focus();
				password.select();
				return; 
			}
			if(trim(passwordValue).length<6){
				alert("用户密码至少6位!"); 
				password.focus();
				password.select();
				return;
			}
			//验证电话 
			var contactTel = document.getElementById("contactTel");
			var contactTelValue = contactTel.value;
			if(trim(contactTelValue)!=""){
				var pattern=/^(13[0-9]|15[0-9]|18[8|9])\d{8}$/; 
				var flag = pattern.test(contactTelValue);
				if(!flag){
					alert("联系电话格式不正确!"); 
					contactTel.focus();
					return;
				}
			}
			//验证邮箱 		
			var email = document.getElementById("email");
			var emailValue = email.value;  			
        if(trim(emailValue)!=""){
	 			var pattern1 = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; 
	  			var flag = pattern1.test(emailValue);  
				if(!flag) 
		      {