JavaScript를 활용한 폼 데이터 유효성 검사 방법

웹 개발에 있어서 사용자로부터 정보를 받는 것은 매우 중요합니다. 이 정보를 받기 위해 우리는 폼(form)을 사용하죠. 하지만 모든 입력이 올바른지 확인하는 것도 중요합니다. 여기서 JavaScript가 큰 역할을 합니다. 오늘은 JavaScript를 이용해 폼 데이터의 유효성을 검사하는 방법을 살펴보겠습니다.

간단한 예제로 시작하기

먼저, HTML에서 간단한 폼을 만들어 보겠습니다. 이 폼은 사용자의 이름과 이메일을 받는 예제입니다.

<form id="userForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  <button type="submit">제출</button>
</form>

이제 JavaScript를 사용하여 이 폼의 데이터가 올바른지 검사해 보겠습니다. 우리는 두 가지 검사를 할 것입니다: 이름이 비어 있지 않고, 이메일이 유효한 형식인지 확인하는 것입니다.

document.getElementById('userForm').addEventListener('submit', function(event) {
  // 폼 제출을 일시적으로 중단
  event.preventDefault();

  // 입력값 가져오기
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;

  // 이름 검사
  if(name.trim() === '') {
    alert('이름을 입력해주세요.');
    return;
  }

  // 이메일 형식 검사
  var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if(!emailPattern.test(email)) {
    alert('유효한 이메일 주소를 입력해주세요.');
    return;
  }

  // 모든 검사를 통과했다면, 폼 제출 진행
  // 여기서는 예시로 console에 출력만 하겠습니다.
  console.log('제출된 이름:', name);
  console.log('제출된 이메일:', email);
});

위의 코드는 사용자가 폼을 제출할 때 발생하는 이벤트를 감지합니다. 사용자가 '제출' 버튼을 클릭하면, JavaScript가 입력된 이름과 이메일을 검사합니다. 이름이 비어 있거나 이메일이 유효한 형식이 아니라면, 사용자에게 경고를 보내고 폼의 제출을 중단합니다. 모든 검사를 통과하면, 실제로는 폼을 제출하겠지만 여기서는 단순히 콘솔에 결과를 출력합니다.

이 예제를 통해 JavaScript를 사용하여 폼 데이터의 유효성을 간단하게 검사하는 방법을 배웠습니다. 이 기술을 사용하면 사용자로부터 올바른 정보를 받아내는 것을 보장할 수 있습니다. Happy coding!