[javascript] 입력 필드에 포커스를 이동하면서 유효성 검사를 실시하는 방법은?

05 Dec 2023

javascript

input 이벤트 리스너 추가하기: 먼저 입력 필드에 포커스 이동 시에 input 이벤트를 감지하는 이벤트 리스너를 추가해야 합니다.

const inputField = document.querySelector("#myInput");

inputField.addEventListener("input", validateInput);

유효성 검사 함수 작성하기: 유효성 검사 함수를 작성하여 입력된 값을 검사하고 필요에 따라 적절한 처리를 수행합니다.

function validateInput() {
  const input = this.value; // 현재 입력 필드의 값 가져오기

  // 유효성 검사 로직 작성
  if (input.length < 5) {
    // 입력이 유효하지 않은 경우
    this.classList.add("invalid"); // CSS 클래스를 추가하여 스타일링
  } else {
    // 입력이 유효한 경우
    this.classList.remove("invalid"); // CSS 클래스를 제거하여 스타일 초기화
  }
}

포커스 이동 시 유효성 검사 실행하기: input 필드에 포커스를 이동할 때마다 유효성 검사 함수가 실행되도록 이벤트 리스너를 추가합니다.

inputField.addEventListener("focus", validateInput);

이제 입력 필드에 포커스를 이동할 때마다 입력된 값을 유효성 검사할 수 있습니다. 유효성 검사 결과에 따라 스타일이 변경되거나 필요한 처리를 수행할 수 있습니다.