ajax提交表單資訊+手機驗證碼註冊
阿新 • • 發佈：2018-12-17
1.手機驗證碼用的是秒嘀科技的手機簡訊功能。
2、前端頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta title="使用者註冊頁面"> <meta charset="utf-8"> <link rel="stylesheet" href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="<%=request.getContextPath()%>/css/register.css" /> <script src="<%=request.getContextPath()%>/js/jquery-1.8.3.js"></script> <script src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script> <script> /*var pathArray = window.location.pathname.split('/'); var secondLevelLocation = pathArray[1]; var loginUrl = window.location.protocol + "//" + window.location.host + "/"+ secondLevelLocation;*/ $(document).ready(function() { //開啟會員註冊 $("#login_container").hide(); $("#_start").animate({ left: '350px', height: '520px', width: '400px' }, 500, function() { $("#regist_container").show(500); $("#_close").animate({ height: '40px', width: '40px' }, 500); }); }); </script> </head> <body class="body-background"> <div class="login"> <img src="images/logo.png" width="10%" style="margin-top: -10px;margin-left: 30px"> <%--<div class="fr" style="margin-top: -10px">歡迎</div>--%> <div class="wrapper"> <div class="fl font30"> </div> </div> </div> <!-- 會員登入 --> <!--<div id='Login_start' style="position: absolute;" >--> <div id='_start' style="margin-top: 100px"> <br /> <!-- 會員註冊 --> <div id='regist_container' style="display: none;"> <div id="lab1"> <span id="lab_login">會員註冊</span> <span id="lab_toLogin">  已有賬號? <span id='toLogin' style="color: #EB9316;cursor: pointer;"><a href="login.jsp">立即登入</a></span> </span> </div> <form id="frm" method="post" enctype="application/x-www-form-urlencoded" > <div id="form_container2" style="padding-top: 25px;"> <input type="text" class="form-control" name="tb_account" value="" placeholder="使用者名稱" id="regist_account" required/> <input type="password" class="form-control"name="tb_pass" placeholder="密碼" id="regist_password1"maxlength="20"/> <input type="password" class="form-control"name="confirm_pass" placeholder="確認密碼" id="regist_password2" required/> <input type="text" class="form-control"name="tb_phoneNum" placeholder="手機號" id="regist_phone"required/> <input type="text" class="form-control"name="identify_code" placeholder="驗證碼" id="regist_vcode"maxlength="6" required/> <!--<button id="getVCode" type="button" class="btn btn-success" >獲取驗證碼</button>--> <input id="getVCode" type="button" name="tb_sendCode" class="btn btn-success" value="點擊發送驗證碼" onclick="sendCode(this)" /> </div> <input type="button" value="註冊" class="btn btn-success" id="regist_btn"/> </form> </div> </div> </body> <script type="text/javascript"> //點選按鈕後，時間為60秒，自動倒計時 var clock = ''; var nums = 60; var btn; function doLoop() { nums--; if (nums > 0) { btn.value = '重新獲取（'+nums+'）'; } else { clearInterval(clock); //清除js定時器 btn.disabled = false; btn.value = '點擊發送驗證碼'; nums = 60; //重置時間 } } //傳送手機驗證碼 function sendCode(thisBtn) { var tb_phoneNum=$('#regist_phone').val(); //驗證手機號 var pattern=/^1[3,5,7,8,9]\d{9}$/; var bo=tb_phoneNum.match(pattern); alert(bo) if(bo){ $.ajax({ //ajax傳送請求資訊 url: '<%=request.getContextPath()%>/register/postIdentifyCode.do?tb_phoneNum='+tb_phoneNum, /* data:{"tb_phoneNum":tb_phoneNum},*/ type: 'post', /*dataType: JSON,*/ success() { } }) btn = thisBtn; btn.disabled = true; //將按鈕置為不可點選 btn.value = '重新獲取（'+nums+'）'; clock = setInterval(doLoop, 1000); //一秒執行一次 }else { alert("您的電話號碼有誤，請重新輸入！") } } </script> <script> //提交表單資料 $("#regist_btn").click(function () { /*alert("提交")*/ //第一個密碼 var pass_1 = $("[name=tb_pass]").val(); //第二個密碼 var pass_2 = $("[name=confirm_pass]").val(); //輸入的手機號 var tb_phoneNum = $("[name=tb_phoneNum]").val(); //手機號正則表示式 var pattern = /^1[35789]\d{9}$/; if (pass_1 != null && pass_1 != pass_2) { alert("兩次密碼輸入不一致，請重新輸入！") $("[name=confirm_pass]").val(""); } else { if (!pattern.test(tb_phoneNum)) { alert("請您輸入11位正確手機號！") } else { if ($("[name=identify_code]").val() != null&&$("[name=identify_code]").val()!="") { $.ajax({ url: '<%=request.getContextPath()%>/register/checkCode.do', type: 'post', data: $("#frm").serialize(),//序列化表單 contentType: 'application/x-www-form-urlencoded', dataType: "text", processData: false, success: function (result) { alert(result) if (result = 'success') { alert("註冊成功！") window.location.href = "<%=request.getContextPath()%>/shopping/index.jsp"; } else { alert("註冊失敗！") window.location.href = "<%=request.getContextPath()%>/shopping/register.jsp"; } }, error: function (flag) { alert("註冊失敗！") window.location.href = "<%=request.getContextPath()%>/shopping/register.jsp"; } }) }else{ alert("驗證碼不能為空!") } } } }); </script> </html>
SSM中一般資訊資料返回用model