index.js 8.72 KB
/**
 * 登录
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/12/11
 */
var $ = require('yoho-jquery');

var $account = $('#account'),
    $password = $('#password'),
    $captcha = $('#captcha');

var $accountTip = $account.siblings('.err-tip'),
    $passwordTip = $password.siblings('.err-tip'),
    $captchaTip = $captcha.siblings('.err-tip'),
    $capsLock = $('#caps-lock');

var $countryCodeHide = $('#country-code-hide'),
    $countryCodeEm = $('#country-code > em'),
    $countryList = $('#country-list');

var $emailAutoComplete = $('#email-autocomplete');

var mailPhoneRegx = require('../common/mail-phone-regx');
var mailAc = require('../common/ac-email'); // 邮箱自动完成

var $remember = $('.remember-me');

var captchaUrl = '/passport/imagesNode?t='; // /passport/images?t=1454464125

var $captchaWrap = $('.captcha-wrap'),
    $captchaImg = $captchaWrap.find('#captcha-img');

// checkbox status unicode
var checkbox = {
    checked: '&#xe612;',
    unchecked: '&#xe613;'
};

var authing = false;

var emailAcTime;

require('../../simple-header');

$captcha = $captchaWrap.find('#captcha');
$captchaTip = $captchaWrap.find('.err-tip');



require('yoho-jquery-placeholder');

// 验证账户名
function validateAccount() {
    var pass = false,
        account = $.trim($account.val()),
        countryCode = $countryCodeHide.val(),
        err;

    if (account !== '') {
        if (/^[0-9]+$/.test(account)) {

            // 如果是纯数字,则作为手机号码处理
            if (countryCode !== '+86' ||
                mailPhoneRegx.phoneRegx[countryCode].test(account)) {
                pass = true;
            } else {
                pass = false;
                err = '手机号码不正确,请重新输入';
            }
        } else {
            if (mailPhoneRegx.emailRegx.test(account)) {
                pass = true;
            } else {
                pass = false;
                err = '邮箱格式不正确,请重新输入';
            }
        }
    } else {
        err = '请输入账户名';
    }

    if (pass) {
        $accountTip.addClass('hide');
        $account.removeClass('error');
    } else {
        $accountTip.removeClass('hide').children('em').text(err);
        $account.addClass('error');
    }
    return pass;
}

// 验证密码
function validatePassword() {
    var pass = false,
        password = $.trim($password.val()),
        err;

    if (password !== '') {
        if (password.length < 6) {
            err = '请输入长度为6-20字符的密码';
        } else {
            pass = true;
        }
    } else {
        err = '请输入密码';
    }

    if (pass) {
        $passwordTip.addClass('hide');
        $password.removeClass('error');
    } else {
        $passwordTip.removeClass('hide').children('em').text(err);
        $password.addClass('error');
    }
    return pass;
}

// 验证验证码
function validateCaptcha() {
    var pass = false,
        captcha = $.trim($captcha.val()),
        err;

    // 验证码不可见的时候不验证
    if ($captchaWrap.is(':hidden')) {
        return true;
    }

    if (captcha !== '') {
        if (captcha.length !== 4) {
            err = '请输入长度为4字符的验证码';
        } else {
            pass = true;
        }
    } else {
        err = '请输入验证码';
    }

    if (pass) {
        $captchaTip.addClass('hide');
        $captcha.removeClass('error');
    } else {
        $captchaTip.removeClass('hide').children('em').text(err);
        $captcha.addClass('error');
    }
    return pass;
}

// 验证
function validate() {
    var pass = true,
        account = $.trim($account.val()),
        password = $.trim($password.val());

    if (account !== '') {
        pass = validateAccount() && validatePassword() && validateCaptcha();
    } else {
        pass = false;
        $account.addClass('error');

        if (password === '') {

            // 账户名和密码都为空的情况下点击登陆,只在账户输入框后显示错误提示
            $accountTip.addClass('both-error').removeClass('hide').children('em').text('请输入账户名和密码');
            $passwordTip.addClass('hide');
            $password.addClass('error');
        } else {
            $accountTip.removeClass('hide').children('em').text('请输入账户名');
        }
    }

    return pass;
}

