login.js 6.21 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');

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

var emailAcTime;

//验证账户名
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.text(err).removeClass('hide');
        $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.text(err).removeClass('hide');
        $password.addClass('error');
    }
}

//验证
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').text('请输入账户名和密码').removeClass('hide');
            $passwordTip.addClass('hide');
            $password.addClass('error');
        } else {
            $accountTip.text('请输入账户名').removeClass('hide');
        }
    }

    return pass;
}

//展开地区列表
$('#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;
        } else {
            postfix = mailPostfix.other;
        }

        matchStr = accountMatch[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 !== '') {
            $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();
}).on('keypress', function(e) {
    var code = e.which,
        isShift = e.shiftKey || (code === 16) || false;

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

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

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

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

//记住登录状态
$('.remeber-me').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) {
        $('#login-form').submit();
    }
});