자바스크립트는 폼 유효성 검사를 수행하는 데 매우 유용한 언어입니다. JSON 데이터를 사용하여 폼의 입력값을 검증하는 방법을 알아보겠습니다. 이를 통해 사용자가 제출한 데이터를 미리 확인하고 필요한 데이터만 서버로 전송할 수 있습니다.

1. JSON 데이터 생성하기

먼저, 폼의 입력 값을 JSON 데이터 형식으로 생성해야 합니다. 예를 들어, 사용자가 이름과 이메일 주소를 입력하는 폼이 있다고 가정해봅시다. 다음과 같이 JSON 데이터를 생성할 수 있습니다.

let formData = {
  name: document.getElementById('name').value,
  email: document.getElementById('email').value,
};

위의 코드에서 name과 email은 각각 입력 필드의 아이디입니다. 이후에 이 데이터를 폼 유효성 검사에 사용할 것입니다.

2. 유효성 검사 함수 작성하기

이제 폼 데이터의 유효성을 검사하는 함수를 작성해야 합니다. 아래의 예시 코드는 간단한 유효성 검사를 수행하는 함수입니다.

function validateForm(formData) {
  // 이름이 비어 있는지 확인하기
  if (formData.name.trim() === '') {
    return false;
  }

  // 이메일 형식이 올바른지 확인하기
  const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (!emailRegex.test(formData.email)) {
    return false;
  }

  return true;
}

위의 코드에서는 name이 빈 문자열인지 확인하고, email이 올바른 형식인지 정규식으로 검사합니다. 유효성 검사에 통과하지 못한 경우 false를 반환하고, 그렇지 않으면 true를 반환합니다.

3. 폼 제출 이벤트에 유효성 검사 적용하기

마지막 단계로, 폼을 제출할 때 유효성 검사 함수를 호출하여 데이터가 올바른지 확인해야 합니다. 이를 위해 HTML 폼 제출 이벤트에 이벤트 리스너를 추가하고, 유효성 검사 함수를 호출하는 코드를 작성합니다.

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 폼 제출 이벤트 기본 동작 방지

  let formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
  };

  if (validateForm(formData)) {
    // 유효성 검사를 통과한 경우 폼 제출
    document.getElementById('myForm').submit();
  } else {
    // 유효성 검사를 통과하지 못한 경우 오류 메시지 표시
    document.getElementById('error-msg').innerHTML = '올바른 이름과 이메일 주소를 입력하세요.';
  }
});

위의 코드에서 myForm은 폼의 아이디, error-msg는 오류 메시지를 표시할 요소입니다. 이벤트 리스너 함수에서는 preventDefault() 메서드를 호출하여 폼 제출 이벤트의 기본 동작을 방지하고, 유효성 검사 함수를 호출합니다. 유효성 검사에 통과한 경우에만 폼을 제출하고, 그렇지 않으면 오류 메시지를 표시합니다.

마치며

위의 예시를 통해 자바스크립트와 JSON 데이터를 이용하여 폼의 유효성을 검사하는 방법을 알아보았습니다. 유효성 검사는 사용자가 제출한 데이터의 정확성과 안정성을 보장하기 위해 중요한 부분입니다. 이를 통해 필요한 데이터만 서버로 전송하고, 사용자 경험을 향상시킬 수 있습니다.

#javascript #JSON #폼유효성검사