JavaWeb 註冊表單驗證

表單

					<!--註冊表單-->
    				<form id="registerForm" action="user">
						<!--提交處理請求的標識符-->
						<input type="hidden" name="action" value="register">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">用戶名</label>
								</td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="請輸入賬號">
								</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">密碼</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="password" name="password" placeholder="請輸入密碼">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Email</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="請輸入Email">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="name">姓名</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="name" name="name" placeholder="請輸入真實姓名">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">手機號</label>
    							</td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="telephone" placeholder="請輸入您的手機號">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">性別</label>
    							</td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="男" checked> 男
    								<input type="radio" name="sex" value="女"> 女
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="birthday">出生日期</label>
    							</td>
    							<td class="td_right">
    								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">驗證碼</label>
    							</td>
    							<td class="td_right check">
    								<input type="text" id="check" name="check" class="check">
    								<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
									<script type="text/javascript">
										//圖片點擊事件
										function changeCheckCode(img) {
											img.src="checkCode?"+new Date().getTime();
                                        }
									</script>
    							</td>
    						</tr>
    						<tr>
    							<td class="td_left"> 
    							</td>
    							<td class="td_right check"> 
    								<input type="submit" class="submit" value="註冊！">	<div id="errorMsg" style="color:red;text-align: center"></div>
									<span id="msg" style="color: red;"></span>

    							</td>
    						</tr>
    					</table>
    				</form>

2 校驗

		<!-- 表單校驗  -->
		<script>
			/*
					表單校驗：
						1.用戶名：單詞字符，長度8到20位
						2.密碼：單詞字符，長度8到20位
						3.email：郵件格式
						4.姓名：非空
						5.手機號：手機號格式
						6.出生日期：非空
						7.驗證碼：非空
				 */
			function checkUsername() {
				//1.獲取用戶名值
				var username = $("#username").val();
				//2.定義正則
				var reg_username = /^\w{3,20}$/;

				//3.判斷，給出提示信息
				var flag = reg_username.test(username);
				if(flag){
					//用戶名合法
					$("#username").css("border","1px solid green");
				}else{
					//用戶名非法,加一個紅色邊框
					$("#username").css("border","1px solid red");
				}
				return flag;
			}

			//校驗密碼
			function checkPassword() {
				//1.獲取密碼值
				var password = $("#password").val();
				//2.定義正則
				var reg_password = /^\w{8,20}$/;
				//3.判斷，給出提示信息
				var flag = reg_password.test(password);
				if(flag){
					//密碼合法
					$("#password").css("border","1px solid green");
				}else{
					//密碼非法,加一個紅色邊框
					$("#password").css("border","1px solid red");
				}
				return flag;
			}

			//校驗郵箱
			function checkEmail(){
				//1.獲取郵箱
				var email = $("#email").val();
				//2.定義正則		[email protected]
				var reg_email = /^\w+@\w+\.\w+$/;

				//3.判斷
				var flag = reg_email.test(email);
				if(flag){
					$("#email").css("border","1px solid green");
				}else{
					$("#email").css("border","1px solid red");
				}
				return flag;
			}

			//檢驗名字
			function checkName(){
				var name = $("#name");
				var name_val = $.trim(name.val());
				var flag;
				if(name_val == '' || name_val == null) {
					$("#name").css("border","1px solid red");
					flag = false;
				}else{
					$("#name").css("border","1px solid green");
					flag = true;
				}
				return flag;
			}

			//校驗手機
			function checkTelephone(){
				//1.獲取密碼值
				var telephone = $("#telephone").val();
				//2.定義正則
				var reg_telephone = /^\d{11}$/;
				//3.判斷，給出提示信息
				var flag = reg_telephone.test(telephone);
				if(flag){
					//密碼合法
					$("#telephone").css("border","1px solid green");
				}else{
					//密碼非法,加一個紅色邊框
					$("#telephone").css("border","1px solid red");
				}
				return flag;
			}


			$(function () {
				//當表單提交時，調用所有的校驗方法
				$("#registerForm").submit(function(){
					//1.發送數據到服務器
					if(checkUsername() && checkPassword() && checkEmail() && checkName() && checkTelephone()){
						//校驗通過,發送ajax請求，提交表單的數據   username=zhangsan&password=123
						$.post("registUserServlet",$(this).serialize(),function(data){
							//處理服務器響應的數據  data  {flag:true,errorMsg:"註冊失敗"}
							// 從registUserServlet響應回來的是ResultInfo（JSON格式）
							if(data.flag){
								//註冊成功，跳轉成功頁面
								location.href="register_ok.html";
							}else{
								//註冊失敗,給errorMsg添加提示信息
								$("#errorMsg").html(data.errorMsg);
							}
						});
					}
					//2.不讓頁面跳轉
					return false;
					//如果這個方法沒有返回值，或者返回爲true，則表單提交，如果返回爲false，則表單不提交
				});

				//當某一個組件失去焦點是，調用對應的校驗方法
				$("#username").blur(checkUsername);
				$("#password").blur(checkPassword);
				$("#email").blur(checkEmail);
				$("#name").blur(checkName);
				$("#telephone").blur(checkTelephone);
			});

		</script>