jQuery 폼 검증(Form Validation)

✅ 폼 검증(Form Validation)

사용자가 제출하는 폼 입력값을 검증하는 것은 매우 중요한 작업입니다.
jQuery를 이용하면 짧은 코드로 간단하고 강력한 검증 로직을 만들 수 있습니다.

📋 1. 예제: 기본 HTML 폼

<form id="signupForm">
  이름: <input type="text" id="name"><br><br>
  이메일: <input type="text" id="email"><br><br>
  비밀번호: <input type="password" id="password"><br><br>
  <button type="submit">가입하기</button>
</form>

<div id="error" style="color:red; margin-top:10px;"></div>
  

🧠 2. jQuery를 이용한 유효성 검사

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

<script>
$(document).ready(function() {
  $("#signupForm").submit(function(e) {
    e.preventDefault(); // 기본 제출 방지

    var name = $("#name").val().trim();
    var email = $("#email").val().trim();
    var password = $("#password").val().trim();
    var errorMsg = "";

    // 이름 확인
    if (name === "") {
      errorMsg += "이름을 입력하세요.<br>";
    }

    // 이메일 형식 확인
    var emailRegex = /^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$/;
    if (!emailRegex.test(email)) {
      errorMsg += "올바른 이메일 주소를 입력하세요.<br>";
    }

    // 비밀번호 길이 확인
    if (password.length < 6) {
      errorMsg += "비밀번호는 6자 이상이어야 합니다.<br>";
    }

    if (errorMsg !== "") {
      $("#error").html(errorMsg);
    } else {
      $("#error").html("");
      alert("회원가입 성공!");
      // 여기에 실제 전송 코드 또는 처리 로직을 추가할 수 있음
    }
  });
});
</script>
  

✨ 3. 주요 포인트

• e.preventDefault(): 폼이 실제로 제출되는 것을 막음
• trim(): 입력값 공백 제거
• 정규 표현식으로 이메일 형식 체크
• 비밀번호 길이 등 다양한 조건 추가 가능

💡 팁: jQuery Validation 플러그인

직접 작성하는 대신 jQuery Validation 플러그인을 사용하면 더 강력하고 유연한 검증이 가능합니다.