// 密码错误次数,超过三次显示验证码
function vaAccountErrTimes() {
    $captchaImg.attr('src', captchaUrl + $.now());
    $captcha.val('');
    $captchaWrap.removeClass('hide');
}

// 登录
function login() {
    var pass = validate();

    if (pass && authing === false) {
        authing = true;

        $.ajax({
            url: '/passport/login/auth',
            type: 'POST',
            data: {
                areaCode: $countryCodeHide.val().replace('+', ''),
                account: $.trim($account.val()),
                password: $.trim($password.val()),
                captcha: $.trim($captcha.val()),
                isRemember: $remember.hasClass('checked') ? true : false
            },
            success: function(res) {
                if (res.code === 200) {
                    if (res.data) {

                        // 防止data.data为undefined时下行语句执行出错而导致脚本不能走到complete去处理authing
                        location.href = res.data.session;
                    }
                } else {
                    if (res.data.errorType === 'captcha') {
                        $captchaTip.removeClass('hide').children('em').html(res.message);
                        $captcha.addClass('error').val('');
                    } else {
                        $passwordTip.removeClass('hide').children('em').html(res.message);
                        $password.addClass('error').val('');
                    }

                    // 验证错误次数
                    if (res.data && res.data.needCaptcha) {
                        vaAccountErrTimes();
                    }
                }
            },
            complete: function() {
                authing = false;
            }
        });
    }
}

mailAc($account, function() {
    if (validateAccount()) {
        $.ajax({
            url: '/passport/login/account',
            type: 'GET',
            data: {
                account: $.trim($account.val())
            }
        }).then(function(res) {
            if (res.data && res.data.needCaptcha) {
                vaAccountErrTimes();
            }
        });
    }
}
);

$('[placeholder]').placeholder();

// 展开地区列表
$('#country-code').on('click', function() {
    if ($countryList.css('display') === 'none') {
        $countryList.slideDown();
    }
});

// 选中地区列表项
$countryList.on('click', 'li', function() {
    var $this = $(this),
        cc = $this.data('cc');

    $countryCodeEm.html($this.html());

    $countryCodeHide.val(cc);

    $countryList.slideUp();
});

// 点击其他区域,收起区域列表
$(document).on('click', function(e) {
    if ($(e.target).closest('#country-code').length > 0) {
        return;
    }

    if ($countryList.css('display') === 'block') {
        $countryList.slideUp();
    }
});

// 密码
$password.on('blur', function() {
    validatePassword();

    if ($capsLock.hasClass('hide')) {
        return;
    }

    $capsLock.addClass('hide');
}).on('keypress', function(e) {
    var code = e.which;

    // CapsLock检测
    if (code >= 65 && code <= 90) {
        $capsLock.removeClass('hide');
        return;
    }
    $capsLock.addClass('hide');
});

// 验证码
$captcha.on('blur', function() {
    validateCaptcha();
});

// 邮箱自动完成列表项点击
$emailAutoComplete.on('click', 'li', function() {
    clearTimeout(emailAcTime); // 清空默认关闭

    $account.val($(this).text()).focus();

    $emailAutoComplete.addClass('hide');
});

// 记住登录状态
$remember.on('click', function() {
    var $this = $(this);

    $this.toggleClass('checked');

    if ($this.hasClass('checked')) {
        $this.children('i').html(checkbox.checked);
    } else {
        $this.children('i').html(checkbox.unchecked);
    }
});

// focus到输入框则隐藏错误提示和样式
$('.va').on('focus', function() {
    var $this = $(this);

    $this.removeClass('error');

    $this.siblings('.err-tip').addClass('hide');
});

// 验证码刷新
$captchaWrap.on('click', '.change-captcha, .captcha-img', function() {
    $captchaImg.attr('src', captchaUrl + $.now());
});

// 登录
$('#login-btn').on('click', login);

// Enter登录
$('input.va').on('keypress', function(e) {
    if (e.which === 13) {
        login();
    }
});

// 初始:只带账户名的页面,密码输入获得焦点
if (($account.val() !== '' || $account.val() === $account.attr('placeholder')) &&
    $password.val() === '') {
    $password.focus();
}