1. 程式人生 > >基於Ajax,非同步表單驗證,實現有一條件不滿足不能提交

基於Ajax,非同步表單驗證,實現有一條件不滿足不能提交

1. 頁面關鍵程式碼

<!--註冊頁-->
		<div id="register_fa">
			<div id="register_win">
				<a class="close" href="javascript:closeRegister();">
					<img src="img/top/close.png" />
				</a>
				<form id="register" method="post" onsubmit="return checkRegisterForm()">
					<div>
						<!--<div class="register"><span>註冊</span></div>-->
						<div class="register">
							<h4>使用者名稱:<span id="registerName"></span></h4>
							<input type="text" name="loginName" id="Name" onfocus="register(this)" onblur="checkName()"/>
						</div>
					    <div class="register">
					    	<h4>密碼:<span id="registerPwd"></span></h4>
					    	<input type="password" name="loginPwd" id="regPwd" onfocus="register(this)" onblur="checkPwd()"/>
					    </div>
					    <div class="register">
					    	<h4>確認密碼:<span id="registerPwd1"></span></h4>
					    	<input type="password" name="loginPwd1" id="regPwd1" onfocus="register(this)" onblur="checkrPwd()"/>
					    </div>
					    <div class="register">
					    	<h4>驗證碼:<span id="verificationCode"></span></h4>
					    	<input type="text" name="verCode" id="verCode"  onfocus="register(this)" onblur="checkCode()"/>
					    	<div><img src="<%=request.getContextPath()%>/createCode" id="createCode"/></div>
					    </div>
					    <button class="botton_sub" type="submit" >立即註冊</button>
					</div>	
				</form>
			</div>
		</div>
		<!--登入頁 -->
		<div id="login_fa">
			<div id="login_win">
				<a class="close" href="javascript:closeLogin();">
					<img src="img/top/close.png" />
				</a>
				<form id="login" method="post" onsubmit="return checkForm()">
					<div>
						<div class="login">
							<h4>使用者名稱:<span id="loginName"></span></h4>
							<input type="text" name="loginuserName" id="loginName2" onfocus="register(this)" onblur="synUser()"/>
						</div>
					    <div class="login">
					    	<h4>密碼:<span id="VerifyregisterPwd"></span></h4>
					    	<input type="password" name="loginPwd" id="VerifyPwd" onfocus="register(this)" onblur="VerifyPass()"/>
					    </div>
					    <button class="botton_sub" type="submit">立即登入</button>
					</div>	
				</form>
			</div>
		</div>
2. js 關鍵程式碼
//登錄檔單總校驗
	function checkRegisterForm(){
	    if(checkName()&&checkPwd()&&checkrPwd()&&checkCode()){	
	    	jQuery.ajax({
				url :"/supermarket/AddNewUser",
				type : "post",
				dataType :"json",
				async:false,
				data :jQuery('#register').serialize(),
				success : function(data) {			
						if(data.state=="Y"){
							alert("註冊成功");
							closeRegister();
							flg=true;
						}else if (data.state=="N") {
							alert("註冊失敗");
							closeRegister();
							flg=false;
						}																	
					},
					error:function(){
						alert("異常錯誤");
					}
				});	
	    return true;
	    }
	    return false; 
	}
	//註冊框焦點聚集
	function register(pwp) {
		$(pwp).parent().children().eq(0).children('span').css("display","none");
		/*$('#registerName').css("display","none");
		$('#registerPwd').css("display","none");
		$('#registerPwd1').css("display","none");	*/
	};
	//註冊驗證使用者
	function checkName(){
		var flg=false;
		if($('#Name').val()==""){
			$('#registerName').html("使用者名稱不能為空").css({"display":"inline","color":"red"});
			flg=false;
		}else if(!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test($('#Name').val())){
			$('#registerName').html("字母開頭,長度5-16,只含字母,數字,下劃線").css({"display":"inline","color":"red"});
			flg=false;
		}else{
			jQuery.ajax({
				url :"/supermarket/checkNameServlet",
				type : "post",
				dataType :"json",
				async:false,
				data :jQuery('#Name').serialize(),
				success : function(data) {			
						if(data.state=="N"){
							$('#registerName').html("可註冊").css({"display":"inline","color":"green"});
							flg=true;
						}else if (data.state=="Y") {
							$('#registerName').html("使用者已存在").css({"display":"inline","color":"red"});
							$('#loginName').val("");
							flg=false;
						}																	
					},
					error:function(){
						alert("異常錯誤");
					}
				});		
		}
		return flg;
	}
	//註冊驗證密碼
	function checkPwd() {
		if ($('#regPwd').val()=="") {
			$('#registerPwd').html("密碼不能為空").css({"display":"inline","color":"red"});
			return false;
		}else if(!/^[a-zA-Z]\w{5,17}$/.test($('#regPwd').val())){
			$('#registerPwd').html("字母開頭,長度6-18,只含字母,數字,下劃線").css({"display":"inline","color":"red"});
			return false;
		}
		return true;
	};
	//註冊驗證確認密碼
	function checkrPwd() {
		if ($('#regPwd').val()=="") {
			$('#registerPwd').html("密碼不能為空").css({"display":"inline","color":"red"});
			return false;
		}else if ($('#regPwd1').val()=="") {
			$('#registerPwd1').html("密碼不能為空").css({"display":"inline","color":"red"});
			return false;
		}else {
			
			if ($('#regPwd').val()!=$('#regPwd1').val()) {
				$('#registerPwd1').html("前後密碼不一致").css({"display":"inline","color":"red"});
				return false;
			}
		}	
		return true;
	};
	
	//驗證碼

	var num = 0;
	var img = document.getElementById('createCode').onclick = function(){
		num++;
		this.src = 'createCode?num'+num;
	}
	function checkCode(){
		var flg=false;
		if($('#verCode').val()==""){
			$('#verificationCode').html("驗證碼不能為空").css({"display":"inline","color":"red"});
			flg=false;
		}else{
			$.ajax({
				type:"post",
				url:"CheckCode",
				async:false,
				dataType :"json",
				data :jQuery('#verCode').serialize(),
				success:function(data){
					if(data.state=="Y"){
						$('#verificationCode').html("驗證碼正確").css({"display":"inline","color":"green"});
						flg=true;
					}else if (data.state=="N") {
						$('#verificationCode').html("驗證碼錯誤").css({"display":"inline","color":"red"});
//						$('#verCode').val("");
						flg=false;
					}				
				}
	})
		}
	return flg;
}
	
	//驗證登入密碼
	function checkForm(){
		var flg=false;
		if($('#VerifyPwd').val()==""){
			$('#VerifyregisterPwd').html("密碼不能為空").css({"display":"inline","color":"red"});
			flg=false;
		}else{
			jQuery.ajax({
				url :"/supermarket/VerifyLoginPass",
				type : "post",
				dataType :"json",
				async:false,
				data :jQuery('#login').serialize(),
				success : function(data) {			
						if(data.state=="Y1"){
							closeLogin();
							flg=true;
						}else if(data.state=="Y2"){
							window.location.href="/supermarket/jsp/admin/admin_index.jsp";
						}else if (data.state=="N") {
							$('#loginName').html("賬號或密碼不正確").css({"display":"inline","color":"red"});
							$('#VerifyPwd').val("");
							flg=false;
						}																	
					},
					error:function(){
						alert("異常錯誤");
					}
				});		
		}
		return flg;
		}