基於Ajax,非同步表單驗證,實現有一條件不滿足不能提交
阿新 • • 發佈:2019-02-10
1. 頁面關鍵程式碼
2. js 關鍵程式碼<!--註冊頁--> <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>
//登錄檔單總校驗 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; }