add back captcha

htoooth
Commit 0b5ebcc3abab43e6bee934efc593dc78d2bc2299 1 parent 1a22d170
Showing 2 changed files with 28 additions and 82 deletions
apps/passport/views/action/back/index.hbs
public/js/passport/back/back.js
--- a/apps/passport/views/action/back/index.hbs
View file @0b5ebcc
+++ b/apps/passport/views/action/back/index.hbs
View file @0b5ebcc
@@ -24,14 +24,10 @@
                             <em>账户名不能为空</em>
                         </span>
                     </li>
-                    <li class="input-container-li clearfix">
-                        <input id="captcha" class="input va captcha" type="text" name="verifyCode" placeholder="验证码" autocomplete="off" maxlength="4">
-                        <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
-                        <a id="change-captcha" class="link change-captcha">换一张</a>
-                        <span id="captcha-err" class="err-tip captcha-err hide">
-                            <i></i>
-                            <em>验证码不能为空</em>
-                        </span>
+
+                    <input name="verifyCode" id="captcha-value" type="hidden" value="">
+
+                    <li id='captcha-img' class="input-container-li clearfix">
                     </li>
                     <li class="input-container-li clearfix">
                         <input name="refer" id="refer" type="hidden" value="http%3A%2F%2Fwww.yohobuy.com%2F">
--- a/public/js/passport/back/back.js
View file @0b5ebcc
+++ b/public/js/passport/back/back.js
View file @0b5ebcc
@@ -8,6 +8,8 @@ var $ = require('yoho-jquery');
 var regx = require('../common/mail-phone-regx');
+var Captcha = require('../../plugins/captcha');
+
 var emailAc = require('../common/ac-email'); // 邮箱自动完成
 var emailReg = regx.emailRegx,
@@ -20,24 +22,15 @@ var $cr = $('#country-code-hide'),
     $cc = $('#country-code'),
     $btn = $('#find-btn'),
     $accErr = $('#account-err'),
-    $caErr = $('#captcha-err'),
     caCount = 4, // 验证码位数
     hasPh = false,
-    hasCa = false;
+    captcha = new Captcha('#captcha-img').init();
 require('../../simple-header');
 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) {
+    if (hasPh) {
         $btn.removeClass('disable').prop('disabled', false);
     } else {
         $btn.addClass('disable').prop('disabled', true);
@@ -45,33 +38,27 @@ function enableBtn() {
 }
 function authcode() {
-    if (!hasPh || !hasCa) {
-        enableBtn();
-        return;
-    }
-
-    $.ajax({
+    return $.ajax({
         type: 'POST',
         url: '/passport/back/authcode',
         data: {
-            verifyCode: $.trim($ca.val()),
+            verifyCode: captcha.getResults(),
             phoneNum: $phoneNum.val(),
             area: $cr.val()
         }
     }).then(function(data) {
         if (data.code === 200) {
-            hasCa = true;
+            $('#captcha-value').val(captcha.getResults());
+            return $.Deferred().resolve().promise(); //eslint-disable-line
         } else if (data.code === 402) {
-            hasPh = false;
-            hasCa = true;
             $accErr.removeClass('hide').find('em').text('该账号不存在');
             $phoneNum.addClass('error');
+            return $.Deferred().reject().promise();//eslint-disable-line
         } else if (data.code === 400) {
-            hasCa = false;
-            imgcode();
+            captcha.showTip();
+            return $.Deferred().reject().promise();//eslint-disable-line
         }
-        enableBtn();
     });
 }
@@ -101,7 +88,6 @@ function vaPn(v) {
         pass = false;
     }
     hasPh = pass;
-    authcode();
     return {
         pass: pass,
@@ -109,26 +95,13 @@ function vaPn(v) {
     };
 }
-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');
+        enableBtn();
     } else {
         $accErr.removeClass('hide').find('em').text(pnVa.errTxt);
         $phoneNum.addClass('error');
@@ -141,10 +114,6 @@ $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') {
@@ -184,6 +153,8 @@ $(document).click(function() {
     }
 });
+captcha.refresh();
+
 $phoneNum.keyup(function() {
     vaPn($.trim($(this).val()));
 }).focus(function() {
@@ -193,43 +164,22 @@ $phoneNum.keyup(function() {
     $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;
+
+    if (hasPh) {
+        authcode().then(function() {
+            $('#back-form').submit();
+        });
     }
+
+    e.preventDefault();
+    return true;
 });