[JavaScript] 정규표현식을 사용해 회원 가입 페이지 유효성 검사하기

JavaScript/Coding

[JavaScript] 정규표현식을 사용해 회원 가입 페이지 유효성 검사하기

Huiyeon 2023. 9. 19. 10:20

https://huiyeon.tistory.com/61

[JavaScript] 정규표현식이란? 개념 정리 및 메타문자와 차이점 + 정규식 플래그

[JavaScript] 정규표현식이란? 개념 정리 및 메타문자와 차이점 🍓목차 더보기 - 정규표현식이란? 장점 단점 - 패턴 종류 - ‼️ 정규표현식 예시 - 메타문자와 차이점? 정규표현식 사용 시 유용한

huiyeon.tistory.com

https://huiyeon.tistory.com/60

[HTML/CSS] HTML 기본 구조 및 다양한 태그 익히기! + 회원가입 페이지 만들기

[HTML/CSS] HTML 기본 구조 및 다양한 태그 익히기! 기본구조와 태그를 익혀 마지막엔 이 회원가입 페이지를 만들어 볼게요!🐼 기본 구조 내용 : 이 줄은 문서의 형식을 정의하는 것으로, 이 경우에

huiyeon.tistory.com

전 게시물에 정규표현식 개념에 대해 다뤄보았는데요!

이제 실습에 적용해 봐야겠죠?

개념이 확실하지 않으신 분들은 위에 정리해 두었으니 한번 읽어보고 오시는 것을 추천합니다❤️

이제 이 회원가입 폼을 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #info {
            background-color: pink;
        }

        #menu {
            background-color: rgb(198, 198, 198);
        }

        table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            border-color: black;
        }
    </style>
</head>
<body>
    <script src="script.js"></script>
    <form onsubmit="return isThatRight()">
        <table width="800" height="450" border="1" align="center" name="table">
            <tr id="info">
                <td colspan="2" align="center">
                    <b>회원 정보</b>
                </td>
            </tr>
            <tr>
                <td align="center" id="menu">
                    <b>아이디:</b>
                </td>
                <td>
                    <input size="35" minlength="4" maxlength="12" id="id"> 4~12자의 영문 대소문자와 숫자로만 입력
                </td>
            </tr>
            <tr>
                <td align="center" id="menu">
                    <b>비밀번호:</b>
                </td>
                <td>
                    <input size="35" minlength="8" maxlength="25" id="pw"> 8~25자의 영문 대소문자와 숫자 특수문자로만 입력
                </td>
            </tr>
            <tr>
                <td align="center" id="menu">
                    <b>이름:</b>
                </td>
                <td>
                    <input id="name">
                </td>
            </tr>
            <tr>
                <td align="center" id="menu">
                    <b>주민등록번호:</b>
                </td>
                <td>
                    <input id="user"> 예 ) 123456-1234567
                </td>
            </tr>
            <tr>
                <td align="center" id="menu">
                    <b>메일주소:</b>
                </td>
                <td>
                    <input id="email"> 예 ) id@domain.com
                </td>
            </tr>
            <tr>
                <td align="c enter" id="menu">
                    <b>전화번호:</b>
                </td>
                <td>
                    <input id="call"> 예 ) 01012341234
                </td>
            </tr>
        </table>
        <br>
        <div align="center">
            <input type="submit" value="가입하기" action="mailto:gmldus0814@naver.com?subject=안녕하세요">
            <input type="reset" value="다시 입력" align="center">
        </div>
    </form>
</body>

</html>

html을 준비했어요!

보고 천천히 따라 해보시면 됩니다.

Id 유효성 검사

    //id 유효성 검사
    const inputId = document.getElementById("id");
    const idCheck = /^[a-zA-Z0-9]{4,12}$/; //id 정규식표현

    if (inputId.value == "") {
        alert("아이디를 입력하세요.");
        inputId.focus();
        return false;
    }
    if (!idCheck.test(inputId.value)) {
        alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!")
        inputId.value = "";
        inputId.focus();
        return false;
    };

^ : 문자열의 시작을 의미합니다.
[a-zA-Z0-9] : 소문자 a-z, 대문자 A-Z, 그리고 숫자 0-9 중 어떤 문자라도 가능함을 나타냅니다.
{4,12} : 앞의 패턴(여기서는 [a-zA-Z0-9])이 최소 4번, 최대 12번 반복되어야 함을 나타냅니다.
$ : 문자열의 끝을 의미합니다.

