06_유효성검사(실습예제(1))

 

유효성 검사 조건

1. 아이디 : 영어소문자로 시작하여 영문+숫자 4글자~12글자

2. 비밀번호 : 영어소문자,대문자,숫자를 사용하여 8~12 글자

3. 비밀번호 확인 : 비밀번호와 같은지 체크

4. 이름 : 한글(최소 1글자)

5. 주소 : 영어 및 공백사용불가

6. 전화번호:
 전화번호 1 : 010만가능
 전화번호 2 : 숫자 3~4 글자
 전화번호 3 : 숫자 4 글자

7. 이메일 : 영어+숫자 4~12글자뒤에 @ 뒤에@포함

 

→    유효성 모두 만족하면 join.html페이지로 post방식으로 전송

---

    <style>
        .wrapper {
            width: 800px;
            background-color: #f8f8f8;
            margin: 0 auto;
        }

        .wrapper>h1 {
            padding-top: 30px;
            text-align: center;
        }

        .wrapper table {
            margin: 0 auto;
        }

        #result {
            color: #faaca8;
            font-size: 1.3em;
            font-weight: 900;
            text-align: center;
        }

        .wrapper table tr>td {
            border-top: 2px solid #FFF;
        }

        .wrapper table tr:first-child>td {
            border-top: 2px solid #faaca8;
        }

        .wrapper table tr>td:first-child {
            width: 180px;
        }

        .wrapper table tr>td:last-child {
            width: 550px;
        }

        .wrapper table tr>td:first-child {
            padding: 15px;
            font-size: 17px;
            line-height: 20px;
            font-weight: 500;
            font-weight: 900;
        }

        .longInput {
            margin-top: 3px;
            width: 300px;
            height: 38px;
        }

        .shortInput {
            margin-top: 3px;
            width: 90px;
            height: 38px;
        }

        .wrapper form input,
        .wrapper form select {
            font-size: 20px;
        }

        .inputBox {
            width: 18px;
            height: 18px;
            display: inline-block;
        }

        .botton {
            width: 150px;
            height: 45px;
            border: none;
            display: inline-block;
            background-color: #2EC4B6;
            color: white;
            outline: none;
        }

        .btnBox {
            margin: 30px;
            padding-bottom: 30px;
            text-align: center;
        }

        input[type="radio"] {
            display: none;
        }

        input+label {
            margin-top: 3px;
            text-align: center;
            display: inline-block;
            background-color: #4b4b4b;
            width: 150px;
            color: white;
            line-height: 35px;
            height: 35px;
        }

        input:checked+label {
            background-color: #2EC4B6;
        }

        .comment {
            color: #faaca8;
            font-size: 0.8em;
            font-weight: 900;
        }

        .inputBorder {
            border: 3px solid #faaca8;
        }
    </style>

---

form태그 참고

<!--action생략 시 현재페이지에 제출 / method생략 시 get-->

<div class="wrapper">
        <h1>회원가입</h1>
        <p id="result"></p>
        <!--action생략 시 현재페이지에 제출 / method생략 시 get-->
        <form action="join.html" method="post">
            <table>
                <tr>
                    <td>아이디</td>
                    <td><input class="longInput" type="text" name="id">
                        <span class="comment"></span>
                    </td>
                </tr>
                <tr>
                    <td>비밀번호</td>
                    <td><input class="longInput" type="password" name="pw">
                        <span class="comment"></span>
                    </td>
                </tr>
                <tr>
                    <td>비밀번호 확인</td>
                    <td><input class="longInput" type="password" name="pw_re">
                        <span class="comment"></span>
                    </td>
                </tr>
                <tr>
                    <td>이름</td>
                    <td><input class="longInput" type="text" name="name">
                        <span class="comment"></span>
                    </td>
                </tr>
                <tr>
                    <td>주소</td>
                    <td>
                        <input class="longInput" type="text" name="addr">
                        <span class="comment"></span>
                    </td>
                </tr>
                <tr>
                    <td>전화번호</td>
                    <td>
                        <input class="shortInput" type="text" name="phone1">
                        -
                        <input class="shortInput" type="text" name="phone2">
                        -
                        <input class="shortInput" type="text" name="phone3">
                        <span class="comment"></span>
                    </td>
                </tr>
                <tr>
                    <td>이메일</td>
                    <td><input class="longInput" type="text" name="email">
                        <span class="comment"></span>
                    </td>
                </tr>

            </table>
            <div class="btnBox">
                <input class="botton" type="submit" value="회원가입">
                <input class="botton" type="reset" value="취소">
            </div>
        </form>
    </div>

