[💻 코드스테이츠 FE 44기] 부트캠프 - 유효성 검사 과제

✔️ 시작

회원가입 유효성 검사 과제 작업을 진행했다.
일반 과제를 완료하면 심화 과제 부터 CSS작업까지 진행했다.

피그마로 큰 틀, 디자인 작업 후 진행했다.

---

📍 유효성 검사

회원가입 양식을 작성할 때 필수 요소를 작성하지 않거나, 입력이 잘 못 되었을 때 이를 방지하기 위해 유효성 검사를 진행한다.

📍 유효성 검사 과제

📌 일반과제 주제

1. '글자 수가 4개 이상'이면 '사용할 수 있는 아이디입니다' 메시지 출력
2. 비밀번호 입력란과 비밀번호 확인 입력란이 동일할때와 그러지 않을 때 메시지 출력

💻 사용한 메서드, 이벤트

• quetSelector : HTML요소를 css selector 형식으로 불러온다.
• onkeyup : 키보드 입력 등에 따라 반응한다.
• classList.add/classList.remove : class를 추가/삭제한다.

1. '글자 수가 4개 이상'이면 '사용할 수 있는 아이디입니다' 메시지 출력

// 조건문을 이용해 해당 조건문에 따라 class hide 추가/삭제
elInputUserName.onkeyup = function(){
  let inputUserName = elInputUserName.value;
  if(isMoreThan4Length(inputUserName){
    elSuccessMsg.classList.remove("hide");
    elFailureMsg.classList.add("hide");
  }else{
    elFailureMsg.classList.remove("hide");
    elSuccessMsg.classList.add("hide");   
  }
}

2. 비밀번호 입력란과 비밀번호 확인 입력란이 동일할때와 그러지 않을 때 메시지 출력

//비밀번호 확인 // 아이디 값과 동일하다.
elInputPasswordRe.onkeyup = function(){
  let password1 = elInputPassword.value;
  let password2 = elInputPasswordRe.value;
  if(isMatch(password1,password2)){
    elMisMathMsg.classList.remove("hide");
  }else{
    elMisMathMsg.classList.add("hide");
  }
}

📌 심화과제 주제

일반 과제 주제 보다 좀 더 세밀하게 유효성 검사를 하는 방법이였다.

• 아이디는 영어 또는 숫자만 가능하도록
• 비밀 번호는 최소 8자 이상, 영어/숫자와 특수문자 하나는 포함되어 있도록

두 조건은 다행히 미리 제시되어 있었고 일반 과제에서 풀었던 코드에서 조금만 수정하면 됐다.

💻 기능 추가

1. 비밀번호 보이기/숨기기

// 비밀번호 보이기/감추기
function showStrFnc1(){
  if(elInputPassword.type === "password"){
    elInputPassword.setAttribute("type", "text");
    showStr1.textContent = "visibility";
  }else{
    elInputPassword.setAttribute("type", "password");
    showStr1.textContent = "visibility_off";
  }  
}

• 비밀번호 input type이 password인지 조건문 작업
• 맞다면 setAttribute()메서드 이용해 type 속성 password에서 text로 변경
• 이에 맞게 아이콘도 같이 변경 (아이콘은 구글 웹 아이콘을 사용했다.)

--- 03.29 비밀번호 보이기/감추기 재사용 할 수 있게 수정하기 ---

• 매개 변수를 만들어 준다.
• 하나의 함수로 여러 addEventListener를 사용할 수 있게 만들어 주었다.

2. 입력창 전부 작성될 경우 팝업창 띄우기

//submit
function joinFormFnc(event){
  event.preventDefault(); // submit의 기본 동작 막기
  alert("회원가입에 성공하셨습니다.");
}

joinForm.addEventListener("submit", joinFormFnc);

<!--html form태그에 추가-->
<form id="join-form" onsubmit="joinFormFnc()" >
  ...
</form>

• input, button을 <form>태그로 감싸주기
• addEventListener로 submit이벤트 이용

❗️form을 submit할 경우 브라우저를 새로고침 한다. 이를 방지하기 위해 event.preventDefault()를 해준다. 해당 코드는 <form>태그의 기본 작동을 막아준다.

❗️submit을 했는데도 팝업창이 뜨지 않아 알아보니 <form> 태그에 onsubmit="해당 함수" 를 추가해 줘야한다.

📌 완성본

---

✏️ 마치며

처음엔 튜툐리얼을 보면서 진행하는거라 순조롭게 진행 되었다.

이후 css등의 작업을 하면서 다른 수강생 분들의 작업물을 보니 뭔가 욕심이 나서 이것 저것 추가하게 된 거 같다.

이번 기회를 통해 onsubmit=""으로 submit을 보내는 걸 알게 되었고
함수에 매개변수와 전달인자를 통해 재사용 등을 하는데 유용한 점도 알게되었다.

다음 학습에는 솔로 프로젝트가 진행된다고 한다.

이것 또한 튜툐리얼이 있지만 내가 발휘할 수 있는 영역은 모두 보여 줄 수 있도록 노력할 것 이다.

이번 솔로 프로젝트에서는 이전에 하지 못했던 반응형, 라이트/다크 모드, 애니메이셔 효과 등을 추가해 볼까 생각 중이다.