회원가입 NAME/PW 조건걸기

회원가입 유효성 설정

 

GOAL : user name은 4~12자 안에서 영문 대소문자, 숫자만 가능. 비밀번호는 8~12자 안에서 특수기호와 숫자를 포함해야한다.

 

현재 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>

 

NAME 유효성

 

 

 

 

1. HTML에서 name input 박스와 알림을 줄 message 공간을 가지고 온다.

 

const username = document.querySelector('#username');
const username_msg = document.querySelector('#username_msg');

 

 

 

 

2. 정규표현식을 사용해서 min,max length와 들어갈 값을 설정해준다.

 

const nameValidation = /^[a-zA-Z0-9_-]{4,12}$/;

=> 해석해보자면 4~12자 안에서 영문 대/소문자와 숫자를 사용할 수 있다는 뚯.

 

 

 

 

3. 위의 정규표현식으로 검사할 함수를 만들어 준다. + action

 

function username_check() {}

 

3-1. 2번에서 변수에 담아둔 정규표현식에 test라는 method를 써서 username안에 value값을 검사해본다.

=> 이때 test method를 사용하면 결과는 boolean값으로 나온다.

nameValidation.test(username.value)

 

3-2.  2-1번의 결과치를 3번 함수의 if문 안에 넣어주면서 action을 설정해준다.

 

        function username_check() {
            if (nameValidation.test(username.value)) {
                username_msg.innerHTML = 'CORRECT NAME';
                username_msg.style.color = 'green';
                username_msg.style.display = 'block';
            } else {
                username_msg.innerHTML = 'CHECK YOUR NAME';
                username_msg.style.color = 'red';
                username_msg.style.display = 'block';
            }
        }

=> username_msg에 조건에 맞춰서 각각의 문자와 색 등을 설정해준다. 

 

 

 

 

4. 결과값을 출력할 코드를 작성해준다.

 

username.addEventListener('focusout', username_check);

 

 

 

 

결과

 

 

 

A. 한국어 입력하고 커서 뺐을때

 

 

 

 

B. 중간에 space(공백) 입력하고 커서 뺐을때

 

 

 

 

C. 입력허용되는 값(대,소문자, 숫자) 입력하고 커서 뺐을때

 

 

 

 

 

---

 

 

PASSWORD 유효성

 

 

 

 

1. password value값을 받아올 변수를 선언한다.

 

const pwd1 = document.querySelector('#userpw');
const pwd2 = document.querySelector('#userpw_check');

=> develop-famous.tistory.com/84 이 글에서 password더블 체크 할때 미리 불러왔던 변수를 똑같이 사용했다. 다만 password 유효성은 pwd1에서만 검사하면된다.

 

 

 

 

2. 정규표현식을 사용해 설정값을 정해준다.

 

const pwValidation = /^.*(?=^.{8,20}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[~,!,^,@,#,$,*,(,),=,+,_,.,|]).*$/;

=> 해석해보자면 8~20자 안에 숫자(d)가 포함되고 알파벳 대,소문자가 들어갈 수도 있고 특수문자(언급해놓은)을 포함할 수 있다. 라는 뜻 (정확히는 이 조건에 취합하는 text를 찾는거지만 이해하기 쉽게 적어봤다.)

 

 

 

 

3. 2번을 사용할 함수를 만든다. (나의 경우 1번에서 언급했던 password 더블체크때 만들었던 함수를 사용했다.)

 

function password_check() {}

 

3-1. 2번 정규표현식에 test method를 사용해 pwd1의 value값을 검사하고, 그 결과값을 변수에 담는다.

 

let pwTest1 = pwValidation.test(pwd1.value);

 

3-2. pwTest1의 값이 true일때 true값을 return해 준다.

 

        function password_check() {
            let pwTest1 = pwValidation.test(pwd1.value);
            let pwTest2 = pwd1.value == pwd2.value;
            if (pwTest1 && pwTest2) {
                return true;
            } else {
                return false;
            }
        }

=> 여기서 pwTest1은 입력된 password의 유효성을 검사한것이고 pwTest2는 password를 더블체크한 값을 의미한다. 두가지의 조건이 모두 true를 나타낼때 true를 return한다.

 

 

 

 

4. 3번을 출력할 함수를 설정한다. + action

 

        const btn = document.querySelector('#login_submit');
        const login_form = document.querySelector('#login_form');
        
        btn.addEventListener('click', () => {
            let pwd_check = password_check();

            if (pwd_check == false) {
                alert('CHECK YOUR PASSWORD')
                return
            }
        login_form.submit();
        })

=> 버튼을 클릭했을때 password_check(pwd_check)의 값이 false라면 경고창을 띄운 후 return으로 코드를 종료해주고 true일때는 login_form을 submit해준다.

 

 

 

 

 

결과

 

 

 

A. password가 정규표현식의 조건을 충족했을때

 

 

 

 

 

B. password가 정규표현식의 조건을 충족하지 못했을때

 

 

 

 

 

 

 

 

REFERENCE: velog.io/@delheure/Vanilla-Javascript-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0

[Vanilla Javascript] 회원가입 페이지 만들기