Authored by htoooth

Merge branch 'feature/passport' into feature/back

/**
* 注册控制器
*/
'use strict';
const passportHelper = require('../models/passport-helper');
const regService = require('../models/reg-service');
const config = require('../../../config/common');
let helpers = global.yoho.helpers;
let index = (req, res, next) => {
// 设置注册有效时间30分钟, 防机器刷
req.session._REG_EXPIRE = Date.now() + 1800000;
let refer = req.query.refer;
refer && res.cookie('refer', encodeURI(refer), {
domain: 'yohobuy.com'
});
regService.getRegData().then((result) => {
res.render('reg/index', {
title: '新用户注册',
passport: {
region: passportHelper.getCountry(),
location: '+86',
captchaUrl: helpers.urlFormat('/passport/images', {t: Date.now()}),
itemUrl: helpers.urlFormat('/help/', {category_id: 9}),
referUrl: refer,
loginUrl: helpers.urlFormat('/signin.html', {refer: refer}),
coverHref: result.url,
coverImg: result.img,
regBtnText: '立即注册'
}
});
}).catch(next);
};
let success = (req, res, next) => {
let goUrl = req.query.next || config.siteUrl;
let goShoppingUrl = req.query.goShoppingUrl || config.siteUrl;
regService.getRegData().then((result) => {
res.render('reg/success', {
title: '注册成功',
passport: {
goUrl: goUrl,
goShoppong: goShoppingUrl,
coverHref: result.url,
coverImg: result.img
}
});
}).catch(next);
};
module.exports = {
index,
success
};
... ...
/**
* 注册 model
*/
'use strict';
const passportHelper = require('./passport-helper');
const REGISTER_LEFT_BANNER_CODE = 'c479ec90120cae7f96e52922b4917064'; // 注册左边的banner
let getRegData = () => {
return passportHelper.getLeftBannerAsync(REGISTER_LEFT_BANNER_CODE);
};
module.exports = {
getRegData
};
... ...
... ... @@ -12,6 +12,7 @@ const login = require(cRoot + '/login');
const captcha = require(cRoot + '/captcha');
const back = require(cRoot + '/back');
const reg = require(cRoot + '/reg');
const router = express.Router(); // eslint-disable-line
... ... @@ -19,6 +20,13 @@ router.get('/autosign/wechat', login.wechat.beforeLogin, login.wechat.login); //
router.get('/login/wechat/callback', login.wechat.callback);
/**
* 注册页面路由
*/
router.get('/reg/index', reg.index);
router.get('/reg/success', reg.success);
/**
* 找回密码首页信息
*/
// 找回密码首页
... ...
<div class="passport-page yoho-page clearfix">
{{# passport}}
{{> reg/cover}}
<div class="content">
{{> reg/register}}
</div>
{{/ passport}}
</div>
... ...
<div class="passport-page yoho-page clearfix">
{{# passport}}
{{> reg/cover}}
<div class="content">
<div class="register-page">
<div class="success-box">
<div class="success-text">
<span>恭喜!</span>账号注册成功,&nbsp;<span id="count-down">5</span>&nbsp;&nbsp;秒后将跳转至首页
</div>
<a class="success-btn" href="{{goShoppong}}" data-url="{{goUrl}}">随便逛逛</a>
</div>
</div>
</div>
{{/ passport}}
</div>
... ...
{{> layout/header}}
<div class="passport-page yoho-page clearfix">
{{# passport}}
{{> passport/cover}}
<div class="content">
{{> passport/register}}
</div>
{{/ passport}}
<div class="page-tip clearfix">为了给您更好的购物体验, 建议您创建YOHO!Family账号</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
<div class="passport-cover">
<div class="cover-content">
{{#if coverHref}}
<a href="{{coverHref}}" target="_bank">
<img class="cover-img" src="{{coverImg}}">
</a>
{{^}}
<img class="cover-img" src="{{coverImg}}">
{{/if}}
</div>
</div>
\ No newline at end of file
... ...
<div class="register-page">
<ul>
<li class="clearfix">
<select id="region" class="region" name="region">
{{#each region}}
<option {{#if selected}}selected="selected"{{/if}} value="{{areaCode}}">{{name}}</option>
{{/each}}
</select>
</li>
<li class="clearfix" data-index="0">
<span id="country-code" class="country-code">{{location}}</span>
<input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
</li>
<li class="w330 clearfix" data-index="1">
<input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
<img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
<a class="link change-captcha">换一张</a>
</li>
<li class="clearfix" data-index="2">
<input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
<input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码">
<span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机,请查收</span>
</li>
<li class="clearfix" data-index="3">
<input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password">
<div class="pwd-intensity-container">
<span class="pwd-intensity low"></span>
<span class="pwd-intensity mid"></span>
<span class="pwd-intensity high"></span>
</div>
<div id="pwd-tips" class="hide pwd-tips">
<div class="default" id="pwd-tip1"><i></i>密码只支持6-20位字符</div>
<div class="default" id="pwd-tip2"><i></i>由字母、 数字组合,不能包含特殊符号</div>
</div>
</li>
<li class="items-container clearfix">
<input id="agree-terms" class="agree-terms" type="checkbox" checked="">
<span>
我已阅读并同意遵守
<a class="link go-yoho-items" href="{{itemUrl}}" target="_blank">YOHO!BUY 有货服务条款</a>
</span>
</li>
<li class="clearfix">
<input name="refer" id="refer" type="hidden" value="{{referUrl}}">
<input id="register-btn" class="btn register-btn disable" type="submit" value="{{regBtnText}}" disabled="">
</li>
{{# loginUrl}}
<li class="quick-login-container">
我已注册YOHO!BUY 有货账号
<a class="link go-login" href="{{.}}">快速登录</a>
</li>
{{/loginUrl}}
{{# skipUrl}}
<li class="skip-user-info">
<a href="{{.}}">跳过此步</a>
</li>
{{/skipUrl}}
</ul>
<div id="err-tip" class="err-tip hide">
<span></span>
<b></b>
</div>
<input name="" type="hidden" id="open-id" value="{{openId}}"/>
<input name="" type="hidden" id="source-type" value="{{sourceType}}"/>
</div>
... ...
... ... @@ -15,7 +15,7 @@ module.exports = {
siteUrl: 'http://www.yohobuy.com',
domains: {
api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
service: 'http://devservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
service: 'http://devservice.yoho.cn:58077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
search: 'http://192.168.102.216:8080/yohosearch/'
},
useOneapm: false,
... ... @@ -77,12 +77,11 @@ if (isProduction) {
} else if (isTest) {
Object.assign(module.exports, {
appName: 'www.yohobuy.com for test',
// domains: {
// api: 'http://testapi.yoho.cn:28078/',
// service: 'http://testservice.yoho.cn:28077/',
// search: 'http://192.168.102.216:8080/yohosearch/'
// },
domains: {
api: 'http://testapi.yoho.cn:28078/',
service: 'http://testservice.yoho.cn:28077/',
search: 'http://192.168.102.216:8080/yohosearch/'
},
useOneapm: true,
useCache: true,
memcache: {
... ...
... ... @@ -93,6 +93,7 @@
"yoho-handlebars": "^4.0.5",
"yoho-jquery": "^1.12.4",
"yoho-jquery-lazyload": "^1.9.7",
"yoho-jquery-placeholder": "0.0.3",
"yoho-slider": "0.0.2"
}
}
... ...
/**
* 找回密码
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/12/14
*/
var $ = require('yoho-jquery'),
regx = require('./mail-phone-regx'),
emailReg = regx.emailRegx,
phoneRegx = regx.phoneRegx;
var emailAc = require('./ac-email'); //邮箱自动完成
var $cr = $('#country-code-hide'),
$phoneNum = $('#phone-num'),
$ca = $('#captcha'),
$ccList = $('#country-code-list'),
$cc = $('#country-code'),
$btn = $('#find-btn'),
$accErr = $('#account-err'),
$caErr = $('#captcha-err'),
caCount = 4, //验证码位数
hasPh = false,
hasCa = false;
require('yoho-jquery-placeholder');
function imgcode() {
var time = new Date(),
$captchaImg = $('#captcha-img'),
captchaImgSrc = $captchaImg.attr('src').split('?')[0];
$('#captcha-img').attr('src', captchaImgSrc + '?t=' + time.getTime());
}
function enableBtn() {
if (hasPh && hasCa) {
$btn.removeClass('disable').prop('disabled', false);
} else {
$btn.addClass('disable').prop('disabled', true);
}
}
function authcode() {
if (!hasPh || !hasCa) {
enableBtn();
return;
}
$.ajax({
type: 'POST',
url: '/passport/back/authcode',
data: {
verifyCode: $.trim($ca.val()),
phoneNum: $phoneNum.val(),
area: $cr.val()
}
}).then(function(data) {
if (data.code === 200) {
hasCa = true;
} else if (data.code === 402) {
hasPh = false;
hasCa = true;
$accErr.removeClass('hide').find('em').text('该账号不存在');
$phoneNum.addClass('error');
} else if (data.code === 400) {
hasCa = false;
imgcode();
}
enableBtn();
});
}
function vaPn(v) {
var pass = true,
errTxt = '';
v = $.trim(v);
if (v !== '') {
if (/^[0-9]+$/.test(v)) {
if (phoneRegx[$cr.val()].test(v)) {
pass = true;
} else {
errTxt = '手机号码格式不正确, 请重新输入';
pass = false;
}
} else {
if (emailReg.test(v)) {
pass = true;
} else {
errTxt = '邮箱格式不正确, 请重新输入';
pass = false;
}
}
} else {
errTxt = '账户名不能为空';
pass = false;
}
hasPh = pass;
authcode();
return {
pass: pass,
errTxt: errTxt
};
}
function vaCa() {
var v = $.trim($ca.val());
if (v === '' || v.length < caCount) {
hasCa = false;
enableBtn();
return;
}
hasCa = true;
authcode();
}
emailAc($phoneNum, function() {
var pnVa = vaPn($phoneNum.val());
if (pnVa.pass) {
$accErr.addClass('hide');
$phoneNum.removeClass('error');
} else {
$accErr.removeClass('hide').find('em').text(pnVa.errTxt);
$phoneNum.addClass('error');
}
}
);
$ca.attr('maxlength', caCount);
//IE8 placeholder
$('input').placeholder();
$('#change-captcha, #captcha-img').on('click', function() {
imgcode();
});
$cc.on('click', function(e) {
e.stopPropagation();
if ($ccList.css('style') === 'block') {
$ccList.slideUp('fast');
} else {
$ccList.slideDown('fast');
}
});
$ccList.delegate('li', 'click', function(e) {
var $cur = $(this),
code = $cur.data('cc'),
pnVa;
e.stopPropagation();
$cr.val(code);
$cc.find('em').html($cur.text());
//切换后验证手机号码
if ($.trim($phoneNum.val()) !== '') {
pnVa = vaPn($phoneNum.val());
enableBtn();
if (hasPh) {
$accErr.addClass('hide');
$phoneNum.removeClass('error');
} else {
$accErr.removeClass('hide').text(pnVa.errTxt);
$phoneNum.addClass('error');
}
}
$ccList.slideUp('fast');
});
$(document).click(function() {
if ($ccList.css('display') === 'block') {
$ccList.slideUp();
}
});
$phoneNum.keyup(function() {
vaPn($.trim($(this).val()));
}).focus(function() {
$(this).removeClass('error');
//focus隐藏错误提示
$accErr.addClass('hide');
});
//验证码在鼠标移开后验证, keyup时不再验证
$ca.blur(function() {
var errTxt = $.trim($ca.val()) === '' ? '验证码不能为空' : '验证码不正确';
if (hasCa) {
$caErr.addClass('hide');
$ca.removeClass('error');
} else {
$caErr.removeClass('hide').find('em').text(errTxt);
$ca.addClass('error');
//验证码错误则刷新验证码
if ($ca.val() < caCount) {
//防止重复刷新验证码
imgcode();
}
}
}).focus(function() {
$(this).removeClass('error');
//focus隐藏错误提示
$caErr.addClass('hide');
}).keyup(function() {
vaCa();
});
$('#find-btn').click(function(e) {
if (/^[0-9]+$/.test($.trim($phoneNum.val()))) {
$('#find-form').attr('action', '/passport/back/mobile');
}
if ($(this).hasClass('disable')) {
return;
}
if (!hasCa || !hasPh) {
e.preventDefault();
return true;
}
});
/**
* 找回密码
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/12/14
*/
var $ = require('yoho-jquery'),
regx = require('../common/mail-phone-regx'),
emailReg = regx.emailRegx,
phoneRegx = regx.phoneRegx;
var emailAc = require('./ac-email'); // 邮箱自动完成
var $cr = $('#country-code-hide'),
$phoneNum = $('#phone-num'),
$ca = $('#captcha'),
$ccList = $('#country-code-list'),
$cc = $('#country-code'),
$btn = $('#find-btn'),
$accErr = $('#account-err'),
$caErr = $('#captcha-err'),
caCount = 4, // 验证码位数
hasPh = false,
hasCa = false;
require('yoho-jquery-placeholder');
function imgcode() {
var time = new Date(),
$captchaImg = $('#captcha-img'),
captchaImgSrc = $captchaImg.attr('src').split('?')[0];
$('#captcha-img').attr('src', captchaImgSrc + '?t=' + time.getTime());
}
function enableBtn() {
if (hasPh && hasCa) {
$btn.removeClass('disable').prop('disabled', false);
} else {
$btn.addClass('disable').prop('disabled', true);
}
}
function authcode() {
if (!hasPh || !hasCa) {
enableBtn();
return;
}
$.ajax({
type: 'POST',
url: '/passport/back/authcode',
data: {
verifyCode: $.trim($ca.val()),
phoneNum: $phoneNum.val(),
area: $cr.val()
}
}).then(function(data) {
if (data.code === 200) {
hasCa = true;
} else if (data.code === 402) {
hasPh = false;
hasCa = true;
$accErr.removeClass('hide').find('em').text('该账号不存在');
$phoneNum.addClass('error');
} else if (data.code === 400) {
hasCa = false;
imgcode();
}
enableBtn();
});
}
function vaPn(v) {
var pass = true,
errTxt = '';
v = $.trim(v);
if (v !== '') {
if (/^[0-9]+$/.test(v)) {
if (phoneRegx[$cr.val()].test(v)) {
pass = true;
} else {
errTxt = '手机号码格式不正确, 请重新输入';
pass = false;
}
} else {
if (emailReg.test(v)) {
pass = true;
} else {
errTxt = '邮箱格式不正确, 请重新输入';
pass = false;
}
}
} else {
errTxt = '账户名不能为空';
pass = false;
}
hasPh = pass;
authcode();
return {
pass: pass,
errTxt: errTxt
};
}
function vaCa() {
var v = $.trim($ca.val());
if (v === '' || v.length < caCount) {
hasCa = false;
enableBtn();
return;
}
hasCa = true;
authcode();
}
emailAc($phoneNum, function() {
var pnVa = vaPn($phoneNum.val());
if (pnVa.pass) {
$accErr.addClass('hide');
$phoneNum.removeClass('error');
} else {
$accErr.removeClass('hide').find('em').text(pnVa.errTxt);
$phoneNum.addClass('error');
}
}
);
$ca.attr('maxlength', caCount);
// IE8 placeholder
$('input').placeholder();
$('#change-captcha, #captcha-img').on('click', function() {
imgcode();
});
$cc.on('click', function(e) {
e.stopPropagation();
if ($ccList.css('style') === 'block') {
$ccList.slideUp('fast');
} else {
$ccList.slideDown('fast');
}
});
$ccList.delegate('li', 'click', function(e) {
var $cur = $(this),
code = $cur.data('cc'),
pnVa;
e.stopPropagation();
$cr.val(code);
$cc.find('em').html($cur.text());
// 切换后验证手机号码
if ($.trim($phoneNum.val()) !== '') {
pnVa = vaPn($phoneNum.val());
enableBtn();
if (hasPh) {
$accErr.addClass('hide');
$phoneNum.removeClass('error');
} else {
$accErr.removeClass('hide').text(pnVa.errTxt);
$phoneNum.addClass('error');
}
}
$ccList.slideUp('fast');
});
$(document).click(function() {
if ($ccList.css('display') === 'block') {
$ccList.slideUp();
}
});
$phoneNum.keyup(function() {
vaPn($.trim($(this).val()));
}).focus(function() {
$(this).removeClass('error');
// focus隐藏错误提示
$accErr.addClass('hide');
});
// 验证码在鼠标移开后验证, keyup时不再验证
$ca.blur(function() {
var errTxt = $.trim($ca.val()) === '' ? '验证码不能为空' : '验证码不正确';
if (hasCa) {
$caErr.addClass('hide');
$ca.removeClass('error');
} else {
$caErr.removeClass('hide').find('em').text(errTxt);
$ca.addClass('error');
// 验证码错误则刷新验证码
if ($ca.val() < caCount) {
// 防止重复刷新验证码
imgcode();
}
}
}).focus(function() {
$(this).removeClass('error');
// focus隐藏错误提示
$caErr.addClass('hide');
}).keyup(function() {
vaCa();
});
$('#find-btn').click(function(e) {
if (/^[0-9]+$/.test($.trim($phoneNum.val()))) {
$('#find-form').attr('action', '/passport/back/mobile');
}
if ($(this).hasClass('disable')) {
return;
}
if (!hasCa || !hasPh) {
e.preventDefault();
return true;
}
});
... ...
... ... @@ -19,7 +19,7 @@ var $pwdIntensity = $('.pwd-intensity'),
$pwdParent = $pwdIntensity.closest('.pwd-intensity-container'),
$pwdTip1 = $('#pwd-tip1');
var pwdRegx = require('./mail-phone-regx').pwdValidateRegx;
var pwdRegx = require('../common/mail-phone-regx').pwdValidateRegx;
require('yoho-jquery-placeholder');
... ... @@ -95,7 +95,7 @@ function pwdKeyupEvt() {
pwdStrength = computeComplex(pwd),
level = 0;
//TODO:自定义密码强度规则,需要修正
// TODO:自定义密码强度规则,需要修正
if (pwdStrength === 0) {
level = 0;
} else if (pwdStrength <= 10) {
... ... @@ -126,7 +126,7 @@ function pwdKeyupEvt() {
break;
}
//提示框
// 提示框
if (pwd === '') {
$pwdTip1.removeClass('red yes no').addClass('default');
} else if (pwd.length < 6 || pwd.length > 20) {
... ... @@ -142,7 +142,7 @@ function pwdKeyupEvt() {
}
}
//IE8 placeholder
// IE8 placeholder
$('input').placeholder();
$('.va').keyup(function() {
... ... @@ -208,7 +208,7 @@ $('.va').keyup(function() {
}).focus(function() {
$(this).removeClass('error');
//focus后错误提示隐藏
// focus后错误提示隐藏
if ($(this).hasClass('pwd')) {
$pwdErr.addClass('hide');
} else {
... ... @@ -226,7 +226,7 @@ $pwd.focus(function() {
$('#pwd, #repwd').keydown(function(e) {
var code = e.keyCode || e.which;
//空格输入过滤
// 空格输入过滤
if (code === 32) {
e.preventDefault();
return;
... ...
var reg = require('./reg/reg');
reg.init();
... ...
/*
* @description 注册页js
* @time 2015/12/14
*/
var $ = require('yoho-jquery'),
regValidate = require('../common/mail-phone-regx'),
computeComplex = require('../common/pwd-strength');
var $registerPage = $('.register-page'),
$pwdTips = $('#pwd-tips'),
$pwdTip1 = $pwdTips.find('#pwd-tip1'),
$errTip = $('#err-tip'),
$registerBtn = $('#register-btn'),
$countDown = $('#count-down'),
$successBtn = $('.success-btn'),
countDown = 5,
clearT;
var $sendCaptcha = $('#send-captcha'),
caCount = 4,
validateResult = [];
var $pn = $('#phone-num'),
$mc = $('#msg-captcha'),
$pwd = $('#pwd'),
$repwd = $('#repwd'),
$ca = $('#captcha'),
timeResidue = 0;
// 密码强度验证
var $pwdIntensity = $('.pwd-intensity'),
$pwdParent = $pwdIntensity.closest('.pwd-intensity-container');
// signup验证
var $region = $('#country-code'),
$regionSelect = $('#region');
var isPwd = false,
pwdVal;
var pwdReg = regValidate.pwdValidateRegx;
var $curErrContainer;
var oldPhone = ''; // 如果手机号改变时刷新验证码
require('yoho-jquery-placeholder');
setTimeout(function() {
$pn.val('');
$mc.val('');
$pwd.val('');
$repwd.val('');
$ca.val('');
}, 0);
// 验证码位数
$ca.attr('maxlength', caCount);
// 密码规则提示
$pwd.focus(function() {
$pwdTips.removeClass('hide');
isPwd = true;
pwdVal = $(this).val();
}).blur(function() {
$pwdTips.addClass('hide');
isPwd = false;
});
// 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
}
];
// 刷新图形验证码
function refreshPic() {
var time = new Date(),
$captchaImg = $('.captcha-img'),
captchaImgSrc = $captchaImg.attr('src').split('?')[0];
$captchaImg.attr('src', captchaImgSrc + '?t=' + time.getTime());
}
// 手机号ajax校验
function phoneAjaxFn(page, callback) {
var url,
data;
if (page === 'reg') {
url = '/passport/register/checkmobile';
data = {
mobile: $pn.val(),
area: $region.text().split('+')[1]
};
} else if (page === 'third') {
url = '/passport/autouserinfo/bindCheck';
data = {
mobile: $pn.val(),
area: $region.text().split('+')[1],
openId: $('#open-id').val(),
sourceType: $('#source-type').val()
};
}
validateResult[0].message = 'err';
validateResult[0].status = false;
$.ajax({
url: url,
type: 'POST',
data: data
}).then(function(res) {
if (!res) {
return;
}
switch (res.code) {
case 200:
if ($pn.val() !== oldPhone && oldPhone !== '') {
// 如果手机号发生改变则刷新验证码并且更新状态
refreshPic();
$sendCaptcha.addClass('disable').attr('disabled', 'disabled');
validateResult[1].message = '图形验证码错误';
validateResult[1].status = false;
}
oldPhone = $pn.val();
validateResult[0].message = '';
validateResult[0].status = true;
break;
case 400:
refreshPic();
validateResult[0].message = res.message;
validateResult[0].status = false;
break;
default:
break;
}
callback();
});
}
// 图形验证码ajax校验
function picCaptchaAjaxFn(page, callback) {
var url;
if (page === 'reg') {
url = '/passport/register/piccaptcha';
} else if (page === 'third') {
url = '/passport/autouserinfo/checkPicCode';
}
$.ajax({
type: 'POST',
url: url,
data: {
verifyCode: $ca.val()
// mobile: $pn.val(),
// area: $region.text().split('+')[1]
}
}).then(function(data) {
if (!data) {
return;
}
switch (data.code) {
case 200:
validateResult[1].message = '';
validateResult[1].status = true;
break;
case 400:
refreshPic();
validateResult[1].message = '图形验证码错误';
validateResult[1].status = false;
break;
default:
break;
}
callback();
});
}
// 短信验证码ajax校验
function msgCaptchaAjaxFn(page, callback) {
var url;
if (page === 'reg') {
url = '/passport/register/msgcaptcha';
} else if (page === 'third') {
url = '/passport/autouserinfo/checkBindMsg';
}
$.ajax({
type: 'POST',
url: url,
data: {
code: $mc.val(),
mobile: $pn.val(),
area: $region.text().split('+')[1]
}
}).then(function(data) {
if (!data) {
return;
}
switch (data.code) {
case 200:
validateResult[2].message = '';
validateResult[2].status = true;
break;
case 400:
validateResult[2].message = '短信验证码错误';
validateResult[2].status = false;
break;
default:
break;
}
callback();
});
}
// 验证
function validateRule(page, $element, callback) {
var val = $.trim($element.val()),
regionCode;
// 根据需求http://redmine.yoho.cn/issues/3117改成上边的正则
// 对应的错误提示语也改了,感觉要不了多久就会改回来
// pwdReg = /^([a-zA-Z0-9\-\+_!@\#$%\^&\*\(\)\:\;\.=\[\]\\\',\?]){6,20}$/gi;
// 手机号校验
if ($element.hasClass('phone-num')) {
regionCode = $region.text();
if (val === '') {
validateResult[0].message = '请输入手机号码';
validateResult[0].status = false;
return callback();
} else {
if (!/^[0-9]+$/.test(val) ||
(regionCode === '+86' && !regValidate.phoneRegx[regionCode].test(val))) {
validateResult[0].message = '手机号码格式不正确,请重新输入';
validateResult[0].status = false;
return callback();
} else {
phoneAjaxFn(page, callback);
}
}
// 图形验证码校验
} else if ($element.hasClass('captcha')) {
if (val === '') {
validateResult[1].message = '请输入图形验证码';
validateResult[1].status = false;
return callback();
} else if (val.length <= 3) {
validateResult[1].message = '图形验证码为4位';
validateResult[1].status = false;
return callback();
} else {
// 并且手机号正确
if (validateResult[0].status) {
picCaptchaAjaxFn(page, callback);
} else {
validateResult[1].message = '图形验证码错误';
validateResult[1].status = false;
return callback();
}
}
// 短信验证码校验
} else if ($element.hasClass('msg-captcha')) {
if (val === '') {
validateResult[2].message = '请输入短信验证码';
validateResult[2].status = false;
return callback();
} else if (val.length <= 3) {
validateResult[2].message = '短信验证码错误';
validateResult[2].status = false;
return callback();
} else {
// 并且图形验证码正确
if (validateResult[1].status) {
msgCaptchaAjaxFn(page, callback);
} else {
validateResult[2].message = '短信验证码错误';
validateResult[2].status = false;
return callback();
}
}
// 密码校验
} 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 (!pwdReg.test($element.val())) {
validateResult[3].message = '密码须字母和数字组合';
validateResult[3].status = false;
} else {
validateResult[3].message = '';
validateResult[3].status = true;
}
return 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;
}
return callback();
}
}
function posErrTip() {
var tipPos = $curErrContainer.offset();
return $errTip.css({
top: tipPos.top - 40,
left: tipPos.left
});
}
// 显示提示信息
function showErrTip() {
var show = false,
i,
validateResultLen = validateResult.length;
for (i = 0; i < validateResultLen; i++) {
if (!show) {
// 不可以通过status判断
if (!!validateResult[i].message && validateResult[i].message !== 'err') {
// 显示错误提示
$errTip.find('span').text(validateResult[i].message);
$curErrContainer = $('#' + validateResult[i].id);
posErrTip().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;
default:
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');
}
}
// 重新定位错误提示
$(window).resize(function() {
if ($errTip.hasClass('hide')) {
return;
}
posErrTip();
});
// 失去焦点时开始校验
// Tips: 不可以在获得焦点的时候验证,获得焦点和失去焦点的间隔太小,如果中间存在ajax校验的话会出现问题
// ( ▼-▼ )注册页和信息完善页面接口不同
exports.init = function(page) {
$('#agree-terms').click(function() {
var $this = $(this),
i,
passI = 0;
if ($this.attr('notchecked')) {
$this.removeAttr('notchecked');
// 勾选
for (i = 0; i < validateResult.length; i++) {
if (validateResult[i].status) {
passI++;
}
}
if (passI === 4) {
$registerBtn.removeClass('disable').removeAttr('disabled');
}
} else {
// 取消勾选
$registerBtn.addClass('disable').attr('disabled', 'disabled');
$this.attr('notchecked', 'notchecked');
}
});
// 按回车键提交
$registerPage.on('keydown', function(e) {
var key = e.which;
if (key === 13) {
$registerBtn.click();
}
});
$registerPage.find('.va').keyup(function() {
var j,
statusLen = 0,
vLen = validateResult.length,
$that = $(this);
validateRule(page, $(this), function() {
showErrTip(); // 显示错误提示
showBorder(); // 显示红色边框
// 如果validateResult中有4个status为true表示验证通过
for (j = 0; j < vLen; j++) {
if (validateResult[j].status) {
statusLen++;
}
}
if (statusLen === 4 && !$('#agree-terms').attr('notchecked')) {
$registerBtn.removeClass('disable').removeAttr('disabled');
} else {
$registerBtn.addClass('disable').attr('disabled', 'disabled');
}
// 图形验证通过时,发送短信按钮可点击
if (validateResult[1].status && timeResidue <= 0) {
$sendCaptcha.removeClass('disable').removeAttr('disabled');
} else {
$sendCaptcha.addClass('disable').attr('disabled', 'disabled');
}
// 图形验证通过时,发送短信按钮可点击 end
});
// 如果是密码则校验强度
if (($that).hasClass('pwd')) {
pwdFn($that);
}
}).blur(function() {
/* validateRule($(this), function() {
showErrTip();
showBorder(); // 显示红色边框
});*/
});
$regionSelect.change(function() {
$region.text($('#region').val());
validateRule(page, $pn, showErrTip); // 验证
});
// 点击发送验证码
$sendCaptcha.click(function() {
var t,
url;
if ($(this).hasClass('disable')) {
return;
}
timeResidue = 60;
$('#msg-tip').removeClass('hide');
$sendCaptcha.addClass('disable').attr('disabled', 'disabled');
$sendCaptcha.val('60秒可重新发送');
t = setInterval(function() {
if (timeResidue <= 0) {
$sendCaptcha.removeClass('disable').removeAttr('disabled').val('获取短信验证码');
clearInterval(t);
return;
}
$sendCaptcha.val(timeResidue-- + '秒可重新发送');
}, 1000);
if (page === 'reg') {
url = '/passport/register/sendBindMsg';
} else if (page === 'third') {
url = '/passport/autouserinfo/sendBindMsg';
}
// todo ajax 发送验证码
$.ajax({
type: 'POST',
url: url,
data: {
area: $region.text().split('+')[1],
mobile: $pn.val(),
verifyCode: $ca.val()
}
});
});
// 防止粘贴密码
if ($('.success-box').length <= 0) {
$pwd[0].onpaste = function() {
return false;
};
}
// ajax表单提交
$registerBtn.click(function() {
var url;
if (page === 'reg') {
url = '/passport/register/mobileregister';
} else if (page === 'third') {
url = '/passport/autouserinfo/bindMobile';
}
if ($(this).hasClass('disable')) {
return;
} else {
// ajax提交
$.ajax({
type: 'POST',
url: url,
data: {
area: $region.text().split('+')[1],
mobile: $pn.val(),
verifyCode: $ca.val(),
code: $mc.val(),
password: $pwd.val()
}
}).then(function(data) {
var time = 0,
t,
refer;
if (data.code === 200) {
refer = data.data.href;
t = setTimeout(function() {
time++;
}, 1000);
$.ajax({
type: 'GET',
url: data.data.session
}).then(function(res) {
if (res.code === 200 && t < 3) {
clearInterval(t);
location.href = refer;
}
});
if (t >= 3) {
clearInterval(t);
location.href = refer;
}
} else {
// todo
console.log('网络超时~');
}
});
}
});
$('.change-captcha').click(function() {
refreshPic();
});
// 注册成功页面5秒后跳转
if ($('.success-box').length > 0) {
clearT = setInterval(function() {
if (countDown === 0) {
window.location.href = $successBtn.attr('data-url');
clearInterval(clearT);
}
$countDown.text(countDown--);
}, 1000);
}
};
... ...
... ... @@ -15,6 +15,7 @@
float: right;
cursor: pointer;
color: #b9b9b9;
.iconfont {
font-size: 14px;
vertical-align: middle;
... ... @@ -28,8 +29,9 @@
font-size: 22px;
line-height: 40px;
color: #000;
font-weight: normal;
font-weight: normal;
}
.title2 {
margin: 0 0 5px;
font-size: 22px;
... ... @@ -90,6 +92,7 @@
outline: none;
cursor: pointer;
}
.change-captcha {
color: #ff1901;
font-size: 12px;
... ... @@ -140,7 +143,7 @@
}
}
.verification-page .content{
.verification-page .content {
li {
position: relative;
margin-bottom: 43px;
... ... @@ -165,7 +168,8 @@
margin: 0 10px;
}
.country-code, .phone-num {
.country-code,
.phone-num {
color: #000;
font-size: 16px;
}
... ... @@ -192,7 +196,7 @@
color: #a5a4a4;
.iconfont {
color: #0F9ACD;
color: #0f9acd;
font-size: 14px;
margin: 0 8px 0 0;
vertical-align: 12%;
... ... @@ -235,4 +239,4 @@
text-align: center;
background-color: #ff1901;
}
}
\ No newline at end of file
}
... ...
... ... @@ -18,7 +18,7 @@
border: 1px solid #dbdbdb;
text-indent: 10px;
color: #9a9a9a;
color: rgba(0,0,0,.5);
color: rgba(0, 0, 0, .5);
}
.error {
... ... @@ -52,6 +52,7 @@
.pwd-intensity {
color: #ee0011;
}
.color {
background: #ee0011;
color: #fff;
... ... @@ -62,6 +63,7 @@
.pwd-intensity {
color: #f6da1e;
}
.color {
background: #f6da1e;
color: #fff;
... ... @@ -72,11 +74,13 @@
.pwd-intensity {
color: #3ee392;
}
.color {
background: #3ee392;
color: #fff;
}
}
.pwd-intensity {
height: 15px;
font-size: 12px;
... ... @@ -164,7 +168,6 @@
height: 14px;
width: 14px;
background: url(/passport/tip/error.png) no-repeat;
margin-right: 5px;
}
... ... @@ -209,7 +212,6 @@
margin-top: 50px;
}
}
@import "login";
@import "register";
@import "back";
... ...
... ... @@ -30,7 +30,6 @@
top: 20px;
right: 0;
z-index: 1;
border-radius: 5px;
li {
... ... @@ -49,7 +48,7 @@
}
/* 验证码 */
.captcha{
.captcha {
width: 160px;
float: left;
}
... ...
... ... @@ -11,7 +11,8 @@
width: 330px;
}
input, select {
input,
select {
outline: none;
}
... ... @@ -38,7 +39,8 @@
right: 0;
}
&.captcha, &.msg-captcha{
&.captcha,
&.msg-captcha {
width: 160px;
float: left;
}
... ... @@ -114,6 +116,7 @@
margin-top: 4px;
float: left;
}
.change-captcha {
margin-left: 10px;
cursor: pointer;
... ... @@ -188,6 +191,7 @@
&.skip-user-info {
font-size: 18px;
text-align: center;
a {
color: #ff1901;
text-decoration: underline;
... ... @@ -210,6 +214,7 @@
background: url(/passport/tip/succ-info.png) no-repeat;
}
}
.err-tip {
z-index: 1000;
position: absolute;
... ... @@ -228,7 +233,6 @@
background: url(/passport/tip/angle.png) no-repeat;
width: 17px;
height: 9px;
}
}
... ... @@ -259,9 +263,9 @@
top: 6px;
}
#count-down {
#count-down {
color: #ff1901;
}
}
}
.success-btn {
... ... @@ -276,4 +280,4 @@
letter-spacing: 2px;
}
}
}
\ No newline at end of file
}
... ...
... ... @@ -184,4 +184,4 @@
outline: none;
margin: 20px 0;
}
}
\ No newline at end of file
}
... ...
... ... @@ -53,4 +53,4 @@
background-image: resolve('passport/edit-info.png');
}
}
}
\ No newline at end of file
}
... ...