Authored by 陈轩

注册 图形旋转 验证码 完成

... ... @@ -76,6 +76,7 @@ let index = (req, res) => {
}
res.render('reg/index', {
width750: true,
module: 'passport',
page: 'reg',
title: '注册',
... ... @@ -99,7 +100,7 @@ let verifyMobile = (req, res, next) => {
let mobile = +req.body.phoneNum;
let area = +(req.body.areaCode || 86);
let captcha = (req.body.captcha || '').trim();
let diffCaptcha = _.get(req.session, 'phoneReg.captcha');
let diffCaptcha = _.get(req.session, 'captcha');
// error case: 没有验证码
if (!diffCaptcha) {
... ... @@ -110,7 +111,7 @@ let verifyMobile = (req, res, next) => {
});
}
delete req.session.phoneReg.captcha; // captcha 一次性
delete req.session.captcha; // captcha 一次性
// error case: 验证码不匹配
if (captcha !== diffCaptcha) {
... ...
... ... @@ -6,16 +6,13 @@
<span id="area-code" class="area-code">{{areaCode}}</span>
<input id="phone-num" class="input phone-num" type="text" placeholder="手机号">
</div>
<!-- 验证码: start-->
<div class="passport-captcha row">
<div class="passport-captcha-img">
<img class="passport-captcha-png" src="{{captchaUrl}}">
</div>
<div class="passport-captcha-input">
<input id="js-captcha" type="text" placeholder="验证码">
</div>
{{!--图片验证 start--}}
<div id="js-img-check">
<input type="hidden" name="captsrc" value="{{captsrc}}">
</div>
<!-- 验证码: end-->
{{!--图片验证 end--}}
<span id="btn-next" class="btn btn-next disable row">下一步</span>
<p class="register-tip">Yoho!Family账号可登录Yoho!Buy有货、Yoho!Now、mars及SHOW</p>
</div>
... ...
... ... @@ -24,17 +24,29 @@ api.selectCssHack($('#country-select'));
api.bindClearEvt();
// 图片验证码
let ImgCheck = require('plugin/img-check');
let imgCheck = new ImgCheck('#js-img-check', {
useREM: {
rootFontSize: 40,
picWidth: 150
}
});
imgCheck.init();
/**
* 必填校验
*/
function checkEnableNext() {
var phone = trim($phoneNum.val());
var area = trim($countrySelect.val());
var captcha = trim($captcha.val());
var ret = true;
$.each([phone, area, captcha], function(i, val) {
$.each([phone, area], function(i, val) {
if (!val) {
ret = false;
return ret;
... ... @@ -44,24 +56,13 @@ function checkEnableNext() {
return ret;
}
/**
* 刷新 校验码
*/
function refreshCaptcha() {
$captcha.val('').focus();
$captchaPNG.attr('src', ['//m.yohobuy.com/passport/reg/captcha.png', '?t=', Date.now()].join(''));
}
/*
Event bind
*/
$('.reg-page')
.on('input', '.phone-num, #js-captcha', function() {
.on('input', '.phone-num', function() {
$btnNext.toggleClass('disable', !checkEnableNext());
})
.on('click', '.passport-captcha-png', refreshCaptcha);
});
$countrySelect.change(function() {
$areaCode.text($countrySelect.val());
... ... @@ -70,10 +71,10 @@ $countrySelect.change(function() {
$btnNext.on('touchstart', function() {
var pn = trim($phoneNum.val()),
areaCode = $countrySelect.val(),
captcha = $captcha.val().trim();
captcha = imgCheck.getResults();
if (!captcha) {
tip.show('请输入验证码');
if (captcha === '0000') {
tip.show('请将图片旋转到正确位置');
return false;
}
... ... @@ -102,7 +103,7 @@ $btnNext.on('touchstart', function() {
if (data.code === 200) {
location.href = data.data;
} else {
refreshCaptcha();
imgCheck.refresh();
showErrTip(data.message);
requested = false;
... ... @@ -110,7 +111,7 @@ $btnNext.on('touchstart', function() {
},
error: function() {
showErrTip('出错了,请重试');
refreshCaptcha();
imgCheck.refresh();
requested = false;
}
});
... ...