[javascript] jQuery를 사용하여 프로필과 회원 가입 폼 구현하기

01 Dec 2023

javascript

회원 가입 폼을 구현하는데 jQuery를 사용하면 사용자 경험을 향상시킬 수 있습니다. 이번 포스트에서는 jQuery를 사용하여 프로필과 회원 가입 폼을 구현하는 방법을 알아보겠습니다.

시작하기 전에

이 예제는 jQuery를 사용하여 프로필과 회원 가입 폼을 만드는 방법을 설명합니다. jQuery를 사용하기 위해서는 먼저 프로젝트에 jQuery를 추가해야 합니다. 다음은 jQuery를 포함하는 방법입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

위의 코드를 HTML 파일의 <head> 태그 안에 추가하면 jQuery를 사용할 수 있습니다.

프로필 폼 구현하기

HTML 마크업

프로필 작성을 위한 HTML 마크업을 작성합니다. 예를 들어, 이름과 이메일을 입력하는 폼을 만들어보겠습니다.

<form id="profileForm">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name"><br>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email"><br>

  <input type="submit" value="저장">
</form>

이벤트 핸들러 추가

jQuery를 사용하여 프로필 폼의 제출 이벤트를 처리할 수 있습니다. 이벤트 핸들러를 추가해보겠습니다.

$(document).ready(function() {
  $('#profileForm').submit(function(event) {
    event.preventDefault(); // 기본 동작 취소

    // 폼 데이터 가져오기
    var name = $('#name').val();
    var email = $('#email').val();

    // 데이터 처리 로직 추가

    // 저장 완료 알림
    alert("프로필이 저장되었습니다.");
  });
});

실행하기

이제 프로필 폼을 실행해보세요. 폼을 작성하고 제출하면 “프로필이 저장되었습니다.” 라는 알림이 표시됩니다.

회원 가입 폼 구현하기

회원 가입 폼도 마찬가지로 jQuery를 사용하여 구현할 수 있습니다. 여기서는 아이디, 비밀번호 및 확인용 비밀번호를 입력하는 폼을 만들어보겠습니다.

HTML 마크업

회원 가입을 위한 HTML 마크업을 작성합니다.

<form id="signupForm">
  <label for="username">아이디:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password"><br>

  <label for="confirmPassword">비밀번호 확인:</label>
  <input type="password" id="confirmPassword" name="confirmPassword"><br>

  <input type="submit" value="가입">
</form>

이벤트 핸들러 추가

jQuery를 사용하여 회원 가입 폼의 제출 이벤트를 처리할 수 있습니다. 이벤트 핸들러를 추가해보겠습니다.

$(document).ready(function() {
  $('#signupForm').submit(function(event) {
    event.preventDefault(); // 기본 동작 취소

    // 폼 데이터 가져오기
    var username = $('#username').val();
    var password = $('#password').val();
    var confirmPassword = $('#confirmPassword').val();

    // 데이터 유효성 검사
    if (password !== confirmPassword) {
      alert("비밀번호가 일치하지 않습니다.");
    } else {
      // 데이터 처리 로직 추가

      // 가입 완료 알림
      alert("회원 가입이 완료되었습니다.");
    }
  });
});

실행하기

이제 회원 가입 폼을 실행해보세요. 폼을 작성하고 제출하면 비밀번호가 일치하지 않을 경우 “비밀번호가 일치하지 않습니다.”라는 알림이 표시되며, 일치할 경우 “회원 가입이 완료되었습니다.” 라는 알림이 표시됩니다.

마치며

이번 포스트에서는 jQuery를 사용하여 프로필과 회원 가입 폼을 구현하는 방법을 알아보았습니다. jQuery는 HTML 요소를 쉽게 조작할 수 있는 강력한 도구입니다. 프로젝트에 jQuery를 추가하고 이벤트 핸들러를 사용하여 웹 어플리케이션의 사용자 경험을 향상시켜보세요.