前端傳送簡訊驗證
阿新 • • 發佈：2018-12-16
基於jq，mui做的簡訊驗證頁面。
<!DOCTYPE html> <html class="ui-page-login"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <style> .area { margin: 20px auto 0px auto; } .mui-input-group:first-child { margin-top: 20px; } .mui-input-group label { width: 22%; } .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea { width: 78%; } .mui-checkbox input[type=checkbox], .mui-radio input[type=radio] { top: 6px; } .mui-content-padded { margin-top: 25px; } .mui-btn { padding: 10px; } .mui-input-row{ display: flex; align-items: center; justify-content: flex-start; padding-left: 20px; } input[type=text],input[type=password]{ width: 80%; } .code{ width: 65% !important; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">註冊</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row"> <div class="mui-icon mui-icon-phone"></div> <input id='account' type="text" class=" mui-input-clear mui-input" value="13638642400" placeholder="手機號"> </div> <div class="mui-input-row"> <div class="mui-icon mui-icon-paperclip"></div> <input id='code' type="text" class="mui-input-clear mui-input code" placeholder="請輸入驗證碼"> <button type="button" class=" mui-btn-blue" id="cfbut">傳送</button> </div> <div class="mui-input-row"> <div class="mui-icon mui-icon-locked"></div> <input id='password' type="password" class="mui-input-clear mui-input" value="123456" placeholder="請輸入密碼"> </div> <div class="mui-input-row"> <div class="mui-icon mui-icon-locked"></div> <input id='password_confirm' type="password" class="mui-input-clear mui-input" value="123456" placeholder="請確認密碼"> </div> </form> <div class="mui-content-padded"> <button id='reg' class="mui-btn mui-btn-block mui-btn-primary">註冊</button> </div> <div class="mui-content-padded"> <p>註冊真實可用，註冊成功後的使用者可用於登入，但是示例程式並未和服務端互動，使用者相關資料僅儲存於本地。</p> </div> </div> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/req.js" type="text/javascript" charset="utf-8"></script> <script src="js/mui.min.js"></script> <script src="js/app.js"></script> <script> (function(mui, doc) { mui.init(); let settings = app.getSettings(); let regButton = doc.getElementById('reg'); let accountBox = doc.getElementById('account'); let passwordBox = doc.getElementById('password'); let code = doc.getElementById('code'); let passwordConfirmBox = doc.getElementById('password_confirm'); regButton.addEventListener('tap', function(event) { var regInfo = { account: accountBox.value, password: passwordBox.value, code: code.value }; if("" == regInfo.account || "" == regInfo.password){ mui.toast('使用者名稱或密碼不能為空'); return; } var passwordConfirm = passwordConfirmBox.value; if (passwordConfirm != regInfo.password) { mui.toast('密碼兩次輸入不一致'); return; } let data = { url:"註冊介面", data:{ mobile:regInfo.account, password:regInfo.password, code:regInfo.code }, } //我自己封裝的ajax，可以看看我的文章 ajax(data,function(res){ console.log(res); if(res.code == -1){ mui.toast(res.message); } if(res.code == 1){ mui.toast("註冊成功"); } }); }); let i = 0,flag = true; $("#cfbut").bind("click",function(){ if(flag){ let data = { url:"簡訊介面", data:{ mobile:accountBox.value }, } ajax(data,function(json){ console.log(json); }); let time; flag = !flag; mui.toast('驗證碼已傳送到您的手機，請稍等...'); time = setInterval(function(){ i++; $("#cfbut").html("重發"+ i); if(i > 59){ i = 0; clearInterval(time); mui.toast("如果驗證碼未收到，請重發"); flag = !flag; $("#cfbut").html("重發"); } },1000); } }) }(mui, document)); </script> </body> </html>