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

var mailPostfix = {
    num: ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com', 'sohu.com', 'hotmail.com', '139.com', '189.com'],
    other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
};

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

var $accountTip = $account.siblings('.err-tip'),
    $passwordTip = $password.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('./mail-phone-regx');

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

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

var authing = false;

var emailAcTime;

require('yoho.placeholder');


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

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

            //如果是纯数字,则作为手机号码处理
            if (mailPhoneRegx.phoneRegx[$countryCodeHide.val()].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 validate() {
    var pass = true,
        account = $.trim($account.val()),
        password = $.trim($password.val());

    if (account !== '') {
        pass = validateAccount() && validatePassword();
    } 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;
}

$('[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();
    }
});

//邮箱
$account.on('keyup', function() {
    var account = $.trim($(this).val()),
        html = '',
        accountMatch,
        matchStr,
        postfix,
        i;

    //输入@时自动补全邮箱后缀
    //此处>0非错误,用于避免输入的第一个字符为@被识别为邮箱
    if (account.indexOf('@') > 0) {
        accountMatch = account.match(/^[0-9]+@(.*)/);
        if (accountMatch) {

            //数字邮箱补全
            postfix = mailPostfix.num;
            matchStr = accountMatch[1];
        } else {
            postfix = mailPostfix.other;
            matchStr = account.match(/@(.*)/)[1];
        }

        for (i = 0; i < postfix.length; i++) {
            if (postfix[i].indexOf(matchStr) > -1) {
                html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + postfix[i] + '</li>';
            }
        }

        if (html !== '' && /.com$/.test(account) === false) {
            $emailAutoComplete.html(html).removeClass('hide');
        } else {

            //隐藏autocomplete
            $emailAutoComplete.html('').addClass('hide');
        }
    }
}).on('blur', function() {
    emailAcTime = setTimeout(function() {
        $emailAutoComplete.addClass('hide');

        //验证
        validateAccount();
    }, 200);

});

//密码
$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');
});

//邮箱自动完成列表项点击
$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');
});

//登录
$('#login-btn').on('click', function() {
    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()),
                isRemember: $remember.hasClass('checked') ? true : false
            },
            success: function(data) {
                if (data.code === 200) {
                    if (data.data) {

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