js登录验证类

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);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值