在登入頁面中js進行正則驗證電話號碼和郵箱地址，並使用ajax進行使用者ID的資料庫驗證

mlinge-奮鬥吧發表於2012-08-09

原文網址 : https://blog.csdn.net/cselmu9/article/details/7847201

本文說的是在登入頁面中使用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) 
		　　　　  {  
		　　　　		alert("Email地址不合法！"); 
					email.focus();
					email.select();
			  　　　　return;  				
				}
			} 
			var form = document.getElementById("userForm");
			form.submit();
		} 
		function init(){
			document.getElementById("userId").focus();//第一個輸入框獲取得焦點 
		}
		//鍵盤按下監聽 
		function keyPress(nextId){ 
			if(window.event.keyCode==13){//當按下的是Enter鍵的時候 
				document.getElementById(nextId).focus();
			}
		}
		var xmlHttp;
		function createXMLHttpRequest(){
			if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();
			}else if(window.ActiveXObject){
				xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		
		/*
        //方式一
        function checkUserId(userId){
            if(trim(userId.value)!=""){
                createXMLHttpRequest();//建立Ajax核心物件XMLHttpRequest
                var url = "user_validate.jsp?userId="+trim(userId.value) + "&time="+new Date().getTime();
                //設定請求方式為get，設定 url請求，設定為非同步提交 
                xmlHttp.open("get",url,true);
                //將方法地址賦值給屬性 
                xmlHttp.onreadystatechange=callback;
                //將設定的資訊傳送給Ajax引擎 
                xmlHttp.send(null);
            }{
                document.getElementById("userIdSpan").innerHTML="<font color='red'>使用者程式碼不能為空</font>";
            }  
        }
        function callback(){
            if(xmlHttp.readyState==4){//響應完成 
                if(xmlHttp.status==200){//請求成功 
                    var userIdSpan = document.getElementById("userIdSpan"); 
                    userIdSpan.innerHTML=   xmlHttp.responseText  
                }else{
                    alert("使用者程式碼驗證請求失敗")
                }
            }
        }
        */
        //方式二 
        function checkUserId(userId){
            if(trim(userId.value)!=""){
                createXMLHttpRequest();//建立Ajax核心物件XMLHttpRequest
                var url = "user_validate.jsp?userId="+trim(userId.value) + "&time="+new Date().getTime();
                //設定請求方式為get，設定 url請求，設定為非同步提交 
                xmlHttp.open("get",url,true);
                //將方法地址賦值給屬性 
                xmlHttp.onreadystatechange=function(){//使用匿名物件進行 
                    if(xmlHttp.readyState==4){//響應完成 
                        if(xmlHttp.status==200){//請求成功 
                            var userIdSpan = document.getElementById("userIdSpan"); 
                            userIdSpan.innerHTML=   xmlHttp.responseText  
                        }else{
                            alert("使用者程式碼驗證請求失敗")
                        }
                    }
                };
                //將設定的資訊傳送給Ajax引擎 
                xmlHttp.send(null);
            }{
                document.getElementById("userIdSpan").innerHTML="<font color='red'>使用者程式碼不能為空</font>";
            }  
        } 

	</script>
	</head>

	<body class="body1" onload="init()">
		<form action="#" name="userForm" target="_self" id="userForm" method="post">
			<div align="center"> 
				<table width="95%" border="0" cellspacing="2" cellpadding="2">
					<tr>
						<td>  
							<input type="hidden" name="command" value="addUser">
						</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="keyPress('userName')" onblur="checkUserId(this)"> 
							<span id="userIdSpan" ></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" onkeypress="keyPress('password')">
						</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" onkeypress="keyPress('contactTel')">
							</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" onkeypress="keyPress('email')">
						</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" onkeypress="keyPress('btnAdd')">
						</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>

執行驗證資料庫的時候的程式碼如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ page import="org.ml.drp.sysmgr.manager.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>"> 
    <title>My JSP 'user_validate.jsp' starting page</title> 
  </head>
  
  <body>
   <%
   		String userId = request.getParameter("userId").trim();
   		System.out.println(userId);
   		if(UserManager.getInstance().findUserById(userId)!=null){
   			out.print("<font color='red'>使用者程式碼已存在</font>");
   		}else{
   			out.print("<font color='green'>使用者程式碼可使用</font>"); 
   		}
    %>
  </body>
</html>

資料庫的管理操作類如下：

package org.ml.drp.sysmgr.manager;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Timestamp;
import java.util.Date;

import org.ml.drp.sysmgr.domain.User;
import org.ml.drp.util.DbUtil;

public class UserManager {

	private static UserManager instance = null;
	/**
	 * 私有化的無參構造方法
	 */
	private UserManager(){
		
	}
	/**
	 * 取得UserManager例項化物件
	 * @return
	 */
	public static UserManager getInstance(){
		if(instance==null){
			instance = new UserManager();
		}
		return instance;
	}
	/**
	 * 新增使用者資訊
	 * @param user
	 * @return
	 */
	public boolean addUser(User user){
		boolean flag = false; 
		Connection conn = null;
		PreparedStatement pstmt = null;
		String sql = "insert into t_user(user_id,user_name,password,contact_tel,email,create_date) values(?,?,?,?,?,?)"; 
		try {
			conn = DbUtil.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, user.getUserId());
			pstmt.setString(2, user.getUserName());
			pstmt.setString(3, user.getPassword());
			pstmt.setString(4, user.getContactTel());
			pstmt.setString(5, user.getEmail());
			pstmt.setTimestamp(6, new Timestamp(new Date().getTime()));
			if(pstmt.executeUpdate()>0){
				flag = true;//新增成功
			}
		} catch (SQLException e) { 
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			DbUtil.close(conn);//關閉資料庫連線
			DbUtil.close(pstmt);//關閉prepareStatementd物件
		} 
		return flag;
	}
	/**
	 * 根據使用者ID查詢使用者
	 * @param userId
	 * @return
	 */
	public User findUserById(String userId){
		User user = null;
		String sql = "select user_name,password,contact_tel,email,create_date from t_user where user_id=?";
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		try {
			conn = DbUtil.getConnection();
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, userId);
			rs = pstmt.executeQuery();
			if(rs.next()){
				user = new User();
				user.setUserId(userId);
				user.setUserName(rs.getString(1));
				user.setPassword(rs.getString(2));
				user.setContactTel(rs.getString(3));
				user.setEmail(rs.getString(4));	
				user.setCreateDate(rs.getTimestamp(5));
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally{
			DbUtil.close(conn);//關閉資料庫連線
			DbUtil.close(pstmt);//關閉prepareStatementd物件
		}   
		return user;
	}
	
	
}

這裡只是進行了簡單的記錄，只貼上了程式碼，沒做過多說明，有興趣的可以慢慢看吧，還有如果要看資料庫實現資料庫連線操作類的程式碼的可以看看這篇http://blog.csdn.net/cselmu9/article/details/7844235文章，這裡面有完整資料庫連線操作程式碼，這裡就不貼出來了。

swift 郵箱、密碼、手機號、身份證驗證正則
2018-10-29
Swift密碼
vue.js帳號，密碼，郵箱和移動手機號碼正則驗證
2021-06-27
Vue.js密碼
使用 Vyper 和 Python 進行自動化登入並處理驗證碼
2024-11-29
Python
郵箱地址正規表示式驗證
2020-10-22
js正則驗證身份證號
2020-11-14
JS
TP5使用bootstrapvalidator進行非同步驗證郵箱
2019-02-16
boot非同步
js驗證郵箱
2018-08-14
JS
在.NET Core 中使用 FluentValidation 進行規則驗證
2021-02-19
Ajax 實現驗證郵箱地址唯一性
2020-11-16
手機號碼驗證方法(正則驗證)
2022-03-14
Laravel 自定義登入註冊頁面並使用 Ajax 進行資料傳輸
2020-06-30
Laravel
js中使用正則驗證手機號
2018-07-18
JS
Destoon如何去除登入的郵箱驗證？
2020-11-27
正則校驗手機號和郵箱
2020-12-29
使用SpringBoot進行優雅的資料驗證
2020-11-24
Spring Boot
js正規表示式驗證手機，郵箱，身份證
2018-05-26
JS
JS驗證銀行卡號的正確性
2018-11-01
JS
使用libphonenumber驗證電話號碼 - Baeldung
2020-10-11
PHP 對資料進行驗證和過濾
2019-02-16
PHP
Java使用正規表示式對註冊頁面進行驗證功能實現
2022-03-20
Java
使用Moya庫,進行https證書校驗
2018-06-14
HTTP
直播app原始碼，驗證方式選擇郵箱驗證時，自動給輸入好的郵箱傳送驗證碼
2022-02-15
APP原始碼
Javascript使用正則驗證身份證號(簡單)
2022-03-20
JavaScript
ActionCable 中怎樣使用 devise 進行驗證
2019-09-20
dev
線上直播系統原始碼，使用者異地登入時對身份進行驗證
2023-01-06
原始碼
模擬使用者登入，內含驗證碼驗證和request等操作
2019-07-21
郵箱格式驗證
2019-03-29
jQuery驗證手機號郵箱身份證的正規表示式（含港澳臺）
2022-03-20
jQuery
Spring Boot使用JWT進行token驗證
2018-08-30
Spring BootJWT
正規表示式驗證郵箱及其解析
2020-10-12
JS登入驗證null
2018-07-01
JSNull
登入驗證碼生成kaptcha（輸入驗證碼）
2024-06-27
APT
在實際使用智慧合約中需要預言機對資料進行驗證
2021-12-17
編寫正則：匹配郵箱手機號密碼以及身份證號
2019-09-25
密碼
使用 gorilla/mux 進行 HTTP 請求路由和驗證
2018-12-15
GoUXHTTP路由
JS 監聽使用者頁面訪問&頁面關閉並進行資料上報操作
2024-05-24
JS
JavaScript郵箱格式驗證
2018-07-10
JavaScript
記在dcat-admin中，登陸頁面加驗證碼操作
2021-02-04
AJAX+JAVA使用者登陸註冊驗證
2019-01-19
Java

在登入頁面中js進行正則驗證電話號碼和郵箱地址，並使用ajax進行使用者ID的資料庫驗證

相關文章