back.js 8.11 KB
/**
 * 找回密码
 * @author: TaoHuang
 * @date: 2016/7/18
 */

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

var emailAc = require('../common/ac-email'); // 邮箱自动完成

var $regionCodeText = $('#country-code'),
    $phoneNumInput = $('.phone-num'),
    $imgCaptchaInput = $('#verifyCode'),
    $regionSelectHeader = $('#country-select-header'),
    $regionSelectList = $('#country-select-list'),
    $nextBtn = $('#find-btn'),
    $form = $('#back-form');

var emailRegx = regx.emailRegx,
    phoneRegx = regx.phoneRegx;

var ep = new EventProxy();

var upDown = {
    up: '',
    down: ''
};

var selectedIcon = '';

function errTip(ele, msg) {
    var $errTip = ele.next('.tips');
    var $errMsg = $errTip.find('.content');

    $errMsg.text(msg);
    return $errTip.removeClass('hide');
}

function hideTip(ele) {
    return ele.next('.tips').addClass('hide');
}

require('yoho-jquery-placeholder');

/**
 * 刷新图形验证码
 */
function refreshImgCaptcha() {
    var time = new Date(),
        $captchaImg = $('#captcha-img'),
        captchaImgSrc = $captchaImg.attr('src').split('?')[0];

    $('#captcha-img').attr('src', captchaImgSrc + '?t=' + time.getTime());
}

/**
 * 异步验证手机是否有人注册
 */
function validatePhoneNumAsync() {
    return $.ajax({
        type: 'POST',
        url: '/passport/back/authcode',
        data: {
            phoneNum: $.trim($phoneNumInput.val()),
            area: $regionCodeText.text()
        }
    }).then(function(data) {
        if (data.code === 200) {
            return true;
        } else if (data.code === 402) {
            errTip($phoneNumInput, '该账号不存在');
            return false;
        } else if (data.code === 400) {
            refreshImgCaptcha();
            return false;
        }
    });
}

/**
 * 提交结果
 */
function nextStep(url) {
    $form.attr('action', url);
    $form.submit();
}

/**
 * 本地验证手机号
 * 注意:国际号码不做验证
 */
function validatePhoneNumLocal() {
    var val = $.trim($phoneNumInput.val());

    if (val !== '') {
        if (/^[0-9]+$/.test(val)) {

            // 这里只做中国区验证
            if ($regionCodeText.text() === '+86') {
                if (val.length === 11 && phoneRegx['+86'].test(val)) {
                    return true;
                } else {
                    errTip($phoneNumInput, '手机号码不正确,请重新输入');
                    return false;
                }
            }

            return true;
        } else {
            if (emailRegx.test(val)) {
                return true;
            } else {
                errTip($phoneNumInput, '邮箱格式不正确,请重新输入');
                return false;
            }
        }
    } else {
        errTip($phoneNumInput, '请输入帐号');
        return false;
    }
}

/**
 * 整合本地和异步验证
 */
function validatePhoneNum() {
    function validate() {
        var defer = $.Deferred(); //eslint-disable-line

        if (validatePhoneNumLocal()) {
            validatePhoneNumAsync().then(function(result) {
                if (result) {
                    defer.resolve(true);
                } else {
                    errTip($phoneNumInput, '帐号不存在');
                    defer.reject(false);
                }
            });
        } else {
            defer.reject(false);
        }

        return defer.promise();
    }

    return validate().then(function() {
        hideTip($phoneNumInput);
        ep.emit('phone-num', true);
        return true;
    }).fail(function() {
        ep.emit('phone-num', false);
        return false;
    });
}

/**
 * 本地图形验证码验证
 */
function validateImgCaptchaLocal() {
    var v = $.trim($imgCaptchaInput.val());

    if (v === '') {
        errTip($imgCaptchaInput, '请输入图形验证码');
        return false;
    } else if (v.length !== 4) {
        errTip($imgCaptchaInput, '验证码不正确');
        return false;
    }

    return true;
}

/**
 * 异步验证图形验证码
 */
