회원가입 유효성 검사 - Toy Project

📝 체크리스트

1. 아이디
   ✅ 1-1 4자리 이상일 것
   ✅ 1-2 영문 only 또는 영문과 숫자 조합일 것
2. 비밀번호
   ✅ 2-1 8자리 이상일 것
   ✅ 2-2 영문, 숫, 특수문자가 모두 들어갈 것
3. 비밀번호 체크
   ✅ 동일하게 입력했는지 확인
4. 이메일
   ✅ 이메일 형식으로 입력되어야 할 것
5. 회원가입 버튼
   ✅ 위 4가지를 모두 통과한 경우 활성화 될 것
6. placeholder 트렌지션
   ✅ input을 활성화시키면 placeholder가 제목처럼 이동

Javascript 코드

1. 먼저 유효성을 체크할 함수를 만들었다. keyup 이벤트를 사용할 때 필요한 함수를 가져와서 사용할 것이기 때문이다.

// [유효성 검증 함수 예시]
function onlyNumberAndEnglish(str) {
    return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

function strongPassword(str) {
    return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(str);
}

function emailFormat(str) {
    return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(str);
}

2. 유효성 체크가 필요한 input을 변수로 지정을 해주고, keyup 이벤트와 위에 작성한 함수를 통해 실시간으로 유효성 체크가 이루어지게 했다. 유효성 체크 여부에 따라 노출되는 메세지는 클래스 hide로 제어했다.

<fieldset class="form__input">
	<input type="text" id="username" class="form__input__text" name="username" value="" />
	<label for="username" class="form__input__placeholder">Username</label>
	<p class="form__input__comment success-message hide">사용 가능한 아이디입니다.</p>
	<p class="form__input__comment failure-message hide">4자리 이상 영문 또는 영문, 숫자만 가능합니다.</p>
</fieldset>

//예시) 아이디 유효성 체크
const elInputUsername = document.querySelector("#username");
elInputUsername.onkeyup = function () {
    if (
        isMoreThan4Length(elInputUsername.value) &&
        onlyNumberAndEnglish(elInputUsername.value)
    ) {
        //성공 메세지 노출 처리
        elSuccessMessage.classList.remove("hide");
        //실패 메세지 숨김 처리
        elFailureMessage.classList.add("hide");
      	idValidation = true; //밑에서 설명할 예정
    } else {
        //성공 메세지 숨김 처리
        elSuccessMessage.classList.add("hide");
        //실패 메세지 노출 처리
        elFailureMessage.classList.remove("hide");
      	idValidation = false;
    }
};

어려웠던 부분 & 해결 방법

여기까지는 순조로웠다. 문제는 모든 input에 유효성에 맞는 값들이 입력이 됐을 때 활성화 되는 버튼을 구현하는 것이었다. 한참을 헤메다 유효성을 boolean 값으로 갖고 있는 변수를 만들고, 이 변수들이 전부 true일 때 버튼은 활성화하는 방식으로 해결했다.

//모든 입력창
const elInputAll = document.querySelectorAll("input");

//각 유효성 boolean 값 리셋
let idValidation = false;
let passwordValidation = false;
let passwordMatch = false;
let emailValidation = false;
let phoneValidation = false;

//버튼 초기값 -> 비활성화
elSignUpBtn.setAttribute("disabled", "disabled");

for (let i = 0; i < elInputAll.length; i++) {
    elInputAll[i].addEventListener("keyup", function () {
        if (idValidation && passwordValidation && passwordMatch && emailValidation) {
            elSignUpBtn.removeAttribute("disabled");
        } else {
            elSignUpBtn.setAttribute("disabled", "disabled");
        }
    });
}