JS 연습문제 8 - 회원 가입 양식

▶ JS 연습문제 8 - 회원 가입 양식

• 회원 가입 양식 포함 사항
  - 아이디 / 비밀번호 및 비밀번호 확인 / 이름 / 성별 / 전화번호 / 이메일
• CSS

fieldset{width: 500px;}

#resetBtn{margin-left: 150px;}

.confirmId{background-color: green;}

.errorId{
   background-color: red;
   color: white;
}

.confirm{color: green;}

.error{color: red;}

• HTML

<form  onsubmit="return validate()">
   <fieldset>
      <legend>회원 가입 양식</legend>
          <table>
              <tr>
                 <td>아이디</td>
                 <td><input type="text" name="userId" id="memberId"></td>
                 <td><button>중복확인</button></td>
              </tr>
              <tr>
                 <td>비밀번호</td>
                 <td><input type="password" name="userPw" id="memberPw1"></td>
                 <td><span id="pwCheck"></span></td>
              </tr>
              <tr>
                 <td>비밀번호확인</td>
                 <td><input type="password" name="userPw" id="memberPw2"></td>
              </tr>
              <tr>
                 <td>이름</td>
                 <td><input type="text" name="userName" id="memberName"></td>
                 <td><span id="nameCheck"></span></td>
              </tr>
              <tr>
                 <td>성별</td>
                 <td>
                   남<input type="radio" name="userGender" id="memberGenderM" value="male">
                   여<input type="radio" name="userGender" id="memberGenderF" value="female">
                 </td>
              </tr>
              <tr>
                 <td>전화번호</td>
                 <td><input type="tel" name="userPhone" id="memberPhone" placeholder="'010-0000-0000' 형식"></td>
              </tr>
              <tr>
                 <td>이메일</td>
                 <td><input type="email" name="userMail" id="email"></td>
              </tr>
        </table>
        <button type="reset" id="resetBtn">초기화</button>
        <button type="submit" id="memberReg">회원가입</button>
   </fieldset>
</form>

• JavaScript

// 아이디 : 값이 변했을 때
document.getElementById('memberId').addEventListener('keyup', function () {

    /*  영어 소문자로 시작하고, 
    영어 대/소문자, 숫자, - , _ 로만 이루어진 6~14 글자 사이 문자열인지 검사 */
    const regExp = /^[a-z][-_a-z0-9A-Z]{5,13}$/;
    /* const regExp = /^[a-z](\d|\w|-){5,13}$/; */

    if (regExp.test(this.value)) { // 형식이 일치할 경우, 입력창의 배경색을 green 으로 변경
        this.classList.add('confirmId');
        this.classList.remove('errorId');

    } else { // 형식이 일치하지 않은 경우, 입력창의 배경색을 red, 글자색을 white 로 변경
        this.classList.add('errorId');
        this.classList.remove('confirmId');
    }

    if (this.value == '') { // 아이디 입력창 비울 경우, 
        // 배경색 & 글자색 초기화 및 입력창에 포커스 맞추기
        this.classList.remove('errorId');
        this.focus();
    }
})

// ------------------------------------------------------------------

/* 비밀번호, 비밀번호 확인 : 키보드가 올라올 때 
"비밀번호" 를 미입력한 상태에서 "비밀번호 확인"을 작성할 경우
"비밀번호 확인"에 작성된 내용을 모두 삭제하고
'비밀번호를 입력해주세요' 경고창 출력 후
focus 를 "비밀번호" 입력창으로 이동
*/

const memberPw1 = document.getElementById("memberPw1");
const memberPw2 = document.getElementById("memberPw2");

memberPw2.addEventListener("keyup", function(){

    if(memberPw1.value.length == 0){
        alert("비밀번호를 입력해주세요");
        this.value = '';
        memberPw1.focus();
    }
})

// ------------------------------------------------------------------

