仿鳳凰網的註冊頁面，javascript完成簡單的空/郵箱格式/字符串的長度校驗 ajax完成服務器端是否同名校驗

注意以下幾點：1，文本框的name,id最好一致，規範性的命名才符合實際應用，

2，後面校驗的顯示信息此處我定義的爲原來id+“js”,當然這裏可以隨意，不過，關於驗證所有的文本框是否爲空這方法中我把封裝一工具方法，當然可以每個都判斷，不過太麻煩，我見鳳凰網的註冊頁面就是這樣一個一個的寫，太麻煩了。

代碼如下：

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<base href="<%=basePath%>">
	<head>
	<link href="css/main.css" type="text/css"  media="screen"  rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/register.js"></script>
		<title>我的博客系統註冊</title>
	</head>
	<body>
	<div class="registerBody">
	<div style="height:500px;" class="registerBox" >
		<div class="tit" style="padding:10px 10px 0 0; height:35px; background-position:left bottom;">
		<span style="float:right">
		已經註冊？請直接
		<a href="">
		<strong class="u_blue">
			<u>登錄</u>
		</strong>
		</a>
		</span>
		<h3 class="u_blue">註冊用戶</h3>
	</div>
		<hr/>
		<s:form name="reg" action="register" validate="true">
			<table align="center">
				<tr>
					<td>
						<label>
							帳號:
						</label>
					</td>
					<td>
						<input type="text" id="username" name="username" />
						*
					</td>
					<td>
						<div id="usernameJS"></div>
					</td><td id="usernameMessage"></td>
				</tr>
				<tr>
					<td>
						<label>
							密碼：
						</label>
					</td>
					<td>
						<input type="password" id="password" name="password" />
						*
					</td>
					<td>
						<div id="passwordJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							確認密碼：
						</label>
					</td>
					<td>
						<input type="password" id="repassword" name="repassword" />
						*
					</td>
					<td>
						<div id="repasswordJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							郵箱 :
						</label>
					</td>
					<td>
						<input type="text" id="email" name="email" />
						*
					</td>
					<td>
						<div id="emailJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							暱稱:
						</label>
					</td>
					<td>
						<input type="text" id="nickname" name="nickname" />
						*
					</td>
					<td>
						<div id="nicknameJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							密碼保護問題:
						</label>
					</td>
					<td>
						<input type="text" id="question" name="question" />
						*
					</td>
					<td>
						<div id="questionJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							密碼保護的答案:
						</label>
					</td>
					<td>
						<input type="text" id="answer" name="answer" />
						*
					</td>
					<td>
						<div id="answerJS"></div>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" id="submit" value="註冊" οnclick="return doSubmit()"/>
					</td>
				</tr>
			</table>
		</s:form>
	</div>
	
	<hr/>
	<div class="copyright" align="center">
	博客網站 版權所有
<br>
Copyright © 2008-2012 Henu University. All Rights Reserved. 
	</div></div>
	</body>
</html>

頁面如下：

當然界面可以加些圖片，因爲我美感不好，弄個醜八怪，基本雛形就這樣。

下面是js代碼：

$().ready(function() {
			isNullValidate("#username", "用戶名不能爲空","請輸入常用的用戶名，該用戶名將作爲登錄"), 
			isNullValidate("#password", "密碼不能爲空","請設置您的密碼"),
			isNullValidate("#repassword", "確認密碼不能爲空","請輸入常用密碼"),
			isNullValidate("#nickname","暱稱不能爲空","請設置您的暱稱"),
			isNullValidate("#question", "密保問題不能爲空","請設置您的密保"), 
			isNullValidate("#answer", "答案不能爲空","請設置您的密保問題"),
			isNullValidate("#email","郵箱不能爲空","請設置您的郵箱")
			validateEmail(),
			validateUsername(),
			validateLength("#username",3,20,"用戶名長度必須爲3-20位"),
			validateLength("#password",3,30,"用戶名長度必須爲3-30位"),
			validateEqual("#password","#repassword","密碼不一致")
		})

