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);
}
js登录验证类
最新推荐文章于 2021-06-09 16:55:01 发布