[javascript] 실시간으로 폼 유효성 검사 결과를 표시하는 방법은?

05 Dec 2023

javascript

폼 유효성 검사는 사용자가 입력한 데이터가 원하는 형식과 일치하는지 확인하는 중요한 단계입니다. 이를 실시간으로 표시하여 사용자에게 피드백을 제공하는 것은 사용자 경험을 향상시킬 수 있는 효과적인 방법입니다.

아래는 사용자가 폼을 입력할 때마다 실시간으로 유효성 검사 결과를 표시하는 방법의 간단한 예제입니다.

HTML:

<form>
  <input type="text" id="username" name="username" placeholder="사용자명" required>
  <span id="usernameError" class="error"></span>
  <br>
  <input type="password" id="password" name="password" placeholder="비밀번호" required>
  <span id="passwordError" class="error"></span>
  <br>
  <button type="submit">로그인</button>
</form>

CSS:

.error {
  color: red;
  font-size: 12px;
}

JavaScript:

const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');

usernameInput.addEventListener('input', () => {
  const username = usernameInput.value;
  if (username.length < 5) {
    usernameError.innerText = '사용자명은 최소 5자 이상이어야 합니다.';
  } else {
    usernameError.innerText = '';
  }
});

passwordInput.addEventListener('input', () => {
  const password = passwordInput.value;
  if (password.length < 8) {
    passwordError.innerText = '비밀번호는 최소 8자 이상이어야 합니다.';
  } else {
    passwordError.innerText = '';
  }
});

위의 예제는 폼에 입력된 사용자명과 비밀번호가 각각 최소 길이 조건을 만족하는지 확인하는 실시간 유효성 검사를 수행합니다. 사용자가 입력할 때마다 이벤트 리스너가 실행되어 유효성 검사 결과를 동적으로 표시합니다. 유효성 검사에 실패한 경우에는 에러 메시지를 표시하고, 성공한 경우에는 에러 메시지를 비워둡니다.

유효성 검사 메시지는 span 요소와 클래스 error를 사용하여 스타일링할 수 있습니다. 위의 CSS 예제에서는 에러 메시지를 빨간색으로 표시하고 폰트 크기를 12px로 설정했습니다.

이와 같은 방법을 사용하면 사용자가 실시간으로 폼 유효성 검사 결과를 확인할 수 있으며, 유효하지 않은 입력을 보정하도록 안내할 수 있습니다.

참고 자료: