[javascript] 오류 처리를 통해 사용자 입력 유효성 검증하기

15 Dec 2023

javascript

사용자 입력 유효성을 검증하고 오류를 처리하는 것은 웹 애플리케이션에서 중요한 부분입니다. JavaScript를 사용하여 사용자 입력을 검증하고 오류를 처리하는 방법을 알아보겠습니다.

1. 사용자 입력 유효성 검증하기

사용자가 제출한 양식의 입력을 검증하기 위해 addEventListener 메서드를 사용할 수 있습니다. 예를 들어, 아래의 코드는 사용자가 입력 필드에 데이터를 입력하고 “Submit” 버튼을 클릭했을 때 validateInput 함수를 호출하여 입력을 검증합니다.

const form = document.querySelector('form');
const input = document.querySelector('#inputField');

form.addEventListener('submit', function(event) {
  if (!validateInput(input.value)) {
    event.preventDefault();
    // 오류 처리 로직을 추가합니다.
  }
});

function validateInput(input) {
  if (input.trim() === '') {
    // 입력이 유효하지 않은 경우
    return false;
  }
  // 입력이 유효한 경우
  return true;
}

2. 오류 처리하기

오류 처리는 사용자가 잘못된 입력을 제출했을 때 알림을 표시하거나 적절한 조치를 취할 수 있는 기회를 제공합니다. 예를 들어, 입력 필드 아래에 오류 메시지를 표시하는 방법은 다음과 같습니다.

function validateInput(input) {
  if (input.trim() === '') {
    displayError('입력이 필요합니다.');
    return false;
  }
  return true;
}

function displayError(message) {
  const errorElement = document.createElement('div');
  errorElement.classList.add('error-message');
  errorElement.textContent = message;
  input.parentNode.appendChild(errorElement);
}

결론

JavaScript를 사용하여 사용자 입력을 유효성 검증하고 오류를 처리하는 방법에 대해 알아보았습니다. 입력 필드가 필수인지 여부나 올바른 형식인지 확인하는 등의 추가 검증을 수행할 수 있으며, 이를 통해 웹 애플리케이션의 안정성을 높일 수 있습니다.

더 많은 자세한 내용은 MDN 웹 문서를 참고할 수 있습니다.