JavaScript로 폼 유효성 검사하는 법｜기초 문법부터 실전 예제까지

✔️ JavaScript로 폼 유효성 검사하는 법｜기초 문법부터 실전 예제까지

안녕하세요, 퍼블리셔 노미입니다 :)
HTML과 CSS로 멋진 입력 폼을 만들었다면, 이제는 사용자가 정확하게 입력했는지 확인하는 작업이 필요해요.

예를 들어, 이메일 형식이 맞지 않거나, 비밀번호가 너무 짧을 때 그냥 제출되면 안 되겠죠?
이런 문제를 해결하기 위해 사용하는 게 바로 JavaScript 유효성 검사입니다.
오늘은 JavaScript 기초 문법부터 실전 예제, UX 고려사항까지 차근차근 설명해드릴게요.

---

📌 유효성 검사란?

유효성 검사(Validation)는 사용자가 입력한 값이 올바른 형식인지 확인하는 과정입니다.
서버에서 검사하기 전에 클라이언트(브라우저)에서 빠르게 확인할 수 있어 사용자 경험을 개선할 수 있어요.

• 이메일 형식이 맞는지?
• 비밀번호가 최소 글자 수 이상인지?
• 필수 항목을 다 입력했는지?

---

🔰 기본 구조 – 이벤트 + 조건문

JavaScript 유효성 검사는 보통 폼 제출 이벤트를 가로채서 조건에 따라 오류 메시지를 출력하는 방식으로 작동해요.

<form id="myForm">
  <input type="text" id="username">
  <button type="submit">제출</button>
</form>

<script>
  const form = document.getElementById("myForm");

  form.addEventListener("submit", function(e) {
    const username = document.getElementById("username").value;

    if (username === "") {
      alert("아이디를 입력하세요!");
      e.preventDefault(); // 제출 막기
    }
  });
</script>

---

🧪 자주 사용하는 검사 항목들

1️⃣ 빈 값인지 확인

if (input.value.trim() === "")

2️⃣ 이메일 형식 검사

const email = document.getElementById("email").value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!regex.test(email)) {
  alert("올바른 이메일 형식이 아닙니다.");
}

3️⃣ 비밀번호 길이 검사

if (password.length < 8) {
  alert("비밀번호는 최소 8자 이상이어야 합니다.");
}

4️⃣ 비밀번호 확인 일치 여부

if (password !== passwordCheck) {
  alert("비밀번호가 일치하지 않습니다.");
}

---

📋 실전 예제: 회원가입 폼 검사

<form id="signupForm">
  <input type="text" id="username" placeholder="아이디">
  <input type="email" id="email" placeholder="이메일">
  <input type="password" id="password" placeholder="비밀번호">
  <input type="password" id="password2" placeholder="비밀번호 확인">
  <button type="submit">가입하기</button>
</form>

<script>
document.getElementById("signupForm").addEventListener("submit", function(e) {
  const username = document.getElementById("username").value.trim();
  const email = document.getElementById("email").value.trim();
  const password = document.getElementById("password").value;
  const password2 = document.getElementById("password2").value;

  if (username === "" || email === "" || password === "" || password2 === "") {
    alert("모든 항목을 입력해주세요.");
    e.preventDefault();
    return;
  }

  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(email)) {
    alert("이메일 형식이 올바르지 않습니다.");
    e.preventDefault();
    return;
  }

  if (password.length < 8) {
    alert("비밀번호는 8자 이상이어야 합니다.");
    e.preventDefault();
    return;
  }

  if (password !== password2) {
    alert("비밀번호가 일치하지 않습니다.");
    e.preventDefault();
    return;
  }
});
</script>

---

💡 UX를 위한 팁

• alert 대신 폼 아래에 메시지 출력이 더 자연스러움
• 입력 중간에 실시간 체크하면 더 친절한 UX
• focus() 메서드로 오류 필드로 이동 가능

document.getElementById("email").focus();

---

✨ 실시간 이메일 검사 예제

const emailInput = document.getElementById("email");
const feedback = document.getElementById("emailFeedback");

emailInput.addEventListener("input", function() {
  const email = emailInput.value;
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!regex.test(email)) {
    feedback.textContent = "이메일 형식이 올바르지 않습니다.";
    feedback.style.color = "red";
  } else {
    feedback.textContent = "사용 가능한 이메일입니다.";
    feedback.style.color = "green";
  }
});

→ 실시간 피드백은 UX를 크게 향상시킵니다.

---

📌 기본 HTML5 검사도 활용 가능!

HTML5 자체 기능으로도 간단한 유효성 검사를 할 수 있어요.

<input type="email" required placeholder="이메일 입력">

• required – 필수 입력
• type="email" – 자동 형식 검사
• minlength, maxlength – 글자 수 제한

---

📚 마무리하며

유효성 검사는 입력 폼을 사용자 친화적이고 안전하게 만들어주는 필수 요소입니다.
오늘 배운 JavaScript의 기초 문법과 검사 패턴을 이해하면 다양한 폼에 적용해볼 수 있어요!

다음 글에서는 폼 데이터를 백엔드로 전송하기 위한 fetch API 실습이나 AJAX를 활용한 비동기 폼 처리까지 실전 중심으로 이어갈게요.

---

#폼유효성검사 #JavaScript입력검사 #웹UX개선 #실시간검사 #폼UX #웹퍼블리싱실전 #프론트엔드입문 #폼제출방지 #퍼블리셔노미