登入簡訊驗證實現
阿新 • • 發佈：2019-01-24
預設傳送的手機號碼為管理員,傳送的實現在後臺實現
頁面部分
<%@ page language="java" pageEncoding="utf-8"%> <%@ page import="java.util.*"%> <%@include file="/WEB-INF/pages/common/taglibs.jsp"%> <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div style="margin-top:1%;margin-left:10px"> <label class="cusorHvr" id="oriPassword" style="color:#06C;margin-bottom:2%">簡訊驗證碼：</label> <input class="textbox" type="text" id="codeIn" placeholder="請輸入簡訊驗證碼" size="10" data-options="width:'100',panelWidth:'100',panelHeight:'100'" style="width:120px"/> <input type="button" id="btnSendCode" name="btnSendCode" value="免費獲取驗證碼" onclick="sendCode()" /> </div> <div style="margin-top:1%;margin-left:10px"> <span id="tipv" style="color:#ff0000;"></span> </div> <div> <button id="valiMessBtn" class="btn btn-warning" style="margin-top:7%;margin-right:5%;float:right"type="button">確定</button> </div> </body> </html>
js部分
var InterValObj; //timer變數，控制時間 var count = 300; //間隔函式，1秒執行 ,(有效時間:5分鐘) var curCount;//當前剩餘秒數 var code = ""; //產生驗證碼 var codeLength = 6;//驗證碼長度 //傳送手機簡訊驗證碼 function sendCode(){ curCount = count; // 產生驗證碼 for ( var i = 0; i < codeLength; i++) { code += parseInt(Math.random() * 9).toString(); } // 設定button效果，開始計時 $("#btnSendCode").attr("disabled", "true"); $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); InterValObj = window.setInterval(SetRemainTime, 1000); // 啟動計時器，1秒執行一次 //傳送驗證碼到手機 TeJax({ url: $.contextPath + "/vmConnONGL_sendMessCode", async: false, method:'post', data:{ "code":code }, success: function (rel) { if(rel.result=="true"){ $.messager.alert('提示', '簡訊驗證碼已發到您的手機,請注意查收！', 'info'); }else{ $.messager.alert('提示', '簡訊驗證碼傳送失敗,請稍後再試！', 'info'); } }, error: function (rel) { $.messager.alert('錯誤','與伺服器通訊失敗，請檢查通訊狀態！','error'); } }); } //timer處理函式 function SetRemainTime() { if (curCount == 0) { //驗證碼失效,重新發送 window.clearInterval(InterValObj);// 停止計時器 $("#btnSendCode").removeAttr("disabled");// 啟用按鈕 $("#valiMessBtn").removeAttr("disabled");//確定按鈕 $("#btnSendCode").val("重新發送驗證碼"); code = ""; // 清除驗證碼。如果不清除，過時間後，輸入收到的驗證碼依然有效 }else { curCount--; $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); } }