[javascript] jQuery를 사용하여 폼 및 입력 유효성 검사 구현하기

01 Dec 2023

javascript

웹 개발에서 폼과 입력 유효성 검사는 매우 중요한 요소입니다. 이는 사용자로부터 올바른 데이터를 수집하고 처리하기 위해 필요한 작업입니다. 이번 블로그 포스트에서는 jQuery를 사용하여 폼과 입력 유효성 검사를 구현하는 방법을 알아보겠습니다.

1. jQuery 라이브러리 추가하기

먼저, HTML 문서에 jQuery 라이브러리를 추가해야 합니다. 아래의 코드를 <head> 태그 안에 추가합니다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. 폼 유효성 검사하기

2.1. 폼 제출 이벤트 처리하기

폼 제출 이벤트를 처리하기 위해 jQuery의 submit() 메소드를 사용합니다. 아래의 코드는 폼이 제출될 때 호출되는 함수를 정의한 예시입니다.

$(document).ready(function() {
  $('form').submit(function(event) {
    // 폼 유효성 검사 및 데이터 처리 로직을 여기에 추가합니다.
    // 만약 폼이 유효하지 않으면 폼 제출을 막아야 합니다.
  });
});

2.2. 입력 필드 유효성 검사하기

각 입력 필드의 유효성 검사를 위해 blur() 메소드를 사용할 수 있습니다. 이는 입력 필드에서 포커스가 벗어날 때 호출되는 이벤트입니다. 아래의 코드는 입력 필드에서 유효성 검사를 수행하는 예시입니다.

$(document).ready(function() {
  $('input[type="text"]').blur(function() {
    var value = $(this).val();
    // 유효성 검사 로직을 여기에 추가합니다.
  });
});

2.3. 유효성 검사 결과 처리하기

폼과 입력 필드의 유효성 검사 결과를 처리하는 방법은 다양합니다. 예를 들어, 입력이 유효하지 않을 경우 메시지를 표시하거나 입력 필드의 스타일을 변경할 수 있습니다. 아래의 코드는 유효성 검사 결과에 따라 메시지를 출력하는 예시입니다.

$(document).ready(function() {
  $('input[type="text"]').blur(function() {
    var value = $(this).val();
    if (value === '') {
      $(this).next('.error-message').text('필수 입력 항목입니다.');
    } else {
      $(this).next('.error-message').empty();
    }
  });
});

3. 예시 폼 구현하기

위에서 배운 내용을 바탕으로 예시 폼을 구현해보겠습니다. 아래의 코드는 이름과 이메일 주소를 입력받는 간단한 폼입니다.

<form id="example-form">
  <div>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <span class="error-message"></span>
  </div>
  
  <div>
    <label for="email">이메일:</label>
    <input type="text" id="email" name="email">
    <span class="error-message"></span>
  </div>
  
  <button type="submit">제출</button>
</form>

위의 폼을 구현한 코드와 함께 앞에서 작성한 jQuery 코드를 <script> 태그 안에 추가합니다. 이렇게 하면 폼 유효성 검사가 구현됩니다.

마무리

이번 포스트에서는 jQuery를 사용하여 폼과 입력 유효성 검사를 구현하는 방법을 알아보았습니다. 이러한 유효성 검사는 사용자의 입력을 제대로 처리하고 오류를 방지하는 데 도움이 됩니다. jQuery를 활용하여 다양한 폼 및 입력 유효성 검사를 구현해보세요.