Pw 유효성 검사

    //pw 유효성 검사
    const inputPw = document.getElementById("pw");
    const pwdCheck = /^(?=.*[a-zA-Z])(?=.*[!@#$%&^*+=-])(?=.*[0-9]).{8,25}$/;

    if (inputPw.value == "") {
        alert("비밀번호를 입력하세요.");
        inputPw.focus();
        return false;
    }
    if (!pwdCheck.test(inputPw.value)) {
        alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리를 사용해야 합니다.")
        inputPw.value = "";
        inputPw.focus();
        return false;
    };

^ : 문자열의 시작을 의미합니다.
(?=.*[a-zA-Z]) : 앞으로 나올 문자열에 적어도 하나 이상의 알파벳(대소문자 구분 없음)이 포함되어야 함을 나타냅니다.
(?=.*[!@#$%&^*+=-]) : 앞으로 나올 문자열에 적어도 하나 이상의 특수문자(!@#$%&^*+=-)가 포함되어야 함을 나타냅니다.
(?=.*[0-9]) : 앞으로 나올 문자열에 적어도 하나 이상의 숫자가 포함되어야 함을 나타냅니다.
. {8,25}: "모든 종류의 문자로 구성된 길이 8~25 사이의 문자열"을 의미합니다.

이름 유효성 검사

    const inputName = document.getElementById("name");
    const nameCheck = /^[가-힣]{2,4}$/;

    if (inputName.value == "") {
        alert("이름을 입력하세요.");
        inputName.value = "";
        inputName.focus();
        return false;
    }
    if(!nameCheck.test(inputName.value)) {
        alert("이름이 올바르지 않습니다.");
        return false;
    }

^ : 문자열의 시작을 의미합니다.
[가-힣] : 한글 문자 '가'부터 '힣'까지 중 어떤 글자라도 가능함을 나타냅니다. 이는 모든 한글 음절을 포함합니다.
{2,4} : 앞의 패턴(여기서는 [가-힣])이 최소 2번, 최대 4번 반복되어야 함을 나타냅니다.
$ : 문자열의 끝을 의미합니다.

주민등록 유효성 검사

    //주민등록 유효성 검사
    const inputUser = document.getElementById("user");
    const userCheck = /^[0-9]{6,6}[-]{1,1}[0-9]{7,7}$/;

    if (inputUser.value == "") {
        alert("주민등록번호를 입력하세요.");
        inputUser.focus();
        return false;
    }
    if(!userCheck.test(inputUser.value)) {
        alert("주민번호가 올바르지 않습니다.")
        inputUser.value = "";
        inputUser.focus();
        return false;
    }

^ : 문자열의 시작을 의미합니다.
[0-9]{6,6} : 숫자 0-9 중 어떤 숫자라도 가능하며, 이 패턴이 정확히 6번 반복되어야 함을 나타냅니다.
[-]{1,1} : 하이픈('-') 문자가 정확히 한 번 나와야 함을 나타냅니다.
[0-9]{7,7} : 마찬가지로 숫자 0-9 중 어떤 숫자라도 가능하며, 이 패턴이 정확히 7번 반복되어야 함을 나타냅니다.
$ : 문자열의 끝을 의미합니다.

주민등록번호 앞 2자리를 가지고 와서
1900년대 출생자와 2000년대 출생자 구분도 해줘야 하고
3번째부터 4번째 자리, 5번째부터 6번째 자리를 따져 주민등록번호 마지막자리도
유효성 검사해 주면 더 정확하겠죠?

이메일 유효성 검사

    //이메일 유효성 검사
    const inputEmail = document.getElementById("email");
    const emailCheck = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[.]{1}[A-Za-z]{1,3}$/;

    if (inputEmail.value == "") {
        alert("이메일을 입력하세요.");
        inputEmail.focus();
        return false;
    }
    if(!emailCheck.test(inputEmail.value)) {
        alert("이메일이 올바르지 않습니다.")
        inputEmail.value = "";
        inputEmail.focus();
        return false;
    }

^ : 문자열의 시작을 의미합니다.
[A-Za-z0-9_]+ : 대소문자 알파벳, 숫자 0-9 또는 언더스코어(_) 중 하나 이상이 나와야 합니다.
[A-Za-z0-9]* : 대소문자 알파벳 또는 숫자 0~9가 0번 이상 반복될 수 있습니다.
이 부분은 옵션이므로 없어도 되며, 있다면 여러 번 반복될 수 있습니다.
따라서 사실상 첫 번째 패턴과 합쳐져서 [A-Za-z0-9_]*처럼 사용되는 것과 같은 효과입니다.
이렇게 분리해서 쓴 특별한 이유가 없다면, 두 패턴을 합친 형태로 사용하는 것이 일반적입니다.
[@]{1} : '@' 문자가 정확히 한 번 나와야 함을 나타냅니다.
[A-Za-z0-9]+ : 대소문자 알파벳 또는 숫자 0~9 중 하나 이상이 나와야 합니다.
'@' 문자 다음에 오므로 도메인의 첫 부분을 의미합니다.
일반적으로 도메인 이름에 언더스코어(_)가 포함되지 않으므로 여기에서는 언더스코어를 제외했습니다.
그러나 실제 도메인 이름 규칙은 좀 더 복잡하므로, 완전한 검증을 위해서는 별도의 규칙을 적용해야 할 수도 있습니다.
[.]{1}: '.' 문자(점)이 정확히 한 번 나와야 함을 나타냅니다.
[A-Za-z]{1,3}: 대소문자 알파벳 중 최소 1개에서 최대 3개까지 등장해야 합니다.
$: 문자열의 끝을 의미합니다.

전화번호 유효성 검사

    //전화번호 유효성 검사
    const inputCall = document.getElementById("call");
    const callCheck = /^[0-9]{11,11}$/;

    if (inputCall.value == "") {
        alert("전화번호를 입력하세요.");
        inputCall.focus();
        return false;
    }
    if(!callCheck.test(inputCall.value)) {
        alert("전화번호가 올바르지 않습니다. \nex)01012345678")
        inputCall.value = "";
        inputCall.focus();
        return false;
    }

^ : 문자열의 시작을 의미합니다.
[0-9]{11,11} : 숫자 0-9 중 어떤 숫자라도 가능하며, 이 패턴이 정확히 11번 반복되어야 함을 나타냅니다.
$ : 문자열의 끝을 의미합니다.

전체 코드

function isThatRight(){
    //id 유효성 검사
    const inputId = document.getElementById("id");
    const idCheck = /^[a-zA-Z0-9]{4,12}$/; //id 정규식표현

    if (inputId.value == "") {
        alert("아이디를 입력하세요.");
        inputId.focus();
        return false;
    }
    if (!idCheck.test(inputId.value)) {
        alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!")
        inputId.value = "";
        inputId.focus();
        return false;
    };

    //pw 유효성 검사
    const inputPw = document.getElementById("pw");
    const pwdCheck = /^(?=.*[a-zA-Z])(?=.*[!@#$%&^*+=-])(?=.*[0-9]).{8,25}$/;

    if (inputPw.value == "") {
        alert("비밀번호를 입력하세요.");
        inputPw.focus();
        return false;
    }
    if (!pwdCheck.test(inputPw.value)) {
        alert("비밀번호는 영문자+숫자+특수문자 조합으로 8~25자리를 사용해야 합니다.")
        inputPw.value = "";
        inputPw.focus();
        return false;
    };

    //이름 유효성 검사
    const inputName = document.getElementById("name");
    const nameCheck = /^[가-힣]{2,4}$/;

    if (inputName.value == "") {
        alert("이름을 입력하세요.");
        inputName.value = "";
        inputName.focus();
        return false;
    }
    if(!nameCheck.test(inputName.value)) {
        alert("이름이 올바르지 않습니다.");
        return false;
    }

    //주민등록 유효성 검사
    const inputUser = document.getElementById("user");
    const userCheck = /^[0-9]{6,6}[-]{1,1}[0-9]{7,7}$/;

    if (inputUser.value == "") {
        alert("주민등록번호를 입력하세요.");
        inputUser.focus();
        return false;
    }
    if(!userCheck.test(inputUser.value)) {
        alert("주민번호가 올바르지 않습니다.")
        inputUser.value = "";
        inputUser.focus();
        return false;
    }

    //이메일 유효성 검사
    const inputEmail = document.getElementById("email");
    const emailCheck = /^[A-Za-z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[.]{1}[A-Za-z]{1,3}$/;

    if (inputEmail.value == "") {
        alert("이메일을 입력하세요.");
        inputEmail.focus();
        return false;
    }
    if(!emailCheck.test(inputEmail.value)) {
        alert("이메일이 올바르지 않습니다.")
        inputEmail.value = "";
        inputEmail.focus();
        return false;
    }

    //전화번호 유효성 검사
    const inputCall = document.getElementById("call");
    const callCheck = /^[0-9]{11,11}$/;

    if (inputCall.value == "") {
        alert("전화번호를 입력하세요.");
        inputCall.focus();
        return false;
    }
    if(!callCheck.test(inputCall.value)) {
        alert("전화번호가 올바르지 않습니다. \nex)01012345678")
        inputCall.value = "";
        inputCall.focus();
        return false;
    }

}

궁금하신 점은 댓글 달아주시면 빠르게 알려드리겠습니다!

감사합니다(●'◡'●)