JavaScript를 활용한 유효성 검사 구현하기 💻

웹 개발에서 사용자 입력의 유효성을 검사하는 것은 매우 중요합니다. 오늘은 JavaScript를 사용하여 간단한 폼 유효성 검사를 어떻게 구현할 수 있는지 알아보겠습니다. 복잡한 기술 용어는 사용하지 않고, 쉽게 따라 할 수 있도록 설명하겠습니다.

기본적인 유효성 검사

가장 먼저, HTML에서 폼을 만들어 보겠습니다. 이메일과 비밀번호 입력 필드가 있는 간단한 로그인 폼입니다.

<form id="loginForm">
  <label for="email">이메일:</label>
  <input type="email" id="email" required>
  <label for="password">비밀번호:</label>
  <input type="password" id="password" required>
  <button type="submit">로그인</button>
</form>

이제 JavaScript를 사용하여 이 폼의 유효성을 검사해 보겠습니다. 폼이 제출될 때, 이메일과 비밀번호가 비어 있지 않은지 확인합니다.

document.getElementById('loginForm').addEventListener('submit', function(event) {
  var email = document.getElementById('email').value;
  var password = document.getElementById('password').value;

  if(email === '' || password === '') {
    alert('이메일과 비밀번호를 입력해주세요.');
    event.preventDefault(); // 폼 제출을 막습니다.
  }
});

고급 유효성 검사

이메일 형식이 올바른지 검사하는 것도 중요합니다. 이메일 형식을 검사하기 위해 정규 표현식을 사용할 수 있습니다.

function validateEmail(email) {
  var re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  return re.test(email);
}

document.getElementById('loginForm').addEventListener('submit', function(event) {
  var email = document.getElementById('email').value;

  if(!validateEmail(email)) {
    alert('올바른 이메일 형식이 아닙니다.');
    event.preventDefault(); // 폼 제출을 막습니다.
  }
});

이렇게 JavaScript를 사용하여 간단하게 폼의 유효성을 검사할 수 있습니다. 사용자로부터 올바른 형식의 데이터를 받는 것은 웹 애플리케이션의 안정성과 사용자 경험을 향상시키는 데 매우 중요합니다.

이번 포스트를 통해 JavaScript를 활용한 기본적인 폼 유효성 검사 방법을 배웠습니다. 이 기술을 활용하여 사용자로부터 올바른 데이터를 수집하는 더 안전하고 사용자 친화적인 웹 애플리케이션을 만들어 보세요!