通過js控制註冊，上程式碼：

js程式碼：

//註冊前臺驗證
	var formObj = {
		"checkRegistForm" : function() {
			 //1. 非空驗證
			var flag = true;//控制表單提交的變數，預設為true
			flag = this.checkNull("username", "使用者名稱不能為空") && flag;
			flag = this.checkNull("password", "密碼不能為空") && flag;
			flag = this.checkNull("password2", "確認密碼不能為空") && flag;
			flag = this.checkNull("nickname", "暱稱不能為空") && flag;
			flag = this.checkNull("email", "郵箱不能為空") && flag;
			flag = this.checkNull("valistr", "驗證碼不能為空") && flag;
			flag = this.checkPassword("password", "兩次密碼應該一致") && flag;
			flag = this.checkEmail("email", "郵箱格式不正確") && flag;
			return flag; 
		},
		"checkEmail" : function(name, msg) {
			var email = $("input[name='" + name + "']").val();
			// 當郵箱的值不為空串時再進行格式判斷
			if ($.trim(email) != "") {
				var reg = /^\
 
[email protected]\w+(\.\w+)+$/;
				if (!reg.test(email)) {
					this.setMsg(name, msg);//設定錯誤提示資訊
					return false;
				} else {
					this.setMsg(name, "");// 清空之前新增的錯誤提示資訊
					return true;
				}
			}
			return false;
		},
		"checkPassword" : function(name, msg) {
			var psd1 = $("input[name='" + name + "']").val();
			var psd2 = $("input[name='" + name + "2']").val();
			if ($.trim(psd1) != "" && $.trim(psd2) != "") {
				if (psd1 != psd2) {
					this.setMsg(name + "2", msg);
					return false;
				} else {
					this.setMsg(name + "2", "");// 清空之前新增的錯誤提示資訊
					return true;
				}
			}
			return false;
		},
		"checkNull" : function(name, msg) {// 用來判斷input值是否為null的方法
			var value = $("input[name='" + name + "']").val();//拿到對應的input框的值
			if ($.trim(value) == "") {
				this.setMsg(name, msg);
				return false;// 表單不應該提交
			} else {
				this.setMsg(name, "");
				return true;
			}
		},
		"setMsg" : function(name, msg) {
			// 獲取name指定的input後面的span,然後將傳入的錯誤提示資訊
			$("input[name='" + name + "']").nextAll("span").html(msg).css(
					"color", "red");
		},
	};
	// 當input失去焦點時馬上執行對應的表單驗證
	//文件就緒事件，噹噹前文件載入完成後，會自動呼叫
	    //文件每次載入都會執行
		$(function(){
			$("input[name='username']").blur(function() {
				formObj.checkNull("username", "使用者名稱不能為空");
			});
			$("input[name='password']").blur(function() {
				formObj.checkNull("password", "密碼不能為空");
			});
			$("input[name='password2']").blur(function() {
				formObj.checkNull("password2", "確認密碼不能為空");
				formObj.checkPassword("password", "兩次密碼應該一致");
			});
			$("input[name='nickname']").blur(function() {
				formObj.checkNull("nickname", "暱稱不能為空");
			});
			$("input[name='email']").blur(function() {
				formObj.checkNull("email", "郵箱不能為空");
				formObj.checkEmail("email", "郵箱格式不正確");
			});
			$("input[name='valistr']").blur(function() {
				formObj.checkNull("valistr", "驗證碼不能為空");
			});
			$("#valiImage").click(function() {
				var timeStr = new Date().getTime();
				var url = "user/valistr.do?time=" + timeStr;
				$("#valiImage").attr("src", url);
			});
		});
 

表單:

<form action="user/add.do" method="post"
		onSubmit="return formObj.checkRegistForm()" >

over.