Calculation/app/public/js/profile.js

/**
 * 账号相关js
 *
 * @author CaiAoLin
 * @date 2018/1/26
 * @version
 */
$(document).ready(function() {
    try {
        if (user !== '') {
            $(".title-bar h2").text(user);
        }
        $.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^1[3456789]\d{9}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        const options = {
            rules: '',
            errorPlacement: function(error, element) {
                $(element).addClass('is-invalid');
                $('.input-group-append').after(error);
            },
            errorClass: "invalid-feedback",
            errorElement: "div",
            highlight: false,
            success: function(element) {
                $(element).siblings('input').removeClass('is-invalid');
                $(element).remove();
            },
        };

        options.rules = {
            auth_mobile: {
                required: true,
                isMobile: true,
            },
        };
        $("#mobile-form").validate(options);
        // 获取验证码
        let isPosting = false;
        $("#get-code").click(function() {
            if (isPosting) {
                return false;
            }
            if(!$("#mobile-form").valid()) {
                return false;
            }

            const mobile = $("input[name='auth_mobile']").val();
            const btn = $(this);

            $.ajax({
                url: '/profile/code?_csrf=' + csrf,
                type: 'post',
                data: { mobile: mobile },
                dataTye: 'json',
                error: function() {
                    isPosting = false;
                },
                beforeSend: function() {
                    isPosting = true;
                },
                success: function(response) {
                    isPosting = false;
                    if (response.err === 0) {
                        codeSuccess(btn);
                        $("input[name='code']").removeAttr('readonly');
                        $("#bind-btn").removeClass('disabled').removeClass('btn-secondary').addClass('btn-primary');
                    } else {
                        toast(response.msg, 'error');
                    }
                }
            });
        });

        // 绑定按钮
        $("#bind-btn").click(function() {
            const code = $("input[name='code']").val();
            const mobile = $("input[name='auth_mobile']").val();
            if (!(/^1[3456789]\d{9}$/.test(mobile))) {
                toast('请填写正确的手机号码', 'error');
                return false;
            }
            if (code.length < 6) {
                // alert('请填写正确的验证码');
                toast('请填写正确的验证码', 'error');
                return false;
            }
        });

        $('#change-mobile').click(function () {
            $(this).parents('.form-group').hide();
            $('#mobile-form').show();
        });
    } catch (error) {
        console.log(error);
    }

});

/**
 * 获取成功后的操作
 *
 * @param {Object} btn - 点击的按钮
 * @return {void}
 */
function codeSuccess(btn) {
    let counter = 60;
    btn.addClass('disabled').text('重新获取 ' + counter + 'S');
    btn.parent().siblings('input').removeAttr('readonly').attr('placeholder', '输入短信中的5位验证码');
    const bindBtn = $("#bind-btn");
    bindBtn.removeClass('btn-secondary disabled').addClass('btn-primary');

    const countDown = setInterval(function() {
        const countString = counter - 1 <= 0 ? '' : ' ' + (counter - 1) + 'S';
        // 倒数结束后
        if (countString === '') {
            clearInterval(countDown);
            btn.removeClass('disabled');
        }
        const text = '重新获取' + countString;
        btn.text(text);
        counter -= 1;
    }, 1000);
}