---

 

 

내가 작성한 script는 조건마다 if와 else를 통해서

true이면 테두리와 글자를 없애고, false이면 테두리와 글자를 나타나도록 하고, 기본이벤트를 제거했다.

중복이 너무 많다.......

    <script>
        $(function() {

            var comment = $(".comment")

            /*submit 버튼을 눌렀을 때 동작*/
            $("input[type=submit]").click(function(event) {

                var id = $("[name=id]").val();
                var regExp_id = /^[a-z][a-z0-9]{3,11}$/;


                if (regExp_id.test(id)) {
                    comment.eq(0).text("");
                    comment.eq(0).siblings("input").removeClass("inputBorder");
                } else {
                    comment.eq(0).text("영문+숫자 4~12글자");
                    comment.eq(0).siblings("input").addClass("inputBorder");
                    event.preventDefault();
                }

                /////////////////////////////////////////////////////////////////

                var pw = $("[name=pw]").val();
                var regExp_pw = /^[a-zA-Z0-9]{8,12}$/;

                if (regExp_pw.test(pw)) {
                    comment.eq(1).text("");
                    comment.eq(1).siblings("input").removeClass("inputBorder");
                } else {
                    comment.eq(1).text("소문자,대문자,숫자 8~12글자");
                    comment.eq(1).siblings("input").addClass("inputBorder");
                    event.preventDefault();
                }

                /////////////////////////////////////////////////////////////////

                var pw = $("[name=pw]").val();
                var pw_re = $("[name=pw_re]").val();

                if (pw != pw_re) {
                    comment.eq(2).text("비밀번호가 일치하지않습니다.");
                    comment.eq(2).siblings("input").addClass("inputBorder");
                    event.preventDefault();

                }

                /////////////////////////////////////////////////////////////////

                var name = $("[name=name]").val();
                var regExp_name = /^[가-힣]{1,}$/;

                if (regExp_name.test(name)) {
                    comment.eq(3).text("");
                    comment.eq(3).siblings("input").removeClass("inputBorder");
                } else {
                    comment.eq(3).text("한글(최소1글자)만 가능합니다.");
                    comment.eq(3).siblings("input").addClass("inputBorder");
                    event.preventDefault();
                }

                /////////////////////////////////////////////////////////////////

                var addr = $("[name=addr]").val();
                var regExp_addr = /^[가-힣]+$/;

                if (regExp_addr.test(addr) && !addr == "") {
                    comment.eq(4).text("");
                    comment.eq(4).siblings("input").removeClass("inputBorder");
                } else {
                    comment.eq(4).text("영어사용 및 공백이 불가능합니다");
                    comment.eq(4).siblings("input").addClass("inputBorder");
                    event.preventDefault();
                }

                /////////////////////////////////////////////////////////////////

                var phone1 = $("[name=phone1]").val();
                var phone2 = $("[name=phone2]").val();
                var phone3 = $("[name=phone3]").val();
                var regExp_phone1 = /^010$/;
                var regExp_phone2 = /^[0-9]{3,4}$/;
                var regExp_phone3 = /^[0-9]{4}$/;

                if (regExp_phone1.test(phone1) 
                    && regExp_phone2.test(phone2) 
                    && regExp_phone3.test(phone3)) {
                    comment.eq(5).text("");
                    comment.eq(5).siblings("input").removeClass("inputBorder");
                } else {
                    comment.eq(5).text("전화번호를 확인하세요");
                    comment.eq(5).siblings("input").addClass("inputBorder");
                    event.preventDefault();
                }

                /////////////////////////////////////////////////////////////////

                var email = $("[name=email]").val();
                var regExp_email = /^[a-z0-9]{4,12}@[a-z]+\.+[a-z]+$/;

                if (regExp_email.test(email)) {
                    comment.eq(6).text("");
                    comment.eq(6).siblings("input").removeClass("inputBorder");
                } else {
                    comment.eq(6).text("이메일을 확인하세요");
                    comment.eq(6).siblings("input").addClass("inputBorder");
                    event.preventDefault();
                }

            });

        });
    </script>

 

 

 

 

