back.js 6.91 KB
/**
 * 找回密码
 * @author: xuqi<qi.xu@yoho.cn>
 * @date: 2015/12/14
 */

var $ = require('yoho.jquery'),
    phoneRegx = require('./mail-phone-regx').phoneRegx;

var $cr = $('#country-code-hide'),
    $phoneNum = $('#phone-num'),
    $ca = $('#captcha'),
    $tipPanel = $('#tip-panel'),
    emailReg = /^[.\-_a-zA-Z0-9]+@[\-_a-zA-Z0-9]+\.[a-zA-Z0-9]/,
    acAccount = [
        ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com',
            'sohu.com', 'hotmail.com', '139.com', '189.com'
        ], //数字顺序
        ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com',
            'sohu.com', 'hotmail.com', '139.com', '189.com'
        ] //组合顺序
    ],
    $ccList = $('#country-code-list'),
    $cc = $('#country-code'),
    $btn = $('#find-btn'),
    $accErr = $('#account-err'),
    $caErr = $('#captcha-err'),
    time, //timeout-id
    caCount = 4, //验证码位数
    hasPh = false,
    hasCa = false;

require('yoho.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 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;
    return {
        pass: pass,
        errTxt: errTxt
    };
}

function vaCa() {
    var v = $.trim($ca.val());

    if (v === '' || v.length < caCount) {
        hasCa = false;
        enableBtn();
        return;
    } else {
        $.ajax({
            type: 'POST',
            url: '/passport/back/authcode',
            data: {
                verifyCode: v,
                phoneNum: $('#phone-num').val(),
                area: $('#country-code-hide').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();
        });
    }
}

$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 ($tipPanel.css('display') === 'block') {
        $tipPanel.slideUp();
    }
    if ($ccList.css('display') === 'block') {
        $ccList.slideUp();
    }
});

$phoneNum.keyup(function() {
    var account = $.trim($(this).val()),
        html = '',
        acs,
        i;

    //输入@时显示自动补全列表
    if (account.indexOf('@') !== -1 && account.lastIndexOf('@') === account.indexOf('@')) {
        if (/^[0-9]*@$/.test(account)) {

            //数字顺序
            acs = acAccount[0];
        } else {
            acs = acAccount[1];
        }
        for (i = 0; i < acs.length; i++) {
            html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + acs[i] + '</li>';
        }
        $tipPanel.html(html).slideDown();
    } else {
        $tipPanel.slideUp();
    }
    vaPn(account);
    enableBtn();
}).blur(function() {
    time = setTimeout(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');
        }
    }, 170);
}).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');

        //验证码错误则刷新验证码
        imgcode();
    }
}).focus(function() {
    $(this).removeClass('error');

    //focus隐藏错误提示
    $caErr.addClass('hide');
}).keyup(function() {
    vaCa();
});

$tipPanel.delegate('li', 'click', function(e) {
    var account = $(this).text(),
        pnVa;

    e.stopPropagation();
    $phoneNum.val(account);
    if (time) {
        clearTimeout(time);
        pnVa = vaPn(account);
        enableBtn();
        if (pnVa.pass) {
            $accErr.addClass('hide');
            $phoneNum.removeClass('error');
        } else {
            $accErr.removeClass('hide').find('em').text(pnVa.errTx);
            $phoneNum.addClass('error');
        }
        time = null;
    }
    $tipPanel.slideUp();
});

$('#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;
    }
});