/*
- 비밀번호가 일치할 경우
"비밀번호" 입력창 오른쪽에 "비밀번호 일치" 글자를 초록색으로 출력.

- 비밀번호가 일치하지 않을 경우
"비밀번호" 입력창 오른쪽에 "비밀번호가 불일치" 글자를 빨간색으로 출력

- 비밀번호가 작성되지 않은경우 오른쪽에 출력되는 문구 삭제

*/
const pwCheck = document.getElementById("pwCheck");

memberPw1.addEventListener("keyup", function(){
    if(pwCheck.value != ''){

        if(memberPw1.value == memberPw2.value){
            pwCheck.innerText = "비밀번호 일치"
            pwCheck.classList.add("confirm");
            pwCheck.classList.remove("error")
    
        } else{
             pwCheck.innerText = "비밀번호 불일치"
             pwCheck.classList.add("error");
             pwCheck.classList.remove("confirm")
        }
    }

    if(memberPw1.value.length == 0 && memberPw2.value == ''){
        pwCheck.innerText = '';
    }
})

memberPw2.addEventListener("keyup", function(){

    if(memberPw1.value == memberPw2.value){
        pwCheck.innerText = "비밀번호 일치"
        pwCheck.classList.add("confirm");
        pwCheck.classList.remove("error")

    } else{
            pwCheck.innerText = "비밀번호 불일치"
            pwCheck.classList.add("error");
            pwCheck.classList.remove("confirm")
    }

    if(memberPw1.value.length == 0 && memberPw2.value == ''){
        pwCheck.innerText = '';
    }
})

// ------------------------------------------------------------------

// 이름 : 값이 변화했을 때 
document.getElementById('memberName').addEventListener('change', function () {

    // 한글 2~5 글자 사이 문자열인지 검사
    const regExp = /^[가-힣]{2,5}$/;

    const nameCheck = document.getElementById('nameCheck');

    if (regExp.test(this.value)) { // 형식이 일치할 경우
        // "이름" 입력창 오른쪽에 "정상입력" 글자를 초록색으로 출력
        nameCheck.innerHTML = "정상입력";
        nameCheck.classList.add('confirm');
        nameCheck.classList.remove('error');

    } else { // 형식이 일치하지 않을 경우
        // "이름" 입력창 오른쪽에 "한글만 입력하세요" 글자를 빨간색으로 출력.
        nameCheck.innerHTML = "한글만 입력하세요";
        nameCheck.classList.add('error');
        nameCheck.classList.remove('confirm');

        // 입력값 초기화 및 포커스 맞추기
        this.value = '';
        this.focus();
    }
})

// -----------------------------------------------------------

// 회원가입 버튼 클릭 시 : validate() 함수를 호출하여 
// 성별이 선택 되었는지, 전화번호가 형식에 알맞게 작성되었는지 검사
function validate() {

    // 성별이 선택 되었는지 검사
    const male = document.getElementById('memberGenderM');
    const female = document.getElementById('memberGenderF');

    if (!male.checked && !female.checked) { // 성별이 선택되지 않은 경우

        // "성별을 선택해주세요." 경고창(==대화상자) 출력 후
        alert("성별을 선택해주세요");

        // submit 기본 이벤트를 제거하여 회원가입이 진행되지 않게 함
        return false;
    }

    // 전화번호가 형식에 알맞게 작성되었는지 검사
    const memberPhone = document.getElementById('memberPhone');

    const regExp = /^01[0-9]-[0-9]{4}-[0-9]{4}$/; // 전화번호 형식 검사

    /* const regExp = /^[0][0-9]{1,2}-[0-9]{3,4}-\d{4}$/; */

    if(memberPhone.value == ''){ // 전화번호를 입력하지 않은 경우
        alert("전화번호를 입력해주세요.");
        return false;
    }

    if(!regExp.test(memberPhone.value)){ // 전화번호 형식이 올바르지 않을 경우

        // "전화번호의 형식이 올바르지 않습니다" 경고창(==대화상자) 출력 후
        alert("전화번호의 형식이 올바르지 않습니다");

        // submit 기본 이벤트를 제거하여 회원가입이 진행되지 않게 함
        return false;
    }
}

See the Pen 24-12-25 js review-pr8 by Namu (@Namu-the-sans) on CodePen.