|
|
/**
|
|
|
* 登录
|
|
|
* @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/images?t='; // /passport/images?t=1454464125
|
|
|
|
|
|
var $captchaWrap = $('.captcha-wrap'),
|
|
|
$captchaImg = $captchaWrap.find('#captcha-img');
|
|
|
|
|
|
// checkbox status unicode
|
|
|
var checkbox = {
|
|
|
checked: '',
|
|
|
unchecked: ''
|
|
|
};
|
|
|
|
|
|
var authing = false;
|
|
|
|
|
|
var emailAcTime;
|
|
|
|
|
|
$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();
|
|
|
} |
...
|
...
|
|