[javascript] 자바스크립트 정규식을 이용한 유효성 검사 에러 메시지 표시

08 Dec 2023

javascript

웹 폼과 같은 사용자 입력을 다루는 경우, 클라이언트 측에서 유효성 검사를 수행하여 사용자가 올바른 형식으로 데이터를 입력했는지 확인하는 것은 중요합니다. 이를 통해 서버로 전송되는 데이터의 유효성을 보장하고, 사용자 경험을 향상시킬 수 있습니다.

이 블로그에서는 자바스크립트의 정규식을 활용하여 유효성 검사를 수행하고, 에러 메시지를 효과적으로 표시하는 방법을 살펴보겠습니다.

유효성 검사를 위한 정규식 활용

const emailInput = document.getElementById('email');
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

function validateEmail() {
  if (!emailPattern.test(emailInput.value)) {
    return false;
  }
  return true;
}

위 코드는 이메일 주소 유효성을 검사하는 정규식 패턴을 보여줍니다. validateEmail 함수에서 입력값이 정규식 패턴과 일치하는지 검사하고, 그 결과를 반환합니다.

에러 메시지 표시하기

const emailError = document.getElementById('email-error');

function showError(element, message) {
  element.innerText = message;
  element.style.display = 'block';
}

function hideError(element) {
  element.innerText = '';
  element.style.display = 'none';
}

emailInput.addEventListener('input', function() {
  if (!validateEmail()) {
    showError(emailError, '올바른 이메일 주소를 입력하세요.');
  } else {
    hideError(emailError);
  }
});

위 코드는 입력 필드 옆에 있는 <span> 엘리먼트를 활용하여 에러 메시지를 표시하거나 숨기는 방법을 보여줍니다. showError 함수는 에러 메시지를 표시하고, hideError 함수는 메시지를 숨깁니다. addEventListener를 사용하여 입력값이 변경될 때마다 유효성을 검사하고 에러 메시지를 업데이트합니다.

위 방법을 통해 자바스크립트를 활용하여 유효성 검사와 에러 메시지 표시를 간편하게 구현할 수 있습니다.

이상입니다. 부가적으로 어떤 라이브러리를 사용하는 것이 더 효율적일 수 있습니다.