[자바스크립트] 회원가입 검증 예제

회원가입 검증

- 아이디 길이는 3~5 글자 사이로 입력받는다.
- 비밀번호의 길이는 3~5글자 사이로 입력받고, 비밀번호 확인과 값이 같아야 한다.
- 이름은 입력받기만 하면 된다.
- 성별과 취미는 읽어오기만 할것
- 전화번호 : 국번은 select상자이므로 읽어오기만 하고, 나머지 번호는 반드시 숫자 8자리(입력상자 하나로)
- 정확히 모든 데이터를 입력하면 경고창에 결과를 출력하시오 ( 모든 정보와 결과는 경고창으로 )

 

html 본문

회원 가입

아이디
비밀번호
비밀번호확인
이름
성별	남자   여자
취미	넷플릭스시청   자전거타기   책읽기   여행   맛집투어
전화번호	010 070 032

 

회원가입 버튼을 누르면서 이벤트가 발생한다.

document.getElementById('registor').addEventListener('click', function(){

 

1) 아이디 , 비밀번호, 이름 검증하기

- 아이디

    let userid = document.getElementById('userid');
        if( userid.value.length == 0 || userid.value.length < 3 || userid.value.length > 5){
            alert('아이디를 정확히 입력해주세요')
            userid.select();
            return;
        }

 

- 비밀번호 & 같은지 체크

        let pwd = document.getElementById('pwd');
        if( pwd.value.length < 3 || pwd.value.length > 5){
            alert('비밀번호를 정확히 입력해주세요')
            pwd.select();
            return;
        }

        let pwdcheck = document.getElementById('pwdcheck');
        if( pwd.value.length != pwdcheck.value.length || pwd.value != pwdcheck.value){
            alert('비밀번호 다시 체크해주세요')
            pwdcheck.select();
            return;
        }

 

- 이름

        let name = document.getElementById('name');
        if(name.value.length == 0) {
            alert('이름을 입력하세요');
            name.select();
            return;
        }

 

2 -1 ) 성별

let gender = document.querySelector('.gender:checked');

 

2 - 2 ) 취미

querySeletorAll은 배열로 값을 읽어온다.
여러 값을 선택했다면 그 값을 전부 가져와야 하므로 for문을 돌린다.

    let hobby = document.querySelectorAll('.hobby:checked');
    let hobbyTemp = '';

    for(let i = 0; i < hobby.length; i++){
        hobbyTemp += hobby[i].value + ' ';
    }
    /*
    if(hobbyTemp.length == 0){
        hobbyTemp = '해당되지 않습니다.';
    }
    */

 

3) 전화번호

local 은 010, 032 와 같은 앞 번호를 따로 받은 것이다.

    let local = document.getElementById('local');
    let number = document.getElementById('phoneNumber');
    if (number.value.length != 8) {
        alert('전화번호를 정확히 입력해주세요');
        return;
    }
    local = local.value;
    number = phoneNumber.value;

    let phone = `${local + number}`;

 

4) 결과 : 경고창으로 가입정보 반환

document.getElementById('joinForm').reset(); 을 사용하여 정상적으로 반환하면 적힌 정보들을 지운다.

    let result = `가입정보는 아래와 같습니다.
                  아이디 : ${userid.value} 
                  비밀번호 : ${pwd.value} 
                  이름 : ${name.value}
                  성별 : ${gender.value}
                  취미 : ${hobbyTemp}
                  전화번호 : ${phone}`
        alert(result);
        document.getElementById('joinForm').reset();
});

 

** 사용하기 위해서는 적힌 정보들이 form 태그 안에 있어야 한다. 

    <form  id="joinForm" action="" method="post">
        <table border="1" >
            <h2>회원 가입</h2>
            <tbody style="text-align: left;">
            
            ....
            
            </tbody>
        </table>
    </form>

 

확인을 위해 정보를 따로 감춰놓지는 않았다.

경고창 반환 결과

 

취소 버튼을 눌렀다면?

document.getElementById('clear').addEventListener('click', function(){

    document.getElementById('joinForm').reset();
    
    /*
    let userid = document.getElementById('userid');
    let pwd = document.getElementById('pwd');
    let pwdcheck = document.getElementById('pwdcheck');
    let name = document.getElementById('name');
    let number = document.getElementById('phoneNumber');

    userid.value = '';
    pwd.value = '';
    pwdcheck.value = '';
    name.value = '';
    number.value = '';
    */
})