Javascript | 회원가입 유효성 검사

유효성 검사는 보통 JS로 쓴다.

 

[ html ] 

<form action="#">
        <!-- table>(tr>th+td>input:text)*4 -->
        <table width="500" height="400" border="1">
            <tr>
                <th>아이디</th>
                <td><input type="text" name="userid" id="id" size="30"></td>
            </tr>
            <tr>
                <th>패스워드</th>
                <td><input type="text" name="userpwd" id="pw" size="30"></td>
            </tr>
            <tr>
                <th>패스워드 확인</th>
                <td><input type="text" name="userpwdck" id="repw" size="30"></td>
            </tr>
            <tr>
                <th>email</th>
                <td><input type="text" name="useremail" id="email" size="30"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="가입" onclick="checkForm(this)">
                    <input type="reset" value="취소">
                </td>
            </tr>
        </table>

        <!-- this : 자신을 가리키는 키워드 -->
    </form>

[ javascript ]

<script type="text/javascript">
        function checkForm(x){
            console.log(x);
            console.dir(x);

            let id = x.form[0].value;
            let passwd = x.form[1].value;
            let passwdck = x.form[2].value;
            let email = x.form[3].value;

            console.log(id + " - " + passwd + " - " + passwdck + "-" + email);

            if(id==""){
                alert("아이디가 필요합니다.");
                // 경고창 확인 후 아이디를 작성할 텍스트 필드로 포커스 주기
                x.form[0].focus();
                return;
            }else if(passwd==""){
                alert("이 사이트는 자동문이 아닙니다.");
                x.form[1].focus();
                return;
            }else if(passwdck==""){
                alert("성격이 급하시군요");
                x.form[2].focus();
                return;
            }else if(email==""){
                alert("이메일 입력하세요");
                x.form[3].focus();
                return;
            }else if(passwd != passwdck){
                alert("같은 패스워드가 아닙니다.");
                x.form[2].value = "";
                x.form[2].focus();
                return;
            }
            
            // 데이터를 다른 페이지로 이동
            x.form.action = "welcome.html";

            // 전달방식 선택 가능
            x.form.method = "post";

            // 전송하기
            x.form.submit();
        }
    </script>

<input type="submit" value="가입" onclick="checkForm(this)">

(form 에서 묶여있는 name이 지니고 있는 속성들을 가쟈온다..)

 

여기서 this는 내가 입력받은 값을 지칭하는 것. (Form 에서,,,)

this 키워드

객체 자신을 가리키는 자바스크립트 키워드이다.

DOM 객체에서 객체 자신을 가리키는 용도로 사용

 

DOM 객체 배열들을 변수로 선언해서 검사했다.