function validateImgCaptchaAsync() {
    return $.ajax({
        type: 'POST',
        url: '/passport/images/check',
        data: {
            verifyCode: $.trim($imgCaptchaInput.val())
        }
    }).then(function(result) {
        if (result.code === 200) {
            return true;
        } else {
            errTip($imgCaptchaInput, '验证码不正确');
            return false;
        }
    });
}

/**
 * 整合本地和异步验证过程
 */
function validateImgCaptcha() {
    function validate() {
        var defer = $.Deferred(); //eslint-disable-line

        if (validateImgCaptchaLocal()) {
            validateImgCaptchaAsync().then(function(result) {
                if (result) {
                    defer.resolve(true);
                } else {
                    errTip($imgCaptchaInput, '验证码不正确');
                    defer.reject(false);
                }
            });
        } else {
            defer.reject(false);
        }

        return defer.promise();
    }

    return validate().then(function() {
        ep.emit('captcha-img', true);
        return true;
    }).fail(function() {
        ep.emit('captcha-img', false);
        return false;
    });
}

/**
 * 邮箱自动补全
 */
emailAc($phoneNumInput, function() {
    validatePhoneNum();
});

$imgCaptchaInput.attr('maxlength', 4);

// IE8 placeholder
$('input').placeholder();

exports.init = function() {

    // 监听事件 phone-num 和 captcha-img
    ep.tail('phone-num', 'captcha-img', function(phoneAuth, imgAuth) {
        if (phoneAuth && imgAuth) {
            $nextBtn.removeClass('disable');
        } else {
            $nextBtn.addClass('disable');
        }
    });

    // 监听事件 phone-num
    ep.on('phone-num', function(auth) {
        if (auth) {
            hideTip($phoneNumInput);
        }
    });

    // 监听事件 captcha-img
    ep.on('captcha-img', function(auth) {
        if (auth) {
            hideTip($imgCaptchaInput);
        } else {
            refreshImgCaptcha();
        }
    });

    $imgCaptchaInput.on('blur', function() {
        validateImgCaptcha();
        $imgCaptchaInput.removeClass('focus');
    }).on('focus', function() {
        hideTip($imgCaptchaInput);
        $imgCaptchaInput.addClass('focus');
    });

    $phoneNumInput.on('focus', function() {
        hideTip($phoneNumInput);
        $('.phone').addClass('focus');
    }).on('blur', function() {
        $phoneNumInput.removeClass('focus');
        $('.phone').removeClass('focus');
    });

    $nextBtn.on('click', function() {
        var urlPhone = '/passport/back/mobile',
            urlEmail = '/passport/back/email';

        var url = null;

        if ($(this).hasClass('disable')) {
            return;
        }

        if (/^[0-9]+$/.test($.trim($phoneNumInput.val()))) {
            url = urlPhone;
        } else {
            url = urlEmail;
        }

        $nextBtn.addClass('disable');

        nextStep(url);
    });

    $('.change-captcha, #captcha-img').on('click', function() {
        refreshImgCaptcha();
    });

    // 变换图标
    function changeHeader() {
        var $indicator = $regionSelectHeader.find('.iconfont');

        if ($regionSelectList.hasClass('hide')) {
            $indicator.html(upDown.up);
        } else {
            $indicator.html(upDown.down);
        }
    }

    // 选择国家列表
    $regionSelectList.on('click', '.option', function() {
        var $clickItem = $(this);
        var areaCode = $clickItem.data('code');
        var name = $clickItem.data('value');
        var $selectedItem = $clickItem.siblings('.selected');

        $selectedItem.find('.iconfont').html('').end().removeClass('selected');

        $clickItem.find('.iconfont').html(selectedIcon).end().addClass('selected');

        $regionSelectHeader.find('.name').html(name);
        $regionCodeText.text(areaCode);

        $regionSelectList.addClass('hide');
        changeHeader();
    });

    // 选择国家头
    $regionSelectHeader.on('click', function() {
        $regionSelectList.toggleClass('hide');
        changeHeader();
    });
};