회원가입 공백 유효성

GOAL : 회원가입을 할때 image를 제외한 나머지 input칸이 비어있는 상태에서 join버튼을 누를때 알림창을 띄워준다.

 

* 이미 PASSWORD칸에서 확인되는 PASSWORD CHECK나 checked가 되어있는 GENDER도 조건에 포함하지 않아도 됨

 

HTML

<h2>JOIN PAGE</h2>
    <form action="/user/join_success" id="login_form" method="post" enctype="multipart/form-data">
        <table>
            <tr>
                <td>ID</td> <!-- 중복체크 AJAX로 알림주기 / 특수문자 -->
                <td><input type="text" id="userid" class="must_fill" name="userid">
                    <p style="display: none;" id="userid_msg"></p>
                </td>
            </tr>
            <tr>
                <td>PASSWORD</td> <!-- password double check -->
                <td><input type="password" id="userpw" class="must_fill" name="userpw">
                    <p>8~20자 이내의 특수기호,숫자를 포함한 비밀번호를 입력하세요</p>
                </td>

            </tr>
            <tr>
                <td>PASSWORD CHECK</td>
                <td><input type="password" id="userpw_check" name="userpw_check"></td>
            </tr>
            <tr>
                <td>NAME</td> <!-- 글자길이 / 특수문자 -->
                <td><input type="text" id="username" class="must_fill" name="username">
                    <p style="display: none;" id="username_msg"></p>
                </td>

            </tr>
            <tr>
                <td>GENDER</td>
                <td>
                    <input type="radio" class="gender" name="gender" value="0">MALE
                    <input type="radio" class="gender" name="gender" value="1" checked>FEMALE
                </td>
            </tr>
            <tr>
                <td>IMAGE</td>
                <td><input type="file" name="img"></td>
            </tr>
        </table>
        <input type="button" id="login_submit" value="JOIN">
    </form>

 

1.  조건에 걸려야할 칸들을 모두 불러와서 변수에 담아준다.

 

const mustFill = document.querySelectorAll('.must_fill');

 

2. 각각의 개체들과 그 value값을 가지고 오기위해 for문을 작성한다. 

 

for(i=0;i<mustFill.length;i++){}

 

3. 2번을 돌릴 함수를 만들어준다.

 

        function null_check() {
            for(i=0;i<mustFill.length;i++){}
        }

 

3-1. 2번안에서 조건문을 돌려서 mustFill의 value가 비어있을때는 false를, 아닐때는 true를 내보내준다.

 

        function null_check() {

            for(i=0;i<mustFill.length;i++){
                if(mustFill[i].value==''){
                    return false
                }
            }
            return true
        }

 

4. 결과값을 출력해준다

나는 2021.05.12 - [Lecture] - 회원가입 NAME/PW 조건걸기 여기서 password 유효성 4번을 실행할때 만들었던 함수를 이용했다.

 

        btn.addEventListener('click', () => {
        
            let pwd_check = password_check();
            let blank_check = null_check();
            
            if (pwd_check == false) {
                alert('CHECK YOUR PASSWORD')
                return
            }
            if (blank_check == false) {
                alert('FILL YOUR BLANK')
                return
            }
            
            login_form.submit();
            
        })

=> 버튼을 클릭했을때 pwd_check에서 걸리면 코드를 종료하고 걸리지 않는다면 그 다음 조건인 blank_check에서 걸리면 코드를 종료한다. 두개다 걸리지 않았을때 login_form을 submit한다.

 

* 처음만들었던 코드보다 이렇게 하는게 가독성이 더 좋았다.

처음 코드

        btn.addEventListener('click', () => {

            if(pwd_check && blank_check){
                login_form.submit();
                
            } else if(!pwd_check) {
                alert('CHECK YOUR PASSWORD');
                
            } else if(!blank_check){
                alert('FILL YOUR BLANK');

            }
        })

 

 

결과

 

mustFill 공간중에 값을 넣지 않았을때

 

 

 

TRIES AND TRIALS

1. forEach

작동안됨

처음에는 mustFill의 value값을 forEach문을 통해서 찾아보려고 했다.

        function null_check() {
            
            mustFill.foreach(v,()=>{
                if(v.value == ''){
                    return false
                }
            })
            return true
        }

=> 그런데 이렇게 했을때 if문 자체는 작동을 하지만 return이 작동이 안되서 return값이 계속 true로만 나왔다.

 

2. forEach + break + result변수

작동안됨

        function null_check() {
            
            let result = true
            
            mustFill.foreach(v,()=>{
                if(v.value == ''){
                    result = false;
                    break  //illegal break
                }
            })
            return result
        }

=> 그래서 result라는 변수를 만들고 거기에 값을 조정해주는 방식으로 코드를 만들었는데 forEach문에서는 break를 사용할 수 없다고 나왔다.

 

3. for문 +result 변수

작동됨

        function null_check() {
            let result = true
            for (i = 0; i < mustFill.length; i++) {
                if (mustFill[i].value == '') {
                    result = false;
                    break
                }
            }
            return result
        }

=> break를 사용하기 위해서 for문을 사용하고 변수를 선언한뒤 값을 줬더니 이 코드는 작동을 했다.

 

4. 3번 upgrade

작동됨

        function null_check() {
            for (i = 0; i < mustFill.length; i++) {
                if (mustFill[i].value == '') {
                    return false
                }
            }
            return true
        }

=> 3번 코드가 작동은 하지만 더 간단하게 코드를 짤 수 있을것 같아서 1번과 3번을 약간 조함(?) 해서 조금 더 이쁜 코드를 만들었다.