웹 프로젝트 기초집LESSON 14

폼 검증: 문의 입력을 안전하게 확인하기

난이도초급

예상 시간45분

선수지식13강 필터와 정렬

14강. 폼 검증: 문의 입력을 안전하게 확인하기

1. 이번 강의에서 해결할 문제

연락처 영역은 있지만 빈 이름이나 잘못된 이메일도 제출됩니다. 브라우저 기본 검증을 먼저 사용하고 이 정적 과정에서는 실제 전송을 막습니다.

2. 학습 목표

3. 핵심 개념

HTML 제약 검증은 빠른 사용자 피드백이지 보안 검증이 아닙니다. 실제 전송 서버가 생기면 서버에서도 모든 값을 다시 검증해야 합니다. 이 과정은 preventDefault()로 네트워크 전송을 막고 입력 내용도 저장하지 않습니다.

4. 단계별 실습

HTML · 연락처 섹션 내부

game-dev-portfolio/index.html
<form id="contactForm">
  <label for="contactName">이름</label>
  <input id="contactName" name="name" required maxlength="40" />
  <label for="contactEmail">이메일</label>
  <input id="contactEmail" name="email" type="email" required maxlength="120" />
  <label for="contactMessage">문의 내용</label>
  <textarea id="contactMessage" name="message" required minlength="10" maxlength="1000"></textarea>
  <button type="submit">입력 확인</button>
  <p id="formStatus" aria-live="polite"></p>
</form>

JavaScript · 파일 경로: js/app.js

game-dev-portfolio/js/app.js
const contactForm = document.querySelector('#contactForm');
const formStatus = document.querySelector('#formStatus');

contactForm.addEventListener('submit', (event) => {
  event.preventDefault();
  if (!contactForm.reportValidity()) {
    formStatus.textContent = '필수 입력과 이메일 형식을 확인해 주세요.';
    return;
  }
  formStatus.textContent = '입력 형식을 확인했습니다. 학습용 정적 사이트라 실제 전송은 하지 않습니다.';
});

개발자 도구 확인: 빈 값, abc, 올바른 이메일을 차례로 제출합니다. Network에 문의 요청이 생기지 않아야 하고 Elements에서 label의 for와 input의 id가 맞아야 합니다.

5. 코드가 동작하는 이유

입력 타입과 제약 속성을 브라우저가 검사하고 reportValidity()가 오류를 표시합니다. preventDefault()는 폼의 실제 제출을 막습니다. aria-live는 바뀐 결과 문구를 보조 기술에 알립니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