1. 程式人生 > >js登入驗證類

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