//isNull校驗是否爲空
function isNullValidate(id, message,messageTip) {
	//失去焦點 進行校驗
	$(id).blur(function(){
		isNull(id,message);
		});
	//得到焦點顯示的提示信息
	$(id).focus(function(){
		showTip(id,messageTip);
		});
}
function showTip(id,messageTip){
	var idJS= id + "JS";
	$(idJS).css({"color":"black"});
	showMessage(idJS,messageTip);
}
function isNull(id,message){
		var value = $(id).val();
		var idJS = id + "JS";
		if (value == null || value == "") {
			$(idJS).css({"color":"red"});
			$(id).css({"background":"gray","border-color":"red","border":""});
			showMessage(idJS, message);
			return false;
		} else {
			$(id).css({"background":"white"});
			showMessage(idJS, "");
			showPic(idJS);
			return true;
		}
}
//validateLength校驗長度
function validateLength(id, min, max, message) {
	$(id).blur(function() {
		validate_length(id,min,max,message);
	})
}
function validate_length(id,min,max,message){
		var idJS = id + "JS";
		var value = $(id).val();
		if (value.length < min || value.length > max){
			showMessage(idJS, message);
			$(idJS).css({"color":"red"});
			return false;
		}
		else{
			showMessage(idJS, "");
			showPic(idJS);
			return true;
			}
}
//validateEqual校驗是否相等
function validateEqual(id1, id2, message) {
	//此處無法$(id1,id2)，否則將出現奇怪的錯誤，而其他網站也同樣有這樣的bug
	//比如前兩次分別輸入密碼（password，repassword）相同，當改變第一個密碼加其他的後不提示密碼不一致
	$(id2).blur(function() {
	validate_equal(id1,id2,message);
	})
}
function validate_equal(id1,id2,message){
		var idJS2 = id2 + "JS";
		var value1 = $(id1).val();
		var value2 = $(id2).val();
		if (value1 != value2) {
			showMessage(idJS2, message);
			$(idJS2).css({"color":"red"});
			$(id2).css({"background":"gray","border-color":"red","border":""});
			$(id1).css({"background":"gray","border-color":"red","border":""});
			return false;
		} else {
			$(id1).css({"background":"white"});
			$(id2).css({"background":"white"});
			showMessage(idJS2, "");
			showPic(idJS2);
			return true;
		}
}
//validateEmali校驗email格式
function validateEmail() {
	$("#email").blur(function(){
		isEmail();
	} )
}
function isEmail(){
			var email = $("#email").val();
			var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
			if (reg.test(email)) {
//				showMessage("#emailJS", "");
//				showPic("#emailJS");
				return true;
			} else {
				showMessage("#emailJS", "Email格式不正確");
				$("#emailJS").css({"color":"red"});
				$("#email").css({"background":"gray","border-color":"red","border":""});
				return false;
						}
}
function validateName(){
		$.ajax( {
			type : "POST",
			url : "executeUsername",
			data : "username=" + $("#username").val(),
			success : getValidateName,
			dataType : "text"
			});
}
function getValidateName(message) {
				if(message == "false"){
					showMessage("#usernameJS","用戶名已註冊，請更換註冊名");
					$("#username").css({"background":"gray","border-color":"red","border":""});		
					$("#usernameJS").css({"color":"red"});
					return false;
				}
				else{
					showMessage("#usernameJS","恭喜你，此用戶名可用");
					$("#username").css({"background":"white"});
					$("#usernameJS").css({"color":"green"});
					return true;
				}
			}
//valivateUsername校驗用戶名是否被註冊
function validateUsername() {
	$("#username").blur(function(){
		var value=$("#username").val();
		if(value!=null&&value!=""){
		validateName();
		}else return false;
	} )
}
//showMessage工具方法，顯示某id需要顯示的信息
function showMessage(id, message) {
	$(id).html(message);
}
function showPic(id) {
	$(id).append("<img src='images/register_ok.png'></img>");
}


function doSubmit(){
	
		if(isNull("#username", "用戶名不能爲空","#usernameJS")
			&& isNull("#password", "密碼不能爲空","#passwordJS")
			&& isNull("#repassword", "確認密碼不能爲空","#repasswordJS")&&  isNull("#nickname","暱稱不能爲空","#nicknameJS")
			&& isNull("#question", "密保問題不能爲空","#questionJS")&&  isNull("#answer", "答案不能爲空","#answerJS")
			&& isNull("#email","郵箱不能爲空","#emailJS")
			&& isEmail()
//			&& validateName()
			&& validate_length("#username",3,20,"用戶名長度必須爲3-20位")
			&& validate_length("#password",3,30,"用戶名長度必須爲3-30位")
			&& validate_equal("#password","#repassword","密碼不一致")){
				return true;
			}
			else {
				alert("請重新輸入");
				return false;
			}
		}

相信大家也看到了，

$().ready(function() 定義頁面加載的腳本，這裏我們綁定文本框的focus和blur事件，即，聚焦和失去焦點，當聚焦時在div裏顯示出要輸入的信息，而失去焦點時進行校驗，這裏有個關鍵的，利用ajax往action裏查詢是否有輸入的用戶名，並返回true或false字符串，

所以

function validateName(){
		$.ajax( {
			type : "POST",
			url : "executeUsername",
			data : "username=" + $("#username").val(),
			success : getValidateName,
			dataType : "text"
			});
}傳參數，返回函數處理如下：

function getValidateName(message) {
				if(message == "false"){
					showMessage("#usernameJS","用戶名已註冊，請更換註冊名");
					$("#username").css({"background":"gray","border-color":"red","border":""});		
					$("#usernameJS").css({"color":"red"});
					return false;
				}
				else{
					showMessage("#usernameJS","恭喜你，此用戶名可用");
					$("#username").css({"background":"white"});
					$("#usernameJS").css({"color":"green"});
					return true;
				}
			}

action中處理：

public String executeUsername(){
	HttpServletResponse response = ServletActionContext.getResponse();
	response.setCharacterEncoding("UTF-8");
	PrintWriter writer = null;
	try {
		writer = response.getWriter();
	} catch (IOException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	if(userService.regusterUsername(username)){
		writer.print("false");
	}else{
		writer.print("true");
	}
	return null;
}

此時基本完成，下面是效果圖：

仿鳳凰網的註冊頁面，javascript完成簡單的空/郵箱格式/字符串的長度校驗 ajax完成服務器端是否同名校驗

XMLHttpRequest詳情之GET和POST(二)

仿鳳凰網的註冊頁面，javascript完成簡單的空/郵箱格式/字符串的長度校驗 ajax完成服務器端是否同名校驗

XMLHttpRequest對象詳解之簡單請求（一）

jquery load方法

oracle 筆記和練習

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結