wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit 5349d4ad66263c4ae408e0b13cae4c2bc108b947 1 parent 7ebcaa32

完成注册模块

Inline Side-by-side
Showing 6 changed files with 172 additions and 132 deletions
... ... @@ -24,7 +24,7 @@
</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="获取短信验证码" disabled="">
<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">
... ...
/**
* @desc: 计算密码复杂度(from:http://www.oschina.net/code/snippet_127301_17269)
* @author: xuqi(qi.xu@yoho.cn)
* @date: 2015/5/6
/*
* 计算密码复杂度
*/
function computeComplex(password) {
var complex = 0;
var length = password.length;
var pre = '';
var preType = 0;
for (var i = 0; i < length; i++) {
var cur = password.charAt(i);
var curType = gettype(password, i);
if (preType != curType || !isregular(cur, pre, curType)) {
complex += curType + getcomplex(curType, preType);
}
pre = cur;
preType = curType;
}
return complex;
}
function gettype(str, i) {
if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) {
return 1;
}
else if(str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) {
} else if (str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) {
return 2;
}
else if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
} else if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
return 3;
}
... ... @@ -42,25 +18,50 @@ function isregular(cur, pre, type) {
var curCode = cur.charCodeAt(0);
var preCode = pre.charCodeAt(0);
if(curCode - preCode == 0){
if (curCode - preCode === 0) {
return true;
}
if(type != 4 && (curCode - preCode == 1 || curCode - preCode == -1)){
if (type !== 4 && (curCode - preCode === 1 || curCode - preCode === -1)) {
return true;
}
return false;
}
function getcomplex(curType, preType){
if(preType == 0 || curType == preType){
function getcomplex(curType, preType) {
if (preType === 0 || curType === preType) {
return 0;
}else if(curType == 4 || preType == 4){
} else if (curType === 4 || preType === 4) {
return 2;
}else{
} else {
return 1;
}
}
function computeComplex(password) {
var complex = 0,
length = password.length,
pre = '',
preType = 0,
i = 0,
cur,
curType;
for (i = 0; i < length; i++) {
cur = password.charAt(i);
curType = gettype(password, i);
if (preType !== curType || !isregular(cur, pre, curType)) {
complex += curType + getcomplex(curType, preType);
}
pre = cur;
preType = curType;
}
return complex;
}
module.exports = computeComplex;
\ No newline at end of file
... ...
... ... @@ -9,6 +9,7 @@ var $ = require('yoho.jquery'),
var $registerPage = $('.register-page'),
$pwdTips = $('#pwd-tips'),
$pwdTip1 = $pwdTips.find('#pwd-tip1'),
$errTip = $('#err-tip'),
$registerBtn = $('#register-btn');
... ... @@ -57,20 +58,17 @@ validateResult = [
{
id: 'phone-num',
message: '', //错误信息
status: false, //当前的状态
isNeedAjaxValidate: false //是否需要ajax校验，如果手机号正则校验通过则需要ajax校验该手机号是否注册过
status: false //当前的状态
},
{
id: 'captcha',
message: '',
status: false,
isNeedAjaxValidate: false //图形验证码需要发ajax确认是否正确
status: false
},
{
id: 'msg-captcha',
message: '',
status: false,
isNeedAjaxValidate: false //是否需要ajax请求验证短信验证码的正确性
status: false
},
{
id: 'pwd',
... ... @@ -183,10 +181,6 @@ function validateRule($element, callback) {
callback();
} else {
validateResult[0].message = '';
validateResult[0].status = false;
validateResult[0].isNeedAjaxValidate = true;
phoneAjaxFn(callback);
}
... ... @@ -197,10 +191,22 @@ function validateRule($element, callback) {
validateResult[1].status = false;
callback();
} else if (val.length <= 3) {
validateResult[1].message = '图形验证码为4位';
validateResult[1].status = false;
callback();
} else {
validateResult[1].message = '';
validateResult[1].isNeedAjaxValidate = true;
picCaptchaAjaxFn(callback);
// 并且手机号正确
if (validateResult[0].status) {
picCaptchaAjaxFn(callback);
} else {
validateResult[1].message = '图形验证码错误';
validateResult[1].status = false;
callback();
}
}
//短信验证码校验
... ... @@ -211,11 +217,20 @@ function validateRule($element, callback) {
validateResult[2].status = false;
callback();
} else {
validateResult[2].message = '';
} else if (val.length <= 3) {
validateResult[2].message = '短信验证码为4位';
validateResult[2].status = false;
validateResult[2].isNeedAjaxValidate = true;
msgCaptchaAjaxFn(callback);
callback();
} else {
// 并且图形验证码正确
if (validateResult[1].status) {
msgCaptchaAjaxFn(callback);
} else {
validateResult[2].message = '短信验证码错误';
validateResult[2].status = false;
}
}
//密码校验
... ... @@ -260,6 +275,7 @@ function validateRule($element, callback) {
//显示提示信息
function showErrTip() {
var show = false,
tipPosition,
$container,
... ... @@ -267,20 +283,26 @@ function showErrTip() {
validateResultLen = validateResult.length;
for (i = 0; i < validateResultLen; i++) {
if (!show && !!validateResult[i].message) {
if (!show) {
//不可以通过status判断
if (!!validateResult[i].message) {
//显示错误提示
$errTip.find('span').text(validateResult[i].message);
//显示错误提示
$errTip.find('span').text(validateResult[i].message);
$container = $('#' + validateResult[i].id);
$container = $('#' + validateResult[i].id);
tipPosition = $container.offset();
$errTip.css({
top: tipPosition.top - 40,
left: tipPosition.left
}).removeClass('hide');
tipPosition = $container.offset();
$errTip.css({
top: tipPosition.top - 40,
left: tipPosition.left
}).removeClass('hide');
show = true; //停止判断
show = true; //停止判断
} else {
$errTip.addClass('hide');
}
}
}
}
... ... @@ -308,18 +330,67 @@ function showBorder() {
}
}
// 密码强度验证
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;
vLen = validateResult.length,
$that = $(this);
validateRule($(this), function() {
showErrTip();
showErrTip(); // 显示错误提示
showBorder(); // 显示红色边框
// 如果validateResult中有4个status为true表示验证通过
for (j = 0; j < vLen; j++) {
if (validateResult[j].status) {
... ... @@ -335,14 +406,28 @@ $registerPage.find('.va').keyup(function() {
$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() {
/*validateRule($(this), function() {
showErrTip();
showBorder(); // 显示红色边框
});
});*/
});
$regionSelect.change(function() {
... ... @@ -352,68 +437,23 @@ $regionSelect.change(function() {
validateRule($pn, showErrTip); //验证
});
// 图形验证keyup
$ca.keyup(function() {
// 验证码输入4位并且手机号验证通过发ajax请求
if ($(this).val().length === 4 && validateResult[0].status) {
picCaptchaAjaxFn(function() {
if (validateResult[1].status) {
$sendCaptcha.removeClass('disable');
}
});
// 点击发送验证码
$sendCaptcha.click(function() {
var timeResidue = 10,
t;
} else {
$sendCaptcha.addClass('disable');
if ($(this).hasClass('disable')) {
return;
}
});
$pwd.keyup(function() {
var pwd = $(this).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 === '') {
} else {
if (pwd.length < 6 || pwd.length > 20) {
} else {
//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
... ...
@import "login", "register", "back";
$tip: sprite-map("passport/tip/*.png", $spacing: 10px);
@import "login", "register", "back";
/**/
.passport-page {
width: 1150px;
... ...
... ... @@ -214,14 +214,13 @@
b {
display: block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ffebeb;
position: absolute;
top: 30px;
left: 20px;
background: sprite($tip, angle) no-repeat;
width: image-width(sprite-file($tip, angle));
height: image-height(sprite-file($tip, angle));
}
}
}
... ...