강사님 review는 처음부터 테두리와 글자가 없도록 세팅하고

if조건을 통해 세팅변경 및 count를 증가시켜 count에 따라 기본이벤트를 제거하여 제출되지 않도록 했다.

    <script>
        $(function() {
            $("input[type=submit]").click(function(event) {

                //count : if문을 탔는지 알기위한 변수
                var count = 0;
                var inputs = $("input");
                var comments = $(".comment");


                //submit버튼을 누를 때마다 처음에는 테두리와 글자 없도록 세팅
                inputs.css("border", "");
                comments.html("");

                //1. 아이디검사
                var idReg = /^[a-z][a-z0-9]{3,11}$/;

                //! : 만족하지 못했을 때
                if (!idReg.test(inputs.eq(0).val())) {
                    count++;
                    comments.eq(0).html('소문자, 숫자로 4~12글자');
                    inputs.eq(0).css("border", "3px solid #faaca8")
                }

                //2. 비밀번호 검사
                var pwReg = /^[a-zA-Z0-9]{8,12}$/;

                if (!pwReg.test(inputs.eq(1).val())) {
                    count++;
                    comments.eq(1).html("영문, 숫자 조합 8~12글자");
                    inputs.eq(1).css("border", "3px solid #faaca8")
                }

                //3. 비밀번호 확인 검사
                if (inputs.eq(1).val() == inputs.eq(2).val()) {
                    count++;
                    comments.eq(2).html("비밀번호가 일치하지 않습니다.")
                    inputs.eq(2).css("border", "3px solid #faaca8")
                }

                //4. 이름 검사
                //var nameReg = /^[가-힣]{1,}$/;
                var nameReg = /^[가-힣]+$/;

                if (!nameReg.test(inputs.eq(3).val())) {
                    count++;
                    comments.eq(3).html("한글 최소 한글자 이상")
                    inputs.eq(3).css("border", "3px solid #faaca8")
                }

                //5. 주소 검사
                //영어 사용이 안된다는 것을 그대로 조건식에 활용하자.
                var addrReg = /^[a-zA-Z]+$/;

                //영어가 포함되어있거나 공백일 때
                if (addrReg.test(inputs.eq(4).val()) || inputs.eq(4).val() == '') {
                    count++;
                    comments.eq(4).html("영어 사용 및 공백 불가능")
                    inputs.eq(4).css("border", "3px solid #faaca8")
                }

                //6. 전화번호 검사
                var pReg1 = /^010$/;
                var pReg2 = /^\d{3,4}$/;
                var pReg3 = /^[0-9]{4}/;

                if (!(pReg1.test(inputs.eq(5).val()) &&
                        pReg2.test(inputs.eq(6).val()) &&
                        pReg3.test(inputs.eq(7).val()))) {
                    count++;
                    comments.eq(5).html("전화번호를 확인해주세요.")
                    inputs.eq(5).css("border", "3px solid #faaca8")
                    inputs.eq(6).css("border", "3px solid #faaca8")
                    inputs.eq(7).css("border", "3px solid #faaca8")
                }

                //7. 이메일 검사
                //(\.) : 문자.으로 사용할 때 (정규표현식에서 .은 모든 단일문자를 의미함)
                var emailReg = /^[a-z0-9]{4,12}@\./;

                if (!emailReg.test(inputs.eq(8).val())) {
                    count++;
                    comments.eq(6).html("이메일을 확인해주세요")
                    inputs.eq(8).css("border", "3px solid #faaca8")
                }

                if (count > 0) {
                    //기본이벤트 제거
                    event.preventDefault();
                }

            });
        });
    </script>