|
|
|
/*
|
|
|
|
* @description 注册页js
|
|
|
|
* @time 2015/12/14
|
|
|
|
*/
|
|
|
|
|
|
|
|
var $ = require('yoho.jquery'),
|
|
|
|
regValidate = require('./mail-phone-regx'),
|
|
|
|
computeComplex = require('./pwd-strength');
|
|
|
|
|
|
|
|
var $registerPage = $('.register-page'),
|
|
|
|
$pwdTips = $('#pwd-tips'),
|
|
|
|
$pwdTip1 = $pwdTips.find('#pwd-tip1'),
|
|
|
|
$errTip = $('#err-tip'),
|
|
|
|
$registerBtn = $('#register-btn');
|
|
|
|
|
|
|
|
var $sendCaptcha = $('#send-captcha'),
|
|
|
|
caCount = 4,
|
|
|
|
validateResult = [];
|
|
|
|
|
|
|
|
var $pn = $('#phone-num'),
|
|
|
|
$mc = $('#msg-captcha'),
|
|
|
|
$pwd = $('#pwd'),
|
|
|
|
$repwd = $('#repwd'),
|
|
|
|
$ca = $('#captcha');
|
|
|
|
|
|
|
|
// 密码强度验证
|
|
|
|
var $pwdIntensity = $('.pwd-intensity'),
|
|
|
|
$pwdParent = $pwdIntensity.closest('.pwd-intensity-container');
|
|
|
|
|
|
|
|
//signup验证
|
|
|
|
var $region = $('#country-code'),
|
|
|
|
$regionSelect = $('#region');
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
$pn.val('');
|
|
|
|
$mc.val('');
|
|
|
|
$pwd.val('');
|
|
|
|
$repwd.val('');
|
|
|
|
$ca.val('');
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
//验证码位数
|
|
|
|
$ca.attr('maxlength', caCount);
|
|
|
|
|
|
|
|
//密码规则提示
|
|
|
|
$pwd.focus(function() {
|
|
|
|
$pwdTips.removeClass('hide');
|
|
|
|
}).blur(function() {
|
|
|
|
$pwdTips.addClass('hide');
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
//IE8 placeholder
|
|
|
|
//$('[placeholder]').placeholder();
|
|
|
|
|
|
|
|
// 存储校验信息
|
|
|
|
validateResult = [
|
|
|
|
{
|
|
|
|
id: 'phone-num',
|
|
|
|
message: '', //错误信息
|
|
|
|
status: false //当前的状态
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'captcha',
|
|
|
|
message: '',
|
|
|
|
status: false
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'msg-captcha',
|
|
|
|
message: '',
|
|
|
|
status: false
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'pwd',
|
|
|
|
message: '',
|
|
|
|
status: false
|
|
|
|
},
|
|
|
|
{
|
|
|
|
id: 'repwd',
|
|
|
|
message: '',
|
|
|
|
status: false
|
|
|
|
}
|
|
|
|
];
|
|
|
|
|
|
|
|
//手机号ajax校验
|
|
|
|
function phoneAjaxFn(callback) {
|
|
|
|
$.ajax({
|
|
|
|
url: '/passport/register/checkmobile',
|
|
|
|
type: 'POST',
|
|
|
|
data: {
|
|
|
|
mobile: $pn.val(),
|
|
|
|
area: $region.text().split('+')[1]
|
|
|
|
}
|
|
|
|
}).then(function(data) {
|
|
|
|
switch (data.code) {
|
|
|
|
case 200:
|
|
|
|
validateResult[0].message = '';
|
|
|
|
validateResult[0].status = true;
|
|
|
|
break;
|
|
|
|
case 404:
|
|
|
|
validateResult[0].message = '改账号已经存在';
|
|
|
|
validateResult[0].status = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
callback();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//图形验证码ajax校验
|
|
|
|
function picCaptchaAjaxFn(callback) {
|
|
|
|
$.ajax({
|
|
|
|
type: 'POST',
|
|
|
|
url: '/passport/register/piccaptcha',
|
|
|
|
data: {
|
|
|
|
code: $ca.val(),
|
|
|
|
mobile: $pn.val(),
|
|
|
|
area: $region.text().split('+')[1]
|
|
|
|
}
|
|
|
|
}).then(function(data) {
|
|
|
|
switch (data.code) {
|
|
|
|
case 200:
|
|
|
|
validateResult[1].message = '';
|
|
|
|
validateResult[1].status = true;
|
|
|
|
break;
|
|
|
|
case 404:
|
|
|
|
validateResult[1].message = '图形验证码错误';
|
|
|
|
validateResult[1].status = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
callback();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//短信验证码ajax校验
|
|
|
|
function msgCaptchaAjaxFn(callback) {
|
|
|
|
$.ajax({
|
|
|
|
type: 'POST',
|
|
|
|
url: '/passport/register/msgcaptcha',
|
|
|
|
data: {
|
|
|
|
code: $ca.val(),
|
|
|
|
mobile: $pn.val(),
|
|
|
|
area: $region.text().split('+')[1]
|
|
|
|
}
|
|
|
|
}).then(function(data) {
|
|
|
|
switch (data.code) {
|
|
|
|
case 200:
|
|
|
|
validateResult[2].message = '';
|
|
|
|
validateResult[2].status = true;
|
|
|
|
break;
|
|
|
|
case 404:
|
|
|
|
validateResult[2].message = '短信验证码错误';
|
|
|
|
validateResult[2].status = false;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
callback();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 验证
|
|
|
|
function validateRule($element, callback) {
|
|
|
|
|
|
|
|
var val = $.trim($element.val()),
|
|
|
|
regionCode;
|
|
|
|
|
|
|
|
|
|
|
|
//手机号校验
|
|
|
|
if ($element.hasClass('phone-num')) {
|
|
|
|
|
|
|
|
regionCode = $region.text();
|
|
|
|
|
|
|
|
if (val === '') {
|
|
|
|
validateResult[0].message = '请输入手机号码';
|
|
|
|
validateResult[0].status = false;
|
|
|
|
callback();
|
|
|
|
|
|
|
|
} else if (!regValidate.phoneRegx[regionCode].test(val)) {
|
|
|
|
validateResult[0].message = '手机号码格式不正确,请重新输入';
|
|
|
|
validateResult[0].status = false;
|
|
|
|
callback();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
phoneAjaxFn(callback);
|
|
|
|
}
|
|
|
|
|
|
|
|
//图形验证码校验
|
|
|
|
} else if ($element.hasClass('captcha')) {
|
|
|
|
if (val === '') {
|
|
|
|
validateResult[1].message = '请输入图形验证码';
|
|
|
|
validateResult[1].status = false;
|
|
|
|
callback();
|
|
|
|
|
|
|
|
} else if (val.length <= 3) {
|
|
|
|
validateResult[1].message = '图形验证码为4位';
|
|
|
|
validateResult[1].status = false;
|
|
|
|
callback();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 并且手机号正确
|
|
|
|
if (validateResult[0].status) {
|
|
|
|
picCaptchaAjaxFn(callback);
|
|
|
|
} else {
|
|
|
|
validateResult[1].message = '图形验证码错误';
|
|
|
|
validateResult[1].status = false;
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
//短信验证码校验
|
|
|
|
} else if ($element.hasClass('msg-captcha')) {
|
|
|
|
|
|
|
|
if (val === '') {
|
|
|
|
validateResult[2].message = '请输入短信验证码';
|
|
|
|
validateResult[2].status = false;
|
|
|
|
callback();
|
|
|
|
|
|
|
|
} else if (val.length <= 3) {
|
|
|
|
validateResult[2].message = '短信验证码为4位';
|
|
|
|
validateResult[2].status = false;
|
|
|
|
callback();
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
// 并且图形验证码正确
|
|
|
|
if (validateResult[1].status) {
|
|
|
|
msgCaptchaAjaxFn(callback);
|
|
|
|
} else {
|
|
|
|
validateResult[2].message = '短信验证码错误';
|
|
|
|
validateResult[2].status = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//密码校验
|
|
|
|
} else if ($element.hasClass('pwd')) {
|
|
|
|
if (val === '') {
|
|
|
|
validateResult[3].message = '请输入密码';
|
|
|
|
validateResult[3].status = false;
|
|
|
|
|
|
|
|
} else if (val.length < 6 || val.length > 20) {
|
|
|
|
validateResult[3].message = '密码只支持6-20位字符';
|
|
|
|
validateResult[3].status = false;
|
|
|
|
|
|
|
|
} else if (/\s/.test($element.val())) {
|
|
|
|
validateResult[3].message = '密码不能包含空格';
|
|
|
|
validateResult[3].status = false;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
validateResult[3].message = '';
|
|
|
|
validateResult[3].status = true;
|
|
|
|
}
|
|
|
|
callback();
|
|
|
|
|
|
|
|
//二次密码校验
|
|
|
|
} else if ($element.hasClass('repwd')) {
|
|
|
|
if (val === '') {
|
|
|
|
validateResult[4].message = '请输入密码确认';
|
|
|
|
validateResult[4].status = false;
|
|
|
|
|
|
|
|
} else if ($pwd.val() !== val) {
|
|
|
|
validateResult[4].message = '与密码不一致,请重新输入';
|
|
|
|
validateResult[4].status = false;
|
|
|
|
|
|
|
|
} else {
|
|
|
|
validateResult[4].message = '';
|
|
|
|
validateResult[4].status = true;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
callback();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//显示提示信息
|
|
|
|
function showErrTip() {
|
|
|
|
|
|
|
|
var show = false,
|
|
|
|
tipPosition,
|
|
|
|
$container,
|
|
|
|
i,
|
|
|
|
validateResultLen = validateResult.length;
|
|
|
|
|
|
|
|
for (i = 0; i < validateResultLen; i++) {
|
|
|
|
if (!show) {
|
|
|
|
|
|
|
|
//不可以通过status判断
|
|
|
|
if (!!validateResult[i].message) {
|
|
|
|
|
|
|
|
//显示错误提示
|
|
|
|
$errTip.find('span').text(validateResult[i].message);
|
|
|
|
|
|
|
|
$container = $('#' + validateResult[i].id);
|
|
|
|
|
|
|
|
tipPosition = $container.offset();
|
|
|
|
$errTip.css({
|
|
|
|
top: tipPosition.top - 40,
|
|
|
|
left: tipPosition.left
|
|
|
|
}).removeClass('hide');
|
|
|
|
|
|
|
|
show = true; //停止判断
|
|
|
|
} else {
|
|
|
|
$errTip.addClass('hide');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//显示红色边框
|
|
|
|
function showBorder() {
|
|
|
|
|
|
|
|
var $errInput,
|
|
|
|
i,
|
|
|
|
validateResultLen = validateResult.length;
|
|
|
|
|
|
|
|
for (i = 0; i < validateResultLen; i++) {
|
|
|
|
if (!!validateResult[i].message) {
|
|
|
|
|
|
|
|
//显示红色边框
|
|
|
|
$errInput = $('#' + validateResult[i].id);
|
|
|
|
$errInput.addClass('error');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
//去掉红色边框
|
|
|
|
$errInput = $('#' + validateResult[i].id);
|
|
|
|
$errInput.removeClass('error');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 密码强度验证
|
|
|
|
function pwdFn($obj) {
|
|
|
|
var pwd = $obj.val(),
|
|
|
|
pwdStrength = computeComplex(pwd),
|
|
|
|
level = 0;
|
|
|
|
|
|
|
|
if (pwdStrength === 0) {
|
|
|
|
level = 0;
|
|
|
|
} else if (pwdStrength <= 10) {
|
|
|
|
level = 1;
|
|
|
|
} else if (pwdStrength <= 20) {
|
|
|
|
level = 2;
|
|
|
|
} else {
|
|
|
|
level = 3;
|
|
|
|
}
|
|
|
|
|
|
|
|
switch (level) {
|
|
|
|
case 0:
|
|
|
|
$pwdParent.removeClass('red yellow green');
|
|
|
|
$pwdIntensity.removeClass('color');
|
|
|
|
break;
|
|
|
|
case 1:
|
|
|
|
$pwdParent.addClass('red').removeClass('yellow green');
|
|
|
|
$pwdIntensity.filter('.low').addClass('color');
|
|
|
|
$pwdIntensity.filter('.mid,.high').removeClass('color');
|
|
|
|
break;
|
|
|
|
case 2:
|
|
|
|
$pwdParent.addClass('yellow').removeClass('red green');
|
|
|
|
$pwdIntensity.filter('.low,.mid').addClass('color');
|
|
|
|
$pwdIntensity.filter('.high').removeClass('color');
|
|
|
|
break;
|
|
|
|
case 3:
|
|
|
|
$pwdParent.addClass('green').removeClass('yellow red');
|
|
|
|
$pwdIntensity.addClass('color');
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
//提示框
|
|
|
|
if (pwd === '') {
|
|
|
|
$pwdTip1.removeClass('red yes no').addClass('default');
|
|
|
|
} else if (pwd.length < 6 || pwd.length > 20) {
|
|
|
|
$pwdTip1.removeClass('default yes').addClass('no red');
|
|
|
|
} else {
|
|
|
|
$pwdTip1.removeClass('default no red').addClass('yes');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 失去焦点时开始校验
|
|
|
|
// Tips: 不可以在获得焦点的时候验证，获得焦点和失去焦点的间隔太小，如果中间存在ajax校验的话会出现问题
|
|
|
|
$registerPage.find('.va').keyup(function() {
|
|
|
|
|
|
|
|
var j,
|
|
|
|
statusLen = 0,
|
|
|
|
vLen = validateResult.length,
|
|
|
|
$that = $(this);
|
|
|
|
|
|
|
|
validateRule($(this), function() {
|
|
|
|
showErrTip(); // 显示错误提示
|
|
|
|
showBorder(); // 显示红色边框
|
|
|
|
|
|
|
|
// 如果validateResult中有4个status为true表示验证通过
|
|
|
|
for (j = 0; j < vLen; j++) {
|
|
|
|
|
|
|
|
if (validateResult[j].status) {
|
|
|
|
|
|
|
|
statusLen++;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
if (statusLen === 4 && $('#agree-terms').is(':checked')) {
|
|
|
|
$registerBtn.removeClass('disable');
|
|
|
|
} else {
|
|
|
|
$registerBtn.addClass('disable');
|
|
|
|
}
|
|
|
|
|
|
|
|
// 图形验证通过时，发送短信按钮可点击
|
|
|
|
if (validateResult[1].status) {
|
|
|
|
$sendCaptcha.removeClass('disable');
|
|
|
|
} else {
|
|
|
|
$sendCaptcha.addClass('disable');
|
|
|
|
}
|
|
|
|
|
|
|
|
//图形验证通过时，发送短信按钮可点击 end
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// 如果是密码则校验强度
|
|
|
|
if (($that).hasClass('pwd')) {
|
|
|
|
pwdFn($that);
|
|
|
|
}
|
|
|
|
|
|
|
|
}).blur(function() {
|
|
|
|
|
|
|
|
/*validateRule($(this), function() {
|
|
|
|
showErrTip();
|
|
|
|
showBorder(); // 显示红色边框
|
|
|
|
});*/
|
|
|
|
});
|
|
|
|
|
|
|
|
$regionSelect.change(function() {
|
|
|
|
|
|
|
|
$region.text('+' + $('#region').val());
|
|
|
|
|
|
|
|
validateRule($pn, showErrTip); //验证
|
|
|
|
});
|
|
|
|
|
|
|
|
// 点击发送验证码
|
|
|
|
$sendCaptcha.click(function() {
|
|
|
|
var timeResidue = 10,
|
|
|
|
t;
|
|
|
|
|
|
|
|
if ($(this).hasClass('disable')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
//todo ajax
|
|
|
|
|
|
|
|
t = setInterval(function() {
|
|
|
|
if (timeResidue <= 0) {
|
|
|
|
$sendCaptcha.removeClass('disable').val('获取短信验证码');
|
|
|
|
clearInterval(t);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$sendCaptcha.addClass('disable').val(timeResidue-- + '秒可重新发送');
|
|
|
|
}, 1000);
|
|
|
|
}); |
|
|
\ No newline at end of file |
...
|
...
|
|
