[Script] 회원가입 페이지 기능 JavaScript/JQuery로 구현하기

요구사항

id : 문자(영어), 숫자만, 중복체크, "test"
pw : 비밀번호확인(가입신청버튼 클릭시)
이름 : 5글자(maxlength x)-script 문자(한글,영어) 5글자 넘어갈 시 바로 체크
이메일 : 유효성(가입신청버튼 클릭시)
휴대폰 : 숫자만 4자리 -> 3번째로 4개 입력하면 3번째 창으로 커서이동
주민번호 : 숫자만 주민번호 유효성 뒷자리 맨첫자리만 숫자 1****** (가입 신청클릭시)

 

예시 화면

 

• 같은 기능을 JavaScript와 JQuery 두가지로 구현해봄

 

JavaScript

(요구 사항을 잘못 해석한 코드가 있을 수 있음. 다음의 JQuery에서는 보완.)

/* =======================================================  */

/*
* 가입신청 버튼
* */
const regi_btn = document.getElementById('regi_btn'); //가입 신청 버튼

regi_btn.addEventListener('click', function () {
    if (!idUnqPass()) return;
    if (!passwordValid()) return;
    if (!emailValid()) return;
    if (!validJuminNumber(jumin1.value)) return;
    if (!validJuminNumber(originalJumin2)) return;
    alert('회원가입 조건 충족');
});


//id중복여부 확인 했는지
let idUnqChk = false;

function idUnqPass() {
    if (!idUnqChk) {
        alert('ID 중복체크를 해주세요');
        return false;
    } else {
        return true;
    }
}

/*
*id : 문자(영어), 숫자만, 중복체크, "test"
* */
const idChkBtn = document.getElementById('idChkBtn');
idChkBtn.addEventListener('click', function () {
        //ID 유효성 검사
        idUnqId();
    }
)

// input 요소 가져오기
const idInput = document.getElementById('id');

// 이벤트 리스너 추가(입력마다)
idInput.addEventListener('keyup', function () {
    const inputValue = idInput.value;
    // 유효성 검사 true면 안내글자 숨기기
    if (isValidId(inputValue)) {
        hideComment();
    }
});


/*
* 아이디 text 받기
* 유효한가 t/f
* f면 안내글자 전달
* */
function isValidId(text) {
    let idText = text;

    if (/^[0-9]+$/.test(idText)) {

        //영어를 포함해야 한다는 안내
        createComment('includeEN');
        return false;

    } else {
        if (/^[a-zA-Z0-9]+$/.test(idText)) {
            //영어+숫자인지 판별
            return true;
        } else {
            //영어+숫자 조합이어야 한다는 안내
            createComment('ENNUM');
            return false;
        }
    }
}


//안내 히든 텍스트 변경하는 함수
function createComment(commentType) {
    let commentElement = document.getElementById('idValidInfo');
    if (commentType === 'includeEN') {
        commentElement.innerHTML = 'ID에 영어가 포함되어야 합니다 ';
    } else if (commentType === 'ENNUM') {
        commentElement.innerHTML = 'ID를 영어,숫자 조합으로 작성해주세요';
    }
    commentElement.removeAttribute('hidden');
}

// ID 유효안내 숨기기
function hideComment() {
    let commentElement = document.getElementById('idValidInfo');
    commentElement.setAttribute('hidden', 'true');
}


/*일단 임시로 만든 배열에서 같은 아이디 있으면 중복이라고 alert*/
function idUnqId() {
    let idArr = ['aaa', 'bbb', 'ccc', 'apple123', 'test'];

    if (idArr.includes(idInput.value)) {
        alert("이미 존재하는 아이디 입니다.");
        //작성 아이디 삭제, 포커스 옮기기
        console.log('idInput.value: ' + idInput.value);
        idInput.value = "";
        idInput.focus();
    } else {
        if (isValidId(idInput.value)) {
            alert("사용 가능한 아이디 입니다");
            idUnqChk = true;
            idInput.disabled = true;
            document.getElementById('pass').focus();
        }
    }
}


/* =======================================================  */

/*
* pw : 비밀번호확인(가입신청버튼 클릭시)
* */


function passwordValid() {
    const pass = document.getElementById('pass').value;
    const pass2 = document.getElementById('pass2').value;
    //비밀번호 같은지 검사
    if (pass === null || pass2 === null) {
        return false;
    } else if (pass !== pass2) {
        alert("비밀번호가 일치하지 않습니다");
        return false;
    } else {
        return true;
    }
}


