[SEB_FE] 유효성 검사 예제

 

💡 추가 기능

 

비밀번호 표시 on / off

let elShowPasswordBtn = document.querySelectorAll(".show-button");

elShowPasswordBtn.forEach((btn) => {
  btn.onclick = (e) => {
    const password = e.target.parentElement.childNodes[1]; // input
    let status = e.target.getAttribute("value");
    switch (status) {
      case "hide":
        password.type = "text";
        e.target.setAttribute("value", "view");
        e.target.src = "./images/hide.png";
        break;
      case "view":
        password.type = "password";
        e.target.setAttribute("value", "hide");
        e.target.src = "./images/view.png";
        break;
    }
  };
});

비밀번호 칸이 두 개이므로 querySelectorAll을 활용해서 모두 선택해주었습니다. querySelectorAll을 사용하면 배열로 저장되므로 forEach로 순회합니다.

원하는 칸의 눈 아이콘을 클릭하면, 눌린 아이콘의 부모 요소를 찾습니다. 찾은 부모 요소의 2번째가 비밀번호 input 입니다.

그리고 눌린 아이콘의 속성 중에서 설정해놓은 value를 가져와서 저장합니다.

저장해놓은 value가 hide면 비밀번호 input의 타입을 text로 변경해서 보일 수 있게 설정하고 setAttribute로 value도 변경합니다. 그리고 아이콘의 이미지도 변경해줍니다.
value가 view때도 비슷한 과정으로 진행하여 hide일 때와 반대로 설정합니다.

❗️ 하면서 더 공부하게 된 것

 

HTML Attribute, DOM Property

let status = e.target.value; // undefined
let status = e.target.getAttribute("value"); // hide

e.target.value = "view"; // value가 변하지 않음
e.target.setAttribute('value', 'view'); // value가 변함

.value로 접근하면 스코프 내부에서만 변경이 되고 저장은 되지 않아서 왜 그런지 찾아보았습니다.

요소 노드 객체에는 HTML 어트리뷰트가 있고 그것에 대응하는 DOM 프로퍼티도 존재합니다. 이 DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있습니다.

저는 임의로 img 태그에 value 속성를 선언하고 값을 할당했습니다.
하지만 img 태그에는 value 라는 속성이 없기 때문에 DOM 프로퍼티에는 존재하지 않습니다.
그래서 e.target.value로는 img 태그에 있는 value로 접근이 불가능한 것 이었습니다.
따라서 .value대신 .getAttribute, .setAttribute를 사용하여 초기 상태에 접근하고 변경해주어야합니다.