[Spring Project] 도서관만들기 #2-1 회원가입(Front)

※ 실제작업순서와 포스팅순서가 다를 수 있습니다

1. 회원가입 3단계 Front 작업

 

2. 각 단계별 스크립트 작동영상

주소입력은 Daum주소API를 적용시켜두었다(호스팅시 동작 확인)

 

 2-1 약관동의 스크립트

function agree(){

    $("#all_agree").change(function(){

        if($(this).is(':checked')){

            $('.agree').prop('checked',true);

        } else{

            $('.agree').prop('checked',false);

        }

    })

   

    $(".agree").change(function(){

        if($('#agree1').is(':checked') && $('#agree2').is(':checked') && $('#agree3').is(':checked')) {

            $("#all_agree").prop('checked',true);

        } else{

            $("#all_agree").prop('checked',false);

        }

    })

   

    $("#next_level").click(function(e){

       

        if($('#all_agree').is(':checked')){

            console.log("약관동의 완료")

        } else {

            e.preventDefault();

            alert("약관을 모두 동의해 주십시오.")

        }

    })

}

     

   2-2 정보입력

function isValid(){                                                           // 필수항목들을 확인하는 함수(미입력시 입력메시지 표시)

        const username = $("#username").val();

        const password1 = $("#userpw1").val();

        const password2 = $("#userpw2").val();

        const birthday = $("#birthday").val();

        const address = $("#address_detail").val();

        const address2 = $("#addresscode").val();

        const address3 = $("#address").val();

        const genderWoman = $("#gender__woman").is(":checked");

        const genderMan = $("#gender__man").is(":checked");

        const email1 = $("#email1").val();

        const email2 = $("#email2").val();

       

        console.log(phone_check);

        $("#error__email").text("");

        $("#error__name").text("");

        $("#error__password1").text("");

        $("#error__password2").text("");

        $("#error__gender").text("");

        if(password1==="") {

            $("#error__password1").text("필수항목입니다.");

            $("#userpw1").focus();

            return false;

        }

        if(password2==="") {

            $("#error__password2").css('color','red');

            $("#error__password2").text("필수항목입니다.");

            $("#userpw2").focus();

            return false;

        }

        var regExp2 = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{9,20}$/;

        if(regExp2.test(password1)===false) {

            $("#error__password1").text("비밀번호가 올바르지 않습니다.");

            $("#userpw1").focus();

            return false;

        }

        if(username === "") {

            $("#error__name").text("필수항목입니다.");

            $("#username").focus();

            return false;

        }

        if(genderWoman === false && genderMan == false) {

            $("#error__gender").css('color','red');

            $("#error__gender").text("필수항목입니다.");

            $("#gender__woman").focus();

            return false;

        }

        if(birthday === "") {

            $("#error__birthday").css('color','red');

            $("#error__birthday").text("필수항목입니다.");

            $("#birthday").focus();

            return false;

        } else{

            $("#error__birthday").text("");

        }

        if(address === "") {                                                       //주소창이 비어있다면 에러표시하는 addressCheck()함

            addressCheck();

        } else if(address2 === ""){

            addressCheck();

        } else if(address3 === ""){

            addressCheck();

        } else {

            $("#error__address").text("");

        }

        if(phone_check === false){

            alert("휴대전화 인증을 완료해주세요");

            return false;

        }

        if(email1 === "") {

            $("#error__email").css('color','red');

            $("#error__email").text("필수항목입니다.");

            $("#email1").focus();

            return false;

        }

        if(email2 === "") {

            $("#error__email").css('color','red');

            $("#error__email").text("필수항목입니다.");

            $("#email2").focus();

            return false;

        }

        if(id_duplicate_check == false){

            alert("아이디 중복검사를 완료해 주십시오.");

            return false;

        }

       

        alert("회원가입을 축하드립니다!");

        return true;

    }

     

     휴대전화인증관련

const timer = new Timer()

    $("#send").on("click",function(e){

        timer.getToken($("#token") , $("#send"), $("#finished"),$("#timer"));

    });

    $("#finished").on("click",function(e){

        timer.getTimerIntervalConfirm($("#finished"),$("signup__button"));

    });

   

}) // ready end

class Timer {

    interval;  

   

    getToken(token , send , finished , timer) {

        const tk = String(Math.floor(Math.random()*100000)).padStart(6,"0")

        token.text(tk);

        send.attr("style","background-color : #FFFFFF; cursor:default;");

        send.attr("disabled",true);

        finished.attr("style","background-color: #0068FF; color:#FFFFFF; cursor:pointer;");

        finished.attr("disabled",false);

        this.getTimerInterval(token , send , finished , timer);

    }

   

    getTimerIntervalConfirm(finished , signup){

        clearInterval(this.interval)

        finished.attr("style","background-color:#FFFFFF; cursor:default;");

        finished.attr("disabled",true);

        finished.text("인증완료");

        alert("인증이 완료되었습니다.");

        phone_check = true; /* 가입시 휴대전화 인증 확인 */

        console.log(phone_check);

        signup.attr("style","background-color : #FFFFFF; color:#2c3639; border:1px solid #2c3639; cursor:pointer;");

        signup.attr("disabled",false);

    }

   

    getTimerInterval(token,send,finished,timer){

        let time=179;

        this.interval = setInterval(() =>{

            if(time >=0) {

                const minutes = Math.floor(time / 60);

                const seconds = time % 60;

                $("#timer").text(minutes + ":" + String(seconds).padStart(2,"0"));

                time-=1;

            } else{

                $("#token").text("000000");

                $("#send").attr("style","");

                $("#send").attr("disabled",true);

                $("#timer").text("3:00");

                $("#finished").attr("style","");

                $("#finished").attr("disabled",true);

                clearInterval(interval);

            }

        },1000);

    }

}