/* =======================================================  */

/*
* 이름 : 5글자(maxlength x)-script
* 문자(한글,영어)
* 5글자 넘어갈 시 바로 체크
 */

function fncNameKeyUp(element) {
    const nameValue = element.value;
    const regex = /^[A-Za-z가-힣]+$/;
    // 5글자? -> 문자?
    if (nameValue.length > 5) {
        element.value = nameValue.substring(0, 5);
        return false;
    } else {
        if (!regex.test(nameValue)) {
            // 입력필드에 오류 스타일 추가하기
            element.classList.add("input-error");
            return false;
        } else {
            // 괜찮으면 오류 스타일 제거
            element.classList.remove("input-error");
            return true;
        }
    }
}


/* =======================================================  */

/*
* 이메일 : 유효성(가입신청버튼 클릭시)
* 앞은 영어, 숫자만 가능함, @뒷쪽은 정해진 이메일 내에서만 가능함
* */

function emailValid() {
    const email1Element = document.getElementById('email1');
    const email1 = document.getElementById('email1').value;
    const email2 = document.getElementById('email2').value;

    const emailArr = ["gmail.com", "naver.com", "daum.net", "nate.com", "hanmail.net", "korea.com"];
    const emailRegex = /^[a-zA-Z0-9._-]+$/;
    if (email1 === null || email2 === null) {
        alert('email을 입력해주세요')
        email1Element.focus();
        return false;
    } else if (!emailRegex.test(email1) || !emailArr.includes(email2)) {
        alert('email 주소를 확인해주세요');
        email1Element.focus();
        return false;
    } else {
        return true;
    }
}


/* =======================================================  */
/*
* 휴대폰 :
* 숫자만 4자리 -> 3번째로
* 4개 입력하면 3번째 창으로 커서이동
* */
document.getElementById('ph2')
    .addEventListener('input', function () {
        focusMove(this, 4, 'ph3')
    });


/*주민번호도 커서이동*/
document.getElementById('jumin1')
    .addEventListener('input', function () {
        focusMove(this, 6, 'jumin2')
    });

/*주민번호도 커서이동*/
document.getElementById('jumin2')
    .addEventListener('input', function () {
        focusMove(this, 7, 'address')
    });


/*커서이동 공통기능 함수 추출*/
function focusMove(element, maxLength, nextInputId) {
    if (element.value.length === maxLength) {
        document.getElementById(nextInputId).focus();
    }
}


/* =======================================================  */
/*
* 주민번호 : 숫자만 주민번호 유효성
* 뒷자리 맨첫자리만 숫자 1******
* */
//원본값 저장
let originalJumin2 = '';
const numberRegex = /^[0-9]+$/;
const jumin1 = document.getElementById('jumin1');

//숫자만
function validJuminNumber(juminNum) {
    if (juminNum === "") {
        alert('주민번호를 입력하세요.');
        return false;
    } else if (!numberRegex.test(juminNum)) {
        console.log("!numberRegex.test(juminNum)"+!numberRegex.test(juminNum));
        console.log("jumin1Value+ "+jumin1Value);
        alert('주민번호를 정확히 입력해주세요');
        return false;
    } else {
        return true;
    }
}


document.getElementById('jumin2').addEventListener('input', function () {
    const inputValue = this.value;

    // 입력값이 더 긴 경우: 원본의 마지막 글자를 업데이트
    if (inputValue.length > originalJumin2.length) {
        originalJumin2 += inputValue[inputValue.length - 1];
    }


    // 입력값이 더 짧은 경우: 원본의 마지막 글자를 삭제
    if (inputValue.length < originalJumin2.length) {
        originalJumin2 = originalJumin2.substring(0, inputValue.length);
    }

    // 화면에는 마스킹된 값 표시
    this.value = maskingNumber(inputValue);


    console.log("마스킹 완료");
    console.log("originalJumin2: " + originalJumin2);
});

//jumin2 일부 *표시
function maskingNumber(number) {
    if (number.length > 1) {
        return number.substring(0, 1) + "*".repeat(number.length - 1);
    } else {
        return number;
    }
}

 

JQuery

 

