[JavaScript] form 입력값 검증하는 방법 (submit 전에 체크하기)

웹 개발에서 가장 중요한 기능 중 하나는 사용자 입력값을 검증하는 것입니다. 사용자가 잘못된 정보를 제출하면 데이터 오류가 발생하거나, 보안 문제로 이어질 수 있습니다. JavaScript를 사용하면 폼(form) 제출 전에 입력값을 실시간으로 검증할 수 있어, 사용자 경험을 높이고 서버의 부담도 줄일 수 있습니다. 이번 포스팅에서는 JavaScript로 form 입력값을 검증하는 기본 원리부터 실전 예제까지 상세하게 설명하겠습니다.

form 입력값 검증하는 방법 (submit 전에 체크하기)

---

1. 기본 개념: 폼 검증이란?

1. 폼 검증(Form Validation)의 목적

• 사용자가 필수 입력을 누락하지 않았는지 확인
• 입력값의 형식이 올바른지 체크 (예: 이메일, 전화번호)
• 악성 코드 입력 방지 및 보안 강화

2. 검증 시점

• 실시간 검증: 사용자가 입력하는 도중 체크
• 제출 전 검증: submit 이벤트 발생 직전 체크

---

2. 기본 문법과 이벤트 사용법

1. form 요소 가져오기

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

2. JavaScript로 submit 이벤트 제어

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

  if (username.trim() === "") {
    alert("이름을 입력해주세요.");
    e.preventDefault();  // 제출 막기
  }
});

실행 결과 (브라우저)

• 이름 입력 없이 제출 시 alert() 발생 → 제출되지 않음

---

3. 다양한 입력값 검증 예제

1. 이메일 형식 확인

const email = document.getElementById("email").value;
const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

if (!emailRegex.test(email)) {
  alert("올바른 이메일 형식을 입력하세요.");
  e.preventDefault();
}

2. 비밀번호 확인 일치 여부

const pw = document.getElementById("password").value;
const pw2 = document.getElementById("confirmPassword").value;

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

3. 체크박스 선택 여부 확인

const agree = document.getElementById("agree").checked;
if (!agree) {
  alert("약관에 동의해주세요.");
  e.preventDefault();
}

 

---

4. 실전 예제: 회원가입 폼 검증하기

<form id="signupForm">
  <input type="text" id="email" placeholder="이메일" />
  <input type="password" id="pw" placeholder="비밀번호" />
  <input type="password" id="pw2" placeholder="비밀번호 확인" />
  <label><input type="checkbox" id="agree" /> 이용약관 동의</label>
  <button type="submit">가입하기</button>
</form>

document.getElementById("signupForm").addEventListener("submit", function(e) {
  const email = document.getElementById("email").value;
  const pw = document.getElementById("pw").value;
  const pw2 = document.getElementById("pw2").value;
  const agree = document.getElementById("agree").checked;

  const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

  if (!emailRegex.test(email)) {
    alert("유효한 이메일 주소를 입력하세요.");
    e.preventDefault();
    return;
  }
  if (pw.length < 6) {
    alert("비밀번호는 최소 6자 이상이어야 합니다.");
    e.preventDefault();
    return;
  }
  if (pw !== pw2) {
    alert("비밀번호가 일치하지 않습니다.");
    e.preventDefault();
    return;
  }
  if (!agree) {
    alert("약관에 동의해야 가입할 수 있습니다.");
    e.preventDefault();
  }
});

실행 결과

• 항목별로 조건 만족하지 않으면 alert 표시되고 제출 차단됨

---

5. 추가 팁 및 참고 사항

• required, pattern 등의 HTML 속성을 함께 사용하면 간단한 검증은 HTML로도 가능

<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

• 실시간 검증에는 input, blur 이벤트를 활용
• 유효성 검사는 항상 서버 측에서도 반드시 병행해야 함

---

6. 요약 및 마무리

이번 포스팅에서는 JavaScript를 사용해 form 입력값을 검증하는 다양한 방법을 살펴보았습니다. submit 이벤트를 가로채고, 각 입력 요소에 접근하여 조건을 검사하고, 필요시 e.preventDefault()로 제출을 막는 방식이 핵심입니다. 실시간 검증을 추가하면 사용자 경험도 좋아집니다. 하지만 클라이언트 검증은 어디까지나 보조 수단일 뿐, 서버 측에서도 꼭 검증을 진행해야 안전한 웹 서비스를 만들 수 있습니다.

---

7. 관련 글 링크

• 관련 글: JavaScript의 이벤트 리스너 (Event Listener) 사용법과 오류 해결 방법