입력 폼에서 사용자가 잘못된 형식으로 데이터를 제출하는 것을 방지하기 위해서는 유효성 검사가 필수적입니다. 이 포스트에서는 JavaScript를 사용하여 간단한 입력 폼의 유효성을 검사하는 방법에 대해 알아보겠습니다.

1. HTML 입력 폼 생성하기

가장 먼저, HTML을 사용하여 간단한 입력 폼을 생성합니다. 여기에는 이름과 이메일을 입력하는 필드가 포함됩니다.

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

2. JavaScript를 사용하여 유효성 검사하기

이제 JavaScript를 사용하여 사용자가 올바른 형식으로 데이터를 입력했는지 확인하는 스크립트를 작성합니다.

document.getElementById('userForm').addEventListener('submit', function(event) {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  
  if (name === '' || email === '') {
    alert('이름과 이메일을 모두 입력해주세요.');
    event.preventDefault();
  } else if (!validateEmail(email)) {
    alert('올바른 이메일 주소를 입력해주세요.');
    event.preventDefault();
  }
});

function validateEmail(email) {
  const re = /\S+@\S+\.\S+/;
  return re.test(email);
}

위의 JavaScript 코드는 submit 이벤트를 사용하여 폼이 제출될 때 필드 값을 검사합니다. 이름과 이메일이 빈 값인지, 그리고 이메일이 올바른 형식인지를 확인한 후, 문제가 있는 경우 사용자에게 경고를 표시하고 제출을 막습니다.

3. 결과 확인하기

위의 HTML과 JavaScript 코드를 사용하여 입력 폼의 유효성을 검사해보세요. 이름과 이메일을 입력하지 않거나, 이메일이 올바른 형식이 아닌 경우에 대한 알림이 표시됩니다.

이제 당신은 JavaScript를 사용하여 간단한 입력 폼의 유효성을 검사하는 방법에 대해 알게 되었습니다. 만약 더 복잡한 유효성 검사가 필요하다면, JavaScript의 다양한 유효성 검사 라이브러리를 참고하여 사용할 수 있습니다.

참고 자료:

• MDN 웹 문서 - 폼 유효성 검사
• JavaScript 유효성 검사 라이브러리 - validate.js