$(function () {

    //아이디 중복체크
    $("#idChkBtn").click(function () {
        const idElement = $("#id");
        let idVal = idElement.val();
        if (idVal == '') {
            alert("id를 입력하세요");
            idElement.focus();
        } else if (idVal == 'test') {
            alert("이미 존재하는 id입니다");
            idElement.val("").focus();
        } else {
            alert("사용 가능한 id입니다");
            idElement.attr("disabled", "disabled");
            $("#idUptBtn").html("<input type=button value=수정하기>");
            $("#pass").focus();
        }
    });

    //아이디 수정
    $("#idUptBtn").click(function () {
        const idElement = $("#id");
        //비활성화 풀어주고
        idElement.removeAttr("disabled");
        //포커스 옮겨주고
        idElement.focus();
        //수정 버튼 다시 없애고
        $("#idUptBtn").empty();
    });


    //아이디 문자(영어), 숫자만 (정규표현식?)

    const textNumberRegex = /^[a-zA-Z0-9]+$/;
    const textRegex = /^[a-zA-Z가-힣]+$/;
    const numberRegex = /^[0-9]+$/;
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;


    $("#id").on("input", function () {
        const idVal = $(this).val();
        console.log("idVal " + idVal);
        if (!textNumberRegex.test(idVal)) {
            $("li#idValidInfo").text('id를 영어와 숫자로 입력해주세요').removeAttr("hidden");
        } else {
            $("li#idValidInfo").attr("hidden", "hidden");
        }
    });


    //비밀번호 일치 확인
    function passwordCheck() {
        const pw = $("#pass").val();
        const pw2 = $("#pass2").val();
        if ((pw != null) || (pw2 != null)) {
            alert('비밀번호를 입력해주세요');
            $("#pass").focus();
            return false;
        } else if (pw != pw2) {
            alert('비밀번호가 일치하지 않습니다.');
            $("#pass").focus();
            return false;
        } else {
            return true;
        }
    }


    //이름 글자수 체크 - 넘어가면 테두리 빨갛게(클래스 추가), 아래에 안내문구
    $("#name").on("keyup", function () {
        if ($(this).val().length > 5) {
            alert("5글자 이하만");
            $(this).val($(this).val().slice(0, 5));
        }

    });


    //포커스 자동으로 옮겨가는 함수
    function moveFocus(element, textSize, nextElement) {
        if ($(element).val().length >= textSize) {
            $(nextElement).focus();
        }
    }

    //이메일 유효성 검사
    function emailValid() {
        const emailValue = $("#email1").val() + '@' + $("#email2").val();
        if (!emailRegex.test(emailValue)) {
            alert("유효하지 않은 이메일입니다");
            $("#email1").focus();
            return false;
        } else {
            return true;
        }
    }


    //휴대폰 : 숫자만 4자리 -> 3번째로
    $("#ph2").on("input", function () {
        moveFocus(this, 4, "#ph3")
    });


    //주민번호 : 숫자만 주민번호 유효성
    // 	 뒷자리 맨첫자리만 숫자 1******
    // 	 (가입 신청클릭시)

    // 주민번호 앞자리 6글자
    $("#jumin1").keyup(function () {
        if ($("#jumin1").val().length > 7) {
            $("#jumin1").val($("#jumin1").val().slice(0, 5));
        }
        ;

    });



    //주민번호 뒷자리 받아오기
    $("#jumin2").keyup(function () {

        if ($("#jumin2").val().length > 8) {
            $("#jumin2").val($("#jumin2").val().slice(0, 6));
        }
        ;

        //새롭게 입력
        let jumin2 = $("#jumin2").val().charAt($("#jumin2").val().length - 1);

        //jumin3 에 추가
        if ($("#jumin2").val().length > $("#jumin3").val().length) {
            $("#jumin3").val($("#jumin3").val() + jumin2);
        } else if ($("#jumin2").val().length < $("#jumin3").val().length) {
            $("#jumin3").val($("#jumin3").val().slice(0, $("#jumin2").val().length - 1));
        }

        if ($("#jumin2").val().length > 1) {
            $("#jumin2").val($("#jumin2").val().slice(0, -1) + '*');
        }

    });


    //뒷자리 *로 변경하기


    //주민번호 유효성 검사


    $("#testBtn").click(function () {
        console.log("jumin2: " + $("#jumin2").val());
        console.log("jumin3: " + $("#jumin3").val());
    });


});