chenchao / 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 @@ @@ -24,7 +24,7 @@
24 </li> 24 </li>
25 <li class="clearfix" data-index="2"> 25 <li class="clearfix" data-index="2">
26 <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4"> 26 <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
27 - <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled=""> 27 + <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码">
28 <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span> 28 <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span>
29 </li> 29 </li>
30 <li class="clearfix" data-index="3"> 30 <li class="clearfix" data-index="3">
1 -/**  
2 - * @desc: 计算密码复杂度(from:http://www.oschina.net/code/snippet_127301_17269)  
3 - * @author: xuqi(qi.xu@yoho.cn)  
4 - * @date: 2015/5/6 1 +/*
  2 + * 计算密码复杂度
5 */ 3 */
6 -function computeComplex(password) {  
7 - var complex = 0;  
8 - var length = password.length;  
9 -  
10 - var pre = '';  
11 - var preType = 0;  
12 - for (var i = 0; i < length; i++) {  
13 - var cur = password.charAt(i);  
14 - var curType = gettype(password, i);  
15 -  
16 - if (preType != curType || !isregular(cur, pre, curType)) {  
17 - complex += curType + getcomplex(curType, preType);  
18 - }  
19 -  
20 - pre = cur;  
21 - preType = curType;  
22 - }  
23 -  
24 - return complex;  
25 -}  
26 4
27 function gettype(str, i) { 5 function gettype(str, i) {
28 if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) { 6 if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) {
29 return 1; 7 return 1;
30 - }  
31 - else if(str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) { 8 + } else if (str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) {
32 return 2; 9 return 2;
33 - }  
34 - else if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) { 10 + } else if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) {
35 return 3; 11 return 3;
36 } 12 }
37 13
@@ -42,25 +18,50 @@ function isregular(cur, pre, type) { @@ -42,25 +18,50 @@ function isregular(cur, pre, type) {
42 var curCode = cur.charCodeAt(0); 18 var curCode = cur.charCodeAt(0);
43 var preCode = pre.charCodeAt(0); 19 var preCode = pre.charCodeAt(0);
44 20
45 - if(curCode - preCode == 0){ 21 + if (curCode - preCode === 0) {
46 return true; 22 return true;
47 } 23 }
48 24
49 - if(type != 4 && (curCode - preCode == 1 || curCode - preCode == -1)){ 25 + if (type !== 4 && (curCode - preCode === 1 || curCode - preCode === -1)) {
50 return true; 26 return true;
51 } 27 }
52 28
53 return false; 29 return false;
54 } 30 }
55 31
56 -function getcomplex(curType, preType){  
57 - if(preType == 0 || curType == preType){ 32 +function getcomplex(curType, preType) {
  33 + if (preType === 0 || curType === preType) {
58 return 0; 34 return 0;
59 - }else if(curType == 4 || preType == 4){ 35 + } else if (curType === 4 || preType === 4) {
60 return 2; 36 return 2;
61 - }else{ 37 + } else {
62 return 1; 38 return 1;
63 } 39 }
64 } 40 }
65 41
  42 +function computeComplex(password) {
  43 + var complex = 0,
  44 + length = password.length,
  45 + pre = '',
  46 + preType = 0,
  47 + i = 0,
  48 + cur,
  49 + curType;
  50 +
  51 +
  52 + for (i = 0; i < length; i++) {
  53 + cur = password.charAt(i);
  54 + curType = gettype(password, i);
  55 +
  56 + if (preType !== curType || !isregular(cur, pre, curType)) {
  57 + complex += curType + getcomplex(curType, preType);
  58 + }
  59 +
  60 + pre = cur;
  61 + preType = curType;
  62 + }
  63 +
  64 + return complex;
  65 +}
  66 +
66 module.exports = computeComplex; 67 module.exports = computeComplex;
@@ -9,6 +9,7 @@ var $ = require('yoho.jquery'), @@ -9,6 +9,7 @@ var $ = require('yoho.jquery'),
9 9
10 var $registerPage = $('.register-page'), 10 var $registerPage = $('.register-page'),
11 $pwdTips = $('#pwd-tips'), 11 $pwdTips = $('#pwd-tips'),
  12 + $pwdTip1 = $pwdTips.find('#pwd-tip1'),
