(SEB_FE) Section1 Unit10 유효성 검사 과제 (Feat. 뉴모피즘)

1. DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.
2. querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다.
3. oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다.
4. 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다.
5. 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다.
6. 유효성 검사에 필요한 기술 요소를 익힐 수 있다.
7. 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.
8. 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)
9. 유효성 검사에서 활용할 수 있는 정규 표현식의 기초 사용법에 대해 익힐 수 있다. (advanced)
10. 관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced)

⭐HTML file

      <fieldset class="input">
        <input type="text" id="username" placeholder="아이디" />
      </fieldset>
	
	// 아이디 형식이 올바를 경우 띄워줄 message
      <div class="success-message hide">사용할 수 있는 아이디입니다</div>

	//아이디 형식이 틀릴 경우 띄워줄 alert 
      <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>
      <div class="id-alert-message hide">
        아이디는 영어, 또는 숫자만 가능합니다
      </div>

      <fieldset class="input">
        <input type="password" id="password" placeholder="비밀번호" />
      </fieldset>

	//비밀번호 형식이 틀릴 경우 띄워줄 alert 
      <div class="pw-alert-message hide">
        8자 이상, 알파벳과 숫자 및 </br>특수문자 하나 이상 포함해야 합니다
      </div>

      <fieldset class="input">
        <input
          type="password"
          id="password-retype"
          placeholder="비밀번호 확인"
        />
      </fieldset>

	// 재입력한 비밀번호가 일치하지 않을 경우 띄워줄 alert 
      <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>

      <fieldset class="signup">
        <button>회원가입</button>
      </fieldset>

⭐JavaScript file

💫 DOM으로부터 필요한 엘리먼트 불러오기

// 순서대로 ID입력, PW입력, PW확인 input 요소
let elInputUserName = document.querySelector("#username");
let elInputPassword = document.querySelector("#password");
let elInputPasswordRetype = document.querySelector("#password-retype");

// message, alert 요소들 
let elSuccessMessage = document.querySelector(".success-message");
let elFailureMessage = document.querySelector(".failure-message");

let elMismatchMessage = document.querySelector(".mismatch-message");

let elIdAlertMessage = document.querySelector(".id-alert-message");
let elPwAlertMessage = document.querySelector(".pw-alert-message");

💫 유효성 검증에 필요한 함수들

function isMoreThan4Length(value) {
  // 길이가 4글자 이상이면 true
  return value.length >= 4;
}

function isMatch(password1, password2) {
  // 비밀번호와 비밀번호 확인이 일치하면 true
  return password1 === password2;
}

// [유효성 검증 함수]: 영어 또는 숫자만 가능
function onlyNumberAndEnglish(str) {
  return /^[A-Za-z][A-Za-z0-9]*$/.test(str);
}

// [유효성 검증 함수]: 최소 8자 이상하면서, 알파벳과 숫자 및 특수문자(@$!%*#?&) 는 하나 이상 포함
function strongPassword(str) {
  return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/.test(
    str
  );
}

💫 onkeyup 이벤트 발생

• onkeyup 이벤트 ➡ 사용자가 키보드의 키를 눌렀다 뗄 때

// 아이디 인풋 요소에 onkeyup 이벤트 발생 시
elInputUserName.onkeyup = function () {
  
  // 만약 4글자 이상이면 
  if (isMoreThan4Length(elInputUserName.value)) {
    // 성공 메세지 띄우고 경고 메세지 숨기기
    elSuccessMessage.classList.remove("hide");
    elFailureMessage.classList.add("hide");
  } else {
    // 4글자 이하일 경우 경고 메세지 띄우고 성공 메세지 숨기기
    elFailureMessage.classList.remove("hide");
    elSuccessMessage.classList.add("hide");
  }

  // 숫자나 영어가 아닌 값이 들어올 경우 
  if (!onlyNumberAndEnglish(elInputUserName.value)) {
    // 경고 메세지 띄우고 성공 메세지 숨기기
    elIdAlertMessage.classList.remove("hide");
    elSuccessMessage.classList.add("hide");
  } else {
    // 형식이 올바를 경우 경고 메세지 숨기기
    elIdAlertMessage.classList.add("hide");
  }
};

// 패스워드 형식 확인도 같은 로직 
elInputPassword.onkeyup = function () {
  if (!strongPassword(elInputPassword.value)) {
    elPwAlertMessage.classList.remove("hide");
  } else {
    elPwAlertMessage.classList.add("hide");
  }
};

// 패스워드 확인 인풋 값 확인 부분 
elInputPasswordRetype.onkeyup = function () {
  if (isMatch(elInputPassword.value, elInputPasswordRetype.value)) {
    elMismatchMessage.classList.add("hide");
  } else {
    elMismatchMessage.classList.remove("hide");
  }
};

💫 CSS display 속성을 자바스크립트로 조작

    elSuccessMessage.classList.remove("hide");
    elFailureMessage.classList.add("hide");

• elSuccessMessage 변수는 class 값이 success-message인 요소.
  즉, HTML 파일 내의 아래 부분⬇️
  <div class="success-message hide">사용할 수 있는 아이디입니다</div>
  • 이 요소는 class로 hide도 가지고 있다.
  • classList 메서드를 사용해서 elSuccessMessage 요소의 class 목록에 접근해서 add 메서드, remove 메서드로 특정 class를 추가했다 지웠다 해준다.
  • hide 클래스가 추가되거나 지워지면 hide클래스에 지정된 css(.hide { display: none; })가 적용되거나 해제되면서 조건에 따라 요소가 보였다 안 보였다 한다!

⭐CSS file

• 이번엔 뉴모피즘 스타일을 적용시켜봤다!

• box-shadow 속성

  • offset-x, offset-y, [blur-radius], [spread-radius], [color] 순서대로 작성
  • offset-x, offset-y값을 음수로 지정하면 좌측, 좌측 상단 방향으로 그림자
  • inset 사용시 안쪽 그림자
  • ,로 나열하여 여러개의 box-shadow를 동시에 사용할 수 있다

// main 태그의 스타일 일부
  background-color: #f1f1f1;
  // 순서대로 offset-x, offset-y, [blur-radius], [spread-radius], [color] 
  // offset-x, offset-y값을 음수로 지정하면 좌측, 좌측 상단 방향으로
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.7),
    6px 6px 10px rgba(0, 0, 0, 0.15);

// input 태그의 일부 
// 이렇게 inset을 주면 안으로 들어간다. 
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7),
    inset 2px 2px 4px rgba(0, 0, 0, 0.15);

// button 태그 일부 
  background-color: #f1f1f1;
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.7),
    6px 6px 10px rgba(0, 0, 0, 0.15);

// button: hover
  box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 14.5px;

// button: active 
  box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.7),
    inset 2px 2px 4px rgba(0, 0, 0, 0.15);

⭐결과물