movie/public/js/auth/register.js

$("#fRegister").validate({
    onkeyup: false,
    onclick: false,
    onfocusout: false,
    showErrors: function (errorMap, errorList) {
        if (this.numberOfInvalids() && errorList.length > 0) {
            alert(errorList[0].message);
            $(errorList[0].element).focus();
        }
    },
    rules: {
        email: {required: true, email: true, is_email_able: true},
        password: {required: true, minlength: 8, is_password_able: true},
        password_confirmation: {required: true, equalTo: "#password"},
        nickname: {required: true, minlength: 2, maxlength: 20},
        agree_1: {required: true},
        agree_2: {required: true}
    },
    messages: {
        email: {
            required: "이메일 주소를 입력해주세요.",
            email: "이메일 주소가 유효하지 않습니다.",
            is_email_able: "이미 사용중인 이메일입니다."
        },
        password: {
            required: "비밀번호를 입력해주세요.",
            minlength: "비밀번호는 최소 8자 이상입니다.",
            is_password_able: "비밀번호가 유효하지 않습니다."
        },
        password_confirmation: {
            required: "비밀번호를 재입력해주세요.",
            equalTo: '비밀번호가 서로 일치하지 않습니다.'
        },
        nickname: {
            required: "닉네임을 입력해주세요.",
            minlength: "닉네임은 최소 2자 이상입니다.",
            maxlength: "닉네임은 최대 20자 이하 입니다."
        },
        agree_1: {
            required: "이용약관 동의가 필요합니다."
        },
        agree_2: {
            required: "개인정보처리방침 동의가 필요합니다."
        }
    },
    submitHandler: function() {
        if (!Register.emailAuthOk) {
            alert("이메일 인증이 필요합니다.");
            return false;
        }

        return true;
    }
});

const Register = {
    emailAuthOk: false,

    // 이메일 인증 요청
    requestSendVerifyLink: function (e) {
        let form = e.target.form;
        $.ajax({
            url: (BASE_URL + "/auth/register/sendVerifyLink"),
            type: "POST",
            async: true,
            cache: true,
            timeout: 3000,
            data: {email: form.elements["email"].value},
            processData: true,
            dataType: "json",
            success: function (response) {
                if (!response.success) {
                    alert(response.message);
                } else {
                    Register.switchVerifyEmailStep(e, 2);
                }
            },
            error: function (xhr, status, error) {
                procErrorEvent(xhr, status, error);
            }
        });
    },

    // 이메일 인증 확인
    requestCheckVerifiedEmail: function (e) {
        let form = e.target.form;
        $.ajax({
            url: (BASE_URL + "/auth/register/checkVerifiedEmail"),
            type: "POST",
            async: true,
            cache: true,
            timeout: 3000,
            processData: true,
            data: {email: form.elements["email"].value},
            dataType: "json",
            success: function (response) {
                if (!response.success) {
                    alert("인증이 진행 중입니다.");
                } else {
                    Register.switchVerifyEmailStep(e, 3);
                }
            },
            error: function (xhr, status, error) {
                procErrorEvent(xhr, status, error);
            }
        });
    },

    // 이메일 인증 결과
    switchVerifyEmailStep: function(e, step) {
        let btnVerifyEmail = document.getElementById("btnVerifyEmail");
        let txtVerifyEmail = document.getElementById("txtVerifyEmail");
        let timer;

        switch(step)
        {
            // 초기화
            case 1:
                btnVerifyEmail.innerHTML = '<button type="button" id="btnSendVerifyLinkRequest" class="btn btn-outline-secondary">인증하기</button>';
                txtVerifyEmail.innerHTML = "";
                break;

            // 진행중
            case 2:
                e.target.setAttribute("disabled", "disabled");
                txtVerifyEmail.innerHTML = '<small class="text-success">인증 메일을 발송했습니다. (유효시간 5분)<br/>메일 인증 후 인증완료를 해주세요.</small>';
                btnVerifyEmail.innerHTML = '<button type="button" id="btnVerifyEmailRequest" class="btn btn-outline-primary text-white">인증완료</button>';

                timer = setTimeout(function () { // 5분 후 만료
                    Register.switchVerifyEmailStep(e, 1);
                }, 300000);
                break;

            // 완료
            case 3:
                let form = e.target.form;
                form.elements["email"].readOnly = true;
                txtVerifyEmail.innerHTML = '<small class="text-success">인증이 완료되었습니다.</small>';
                btnVerifyEmail.innerHTML = '<button type="button" class="btn btn-primary" disabled>인증완료</button>';
                this.emailAuthOk = true;
                clearTimeout(timer);
                break;
        }
    }
}

// 회원가입 Tip
new bootstrap.Tooltip(document.getElementById("registerTip"), {
    placement: "auto"
});

// 비밀번호 Tip
let passwordGuideTip = document.getElementById("passwordGuideTip");
if (passwordGuideTip) {
    new bootstrap.Tooltip(passwordGuideTip, {placement: "auto"});
}

// 이메일 인증 요청
$(document).on("click", "#btnSendVerifyLinkRequest", Register.requestSendVerifyLink);

// 이메일 인증 확인
$(document).on("click", "#btnVerifyEmailRequest", Register.requestCheckVerifiedEmail);