12 $errTip = $('#err-tip'), 13 $errTip = $('#err-tip'),
13 $registerBtn = $('#register-btn'); 14 $registerBtn = $('#register-btn');
14 15
@@ -57,20 +58,17 @@ validateResult = [ @@ -57,20 +58,17 @@ validateResult = [
57 { 58 {
58 id: 'phone-num', 59 id: 'phone-num',
59 message: '', //错误信息 60 message: '', //错误信息
60 - status: false, //当前的状态  
61 - isNeedAjaxValidate: false //是否需要ajax校验，如果手机号正则校验通过则需要ajax校验该手机号是否注册过 61 + status: false //当前的状态
62 }, 62 },
63 { 63 {
64 id: 'captcha', 64 id: 'captcha',
65 message: '', 65 message: '',
66 - status: false,  
67 - isNeedAjaxValidate: false //图形验证码需要发ajax确认是否正确 66 + status: false
68 }, 67 },
69 { 68 {
70 id: 'msg-captcha', 69 id: 'msg-captcha',
71 message: '', 70 message: '',
72 - status: false,  
73 - isNeedAjaxValidate: false //是否需要ajax请求验证短信验证码的正确性 71 + status: false
74 }, 72 },
75 { 73 {
76 id: 'pwd', 74 id: 'pwd',
@@ -183,10 +181,6 @@ function validateRule($element, callback) { @@ -183,10 +181,6 @@ function validateRule($element, callback) {
183 callback(); 181 callback();
184 182
185 } else { 183 } else {
186 - validateResult[0].message = '';  
187 - validateResult[0].status = false;  
188 - validateResult[0].isNeedAjaxValidate = true;  
189 -  
190 phoneAjaxFn(callback); 184 phoneAjaxFn(callback);
191 } 185 }
192 186
@@ -197,10 +191,22 @@ function validateRule($element, callback) { @@ -197,10 +191,22 @@ function validateRule($element, callback) {
197 validateResult[1].status = false; 191 validateResult[1].status = false;
198 callback(); 192 callback();
199 193
  194 + } else if (val.length <= 3) {
  195 + validateResult[1].message = '图形验证码为4位';
  196 + validateResult[1].status = false;
  197 + callback();
  198 +
200 } else { 199 } else {
201 - validateResult[1].message = '';  
202 - validateResult[1].isNeedAjaxValidate = true;  
203 - picCaptchaAjaxFn(callback); 200 +
  201 + // 并且手机号正确
  202 + if (validateResult[0].status) {
  203 + picCaptchaAjaxFn(callback);
  204 + } else {
  205 + validateResult[1].message = '图形验证码错误';
  206 + validateResult[1].status = false;
  207 + callback();
  208 + }
  209 +
204 } 210 }
205 211
206 //短信验证码校验 212 //短信验证码校验
@@ -211,11 +217,20 @@ function validateRule($element, callback) { @@ -211,11 +217,20 @@ function validateRule($element, callback) {
211 validateResult[2].status = false; 217 validateResult[2].status = false;
212 callback(); 218 callback();
213 219
214 - } else {  
215 - validateResult[2].message = ''; 220 + } else if (val.length <= 3) {
  221 + validateResult[2].message = '短信验证码为4位';
216 validateResult[2].status = false; 222 validateResult[2].status = false;
217 - validateResult[2].isNeedAjaxValidate = true;  
218 - msgCaptchaAjaxFn(callback); 223 + callback();
  224 +
  225 + } else {
  226 +
  227 + // 并且图形验证码正确
  228 + if (validateResult[1].status) {
  229 + msgCaptchaAjaxFn(callback);
  230 + } else {
  231 + validateResult[2].message = '短信验证码错误';
  232 + validateResult[2].status = false;
  233 + }
219 } 234 }
220 235
221 //密码校验 236 //密码校验
@@ -260,6 +275,7 @@ function validateRule($element, callback) { @@ -260,6 +275,7 @@ function validateRule($element, callback) {
260 275
261 //显示提示信息 276 //显示提示信息
262 function showErrTip() { 277 function showErrTip() {
  278 +
263 var show = false, 279 var show = false,
264 tipPosition, 280 tipPosition,
265 $container, 281 $container,
@@ -267,20 +283,26 @@ function showErrTip() { @@ -267,20 +283,26 @@ function showErrTip() {
267 validateResultLen = validateResult.length; 283 validateResultLen = validateResult.length;
268 284
269 for (i = 0; i < validateResultLen; i++) { 285 for (i = 0; i < validateResultLen; i++) {
270 - if (!show && !!validateResult[i].message) { 286 + if (!show) {
  287 +
  288 + //不可以通过status判断
  289 + if (!!validateResult[i].message) {
271 290
272 - //显示错误提示  
273 - $errTip.find('span').text(validateResult[i].message); 291 + //显示错误提示
  292 + $errTip.find('span').text(validateResult[i].message);
274 293
275 - $container = $('#' + validateResult[i].id); 294 + $container = $('#' + validateResult[i].id);
276 295
277 - tipPosition = $container.offset();  
278 - $errTip.css({  
279 - top: tipPosition.top - 40,  
280 - left: tipPosition.left  
281 - }).removeClass('hide'); 296 + tipPosition = $container.offset();
  297 + $errTip.css({
  298 + top: tipPosition.top - 40,
  299 + left: tipPosition.left
  300 + }).removeClass('hide');
282 301
283 - show = true; //停止判断 302 + show = true; //停止判断
  303 + } else {
  304 + $errTip.addClass('hide');
  305 + }
284 } 306 }
285 } 307 }
286 } 308 }
@@ -308,18 +330,67 @@ function showBorder() { @@ -308,18 +330,67 @@ function showBorder() {
308 } 330 }
309 } 331 }
310 332
  333 +// 密码强度验证
  334 +function pwdFn($obj) {
  335 + var pwd = $obj.val(),
  336 + pwdStrength = computeComplex(pwd),
  337 + level = 0;
  338 +
  339 + if (pwdStrength === 0) {
  340 + level = 0;
  341 + } else if (pwdStrength <= 10) {
  342 + level = 1;
  343 + } else if (pwdStrength <= 20) {
  344 + level = 2;
  345 + } else {
  346 + level = 3;
  347 + }
  348 +
  349 + switch (level) {
  350 + case 0:
  351 + $pwdParent.removeClass('red yellow green');
  352 + $pwdIntensity.removeClass('color');
  353 + break;
  354 + case 1:
  355 + $pwdParent.addClass('red').removeClass('yellow green');
  356 + $pwdIntensity.filter('.low').addClass('color');
  357 + $pwdIntensity.filter('.mid,.high').removeClass('color');
  358 + break;
  359 + case 2:
  360 + $pwdParent.addClass('yellow').removeClass('red green');
  361 + $pwdIntensity.filter('.low,.mid').addClass('color');
  362 + $pwdIntensity.filter('.high').removeClass('color');
  363 + break;
  364 + case 3:
  365 + $pwdParent.addClass('green').removeClass('yellow red');
  366 + $pwdIntensity.addClass('color');
  367 + break;
  368 + }
  369 +
  370 + //提示框
  371 + if (pwd === '') {
  372 + $pwdTip1.removeClass('red yes no').addClass('default');
  373 + } else if (pwd.length < 6 || pwd.length > 20) {
  374 + $pwdTip1.removeClass('default yes').addClass('no red');
  375 + } else {
  376 + $pwdTip1.removeClass('default no red').addClass('yes');
  377 + }
  378 +}
  379 +
311 // 失去焦点时开始校验 380 // 失去焦点时开始校验
312 // Tips: 不可以在获得焦点的时候验证，获得焦点和失去焦点的间隔太小，如果中间存在ajax校验的话会出现问题 381 // Tips: 不可以在获得焦点的时候验证，获得焦点和失去焦点的间隔太小，如果中间存在ajax校验的话会出现问题
313 $registerPage.find('.va').keyup(function() { 382 $registerPage.find('.va').keyup(function() {
314 383
315 var j, 384 var j,
316 statusLen = 0, 385 statusLen = 0,
317 - vLen = validateResult.length; 386 + vLen = validateResult.length,
  387 + $that = $(this);
318 388
319 validateRule($(this), function() { 389 validateRule($(this), function() {
320 - showErrTip(); 390 + showErrTip(); // 显示错误提示
321 showBorder(); // 显示红色边框 391 showBorder(); // 显示红色边框
322 392
  393 + // 如果validateResult中有4个status为true表示验证通过
323 for (j = 0; j < vLen; j++) { 394 for (j = 0; j < vLen; j++) {
324 395
325 if (validateResult[j].status) { 396 if (validateResult[j].status) {
@@ -335,14 +406,28 @@ $registerPage.find('.va').keyup(function() { @@ -335,14 +406,28 @@ $registerPage.find('.va').keyup(function() {
335 $registerBtn.addClass('disable'); 406 $registerBtn.addClass('disable');
336 } 407 }
337 408
  409 + // 图形验证通过时，发送短信按钮可点击
  410 + if (validateResult[1].status) {
  411 + $sendCaptcha.removeClass('disable');
  412 + } else {
  413 + $sendCaptcha.addClass('disable');
  414 + }
  415 +
  416 + //图形验证通过时，发送短信按钮可点击 end
  417 +
338 }); 418 });
339 419
  420 + // 如果是密码则校验强度
  421 + if (($that).hasClass('pwd')) {
  422 + pwdFn($that);
  423 + }
  424 +
340 }).blur(function() { 425 }).blur(function() {
341 426
342 - validateRule($(this), function() { 427 + /*validateRule($(this), function() {
343 showErrTip(); 428 showErrTip();
344 showBorder(); // 显示红色边框 429 showBorder(); // 显示红色边框
345 - }); 430 + });*/
346 }); 431 });
347 432
348 $regionSelect.change(function() { 433 $regionSelect.change(function() {
@@ -352,68 +437,23 @@ $regionSelect.change(function() { @@ -352,68 +437,23 @@ $regionSelect.change(function() {
352 validateRule($pn, showErrTip); //验证 437 validateRule($pn, showErrTip); //验证
353 }); 438 });
354 439
355 -// 图形验证keyup  
356 -$ca.keyup(function() {  
357 -  
358 - // 验证码输入4位并且手机号验证通过发ajax请求  
359 - if ($(this).val().length === 4 && validateResult[0].status) {  
360 -  
361 - picCaptchaAjaxFn(function() {  
362 - if (validateResult[1].status) {  
363 - $sendCaptcha.removeClass('disable');  
364 - }  
365 - }); 440 +// 点击发送验证码
  441 +$sendCaptcha.click(function() {
  442 + var timeResidue = 10,
  443 + t;
366 444
367 - } else {  
368 - $sendCaptcha.addClass('disable'); 445 + if ($(this).hasClass('disable')) {
  446 + return;
369 } 447 }
370 -});  
371 448
372 -$pwd.keyup(function() {  
373 - var pwd = $(this).val(),  
374 - pwdStrength = computeComplex(pwd),  
375 - level = 0;  
376 -  
377 - if (pwdStrength === 0) {  
378 - level = 0;  
379 - } else if (pwdStrength <= 10) {  
380 - level = 1;  
381 - } else if (pwdStrength <= 20) {  
382 - level = 2;  
383 - } else {  
384 - level = 3;  
385 - }  
386 -  
387 - switch (level) {  
388 - case 0:  
389 - $pwdParent.removeClass('red yellow green');  
390 - $pwdIntensity.removeClass('color');  
391 - break;  
392 - case 1:  
393 - $pwdParent.addClass('red').removeClass('yellow green');  
394 - $pwdIntensity.filter('.low').addClass('color');  
395 - $pwdIntensity.filter('.mid,.high').removeClass('color');  
396 - break;  
397 - case 2:  
398 - $pwdParent.addClass('yellow').removeClass('red green');  
399 - $pwdIntensity.filter('.low,.mid').addClass('color');  
400 - $pwdIntensity.filter('.high').removeClass('color');  
401 - break;  
402 - case 3:  
403 - $pwdParent.addClass('green').removeClass('yellow red');  
404 - $pwdIntensity.addClass('color');  
405 - break;  
406 - }  
407 -  
408 - //提示框  
409 - /*if (pwd === '') {  
410 -  
411 - } else {  
412 -  
413 - if (pwd.length < 6 || pwd.length > 20) {  
414 -  
415 - } else { 449 + //todo ajax
416 450
  451 + t = setInterval(function() {
  452 + if (timeResidue <= 0) {
  453 + $sendCaptcha.removeClass('disable').val('获取短信验证码');
  454 + clearInterval(t);
  455 + return;
417 } 456 }
418 - }*/ 457 + $sendCaptcha.addClass('disable').val(timeResidue-- + '秒可重新发送');
  458 + }, 1000);
419 }); 459 });
1 -@import "login", "register", "back";  
2 -  
3 $tip: sprite-map("passport/tip/*.png", $spacing: 10px); 1 $tip: sprite-map("passport/tip/*.png", $spacing: 10px);
  2 +
  3 +@import "login", "register", "back";
4 /**/ 4 /**/
5 .passport-page { 5 .passport-page {
6 width: 1150px; 6 width: 1150px;
@@ -214,14 +214,13 @@ @@ -214,14 +214,13 @@
214 214
215 b { 215 b {
216 display: block; 216 display: block;
217 - width: 0;  
218 - height: 0;  
219 - border-left: 8px solid transparent;  
220 - border-right: 8px solid transparent;  
221 - border-top: 8px solid #ffebeb;  
222 position: absolute; 217 position: absolute;
223 top: 30px; 218 top: 30px;
224 left: 20px; 219 left: 20px;
  220 + background: sprite($tip, angle) no-repeat;
  221 + width: image-width(sprite-file($tip, angle));
  222 + height: image-height(sprite-file($tip, angle));
  223 +
225 } 224 }
226 } 225 }
227 } 226 }