js登入驗證類
阿新 • • 發佈:2019-02-14
window.onload = function() { new login(); } /** * 這裡改了2次。預留了一個驗證手機號獲取次數的,後期再補吧 * 阿里雲MSM有個小時級的流控BUG未修復 * cookie裡面有個bug * return @老楊 */ var login = function() { this.phoneNumber = null; // 手機號 this.password = null; // 密碼 this.msmCode = null; // 簡訊驗證碼 this.getMsmCodeMark = false; // 是否獲取了簡訊驗證碼 this.validateMsmCodeError = null; // 驗證碼簡訊錯誤提示 this.getMsmCodeTimerNumber = 30; // 獲取簡訊驗證碼倒計時 if ($.cookie("getMsmCodeTimerNumber")) { this.getMsmCodeTimerNumber = $.cookie("getMsmCodeTimerNumber"); } if (this.getMsmCodeTimerNumber != 30) { this.getMsmCodeTimer(); } $("#phoneNumber").keyup(this, this.checkPhoneNumber); // 手機號事件 $("#getCodeBtn").click(this, this.getCode); // 獲取驗證碼事件 $("#loginBtn").click(this, this.submit); // 登入事件 } // 獲取驗證碼 login.prototype.getCode = function(data) { var _this = data.data; if (_this.validatePhoneNumber() !== "SUCCESS") { return layer.open({ title: "出錯了", content: "請檢測您的手機號碼是否輸入正確", icon: 2 }); } // 傳送驗證碼 // console.log("傳送驗證碼") // 驗證碼獲取倒計時 _this.getMsmCodeTimer(); // 開發傳送驗證碼 var layerIndex = null; $.ajax({ url: "/user.php/Login/getMsmCode/", data: {phoneNumber: _this.phoneNumber}, beforeSend: function() { layerIndex = layer.load(1); }, complete: function() { layer.close(layerIndex); }, success: function(data) { if (data.status == 'error') { return layer.alert(data.msg, {icon: 2}); } layer.alert(data.msg, {icon: 1}); _this.getMsmCodeMark = true; // console.log("傳送驗證碼成功") } }); } // 提交表單 login.prototype.submit = function(data) { var _this = data.data; // 驗證表單 if (_this.validate() !== "SUCCESS") { return false; } return true; } /** * 提交表單驗證規則 */ login.prototype.validate = function() { // console.log("檢測表單開始"); // console.log("驗證手機號"); if (this.validatePhoneNumber() !== "SUCCESS") { layer.open({ title: "出錯了", content: "請檢測您的手機號碼是否輸入正確", icon: 2 }); return "phoneNumberNot"; } // console.log("手機號通過"); // console.log("驗證密碼"); if (this.validatePassword() !== "SUCCESS") { layer.open({ title: "出錯了", content: "密碼不能小於6位", icon: 2 }); return "passwordNot"; } // console.log("密碼通過"); // 驗證碼 // console.log("檢測驗證碼"); if (this.validateMsmCode() !== "SUCCESS") { layer.open({ title: "出錯了", content: this.validateMsmCodeError, icon: 2 }); return "msmCodeNot"; } // console.log("驗證碼通過"); return 'SUCCESS'; } // 手機號只能輸入數字 login.prototype.checkPhoneNumber = function() { var phoneNumber = $(this).val(); var val = phoneNumber.replace(/[^0-9]/g, ''); $(this).val(val); } // 檢測手機號碼 login.prototype.validatePhoneNumber = function() { var phoneNumber = $("#phoneNumber").val(); var reg = /^1[3|5|7|8][0-9]{9}$/; if (!reg.test(phoneNumber)) { return "phoneNumberRuleError"; } // 鎖定手機號 $("#phoneNumber").attr("disabled", true); this.phoneNumber = phoneNumber; return "SUCCESS"; } // 檢測密碼 login.prototype.validatePassword = function() { var password = $("#password").val(); // 不為空,不小於6位 if (!password || password.length < 6) { return "passwordLengthError"; } return "SUCCESS"; } // 檢測驗證碼 login.prototype.validateMsmCode = function() { // 還沒獲取驗證碼 if (this.getMsmCodeMark == false) { this.validateMsmCodeError = "您還未獲取簡訊驗證碼"; return "noGetMsmCode"; } var msmCode = $("#msmCode").val(); if (!msmCode || msmCode.length != 4) { this.validateMsmCodeError = "驗證碼位4位數字"; return "msmCodeLengthError"; } return "SUCCESS"; } // 獲取驗證碼倒計時 login.prototype.getMsmCodeTimer = function() { // console.log("鎖定按鈕") $("#getCodeBtn").attr("disabled", true); $("#getCodeBtn").text(this.getMsmCodeTimerNumber); var timeNumber = parseInt(this.getMsmCodeTimerNumber) timer = setInterval(function() { $("#getCodeBtn").text(--timeNumber); $.cookie("getMsmCodeTimerNumber", timeNumber); if (timeNumber <= 0) { $.cookie("getMsmCodeTimerNumber", 30); clearInterval(timer); $("#getCodeBtn").text("獲取"); $("#getCodeBtn").removeAttr("disabled"); return; } }, 1000); }