웹기초 폼 검증 기초

사용자 입력 데이터가 서버로 전송되기 전 수행하는 폼 검증(Form Validation)에 대해 정리했다.

잘못된 데이터가 서버에 부하를 주거나 보안 문제를 야기하지 않도록 브라우저에서 차단하는 과정은 시스템 안정성의 핵심이다.

자바스크립트 기반 검증 로직

HTML5의 기본 속성 외에 정교한 검증을 위해 자바스크립트를 활용했다.

const form = document.querySelector('#signup-form');

form.addEventListener('submit', (e) => {
    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;

    // 1. 이메일 형식 검증: 정규표현식 활용
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('유효한 이메일 주소를 입력해주세요.');
        e.preventDefault(); // 전송 중단
        return;
    }

    // 2. 비밀번호 보안성 검증: 최소 길이 확인
    if (password.length < 8) {
        alert('비밀번호는 최소 8자 이상이어야 합니다.');
        e.preventDefault();
        return;
    }
});

폼 검증 주요 항목

• 필수 입력: 필수 항목의 누락 여부를 확인한다.
• 데이터 형식: 이메일, 전화번호 등이 정해진 규칙을 준수하는지 확인한다.
• 길이 제한: 보안 및 시스템 부하를 고려하여 적정 길이를 체크한다.
• 데이터 일치: 비밀번호 재확인 등 두 값이 일치하는지 확인한다.

시스템 효율 및 신뢰도 향상

오류 발생 시 수정 방법을 안내하는 피드백 제공이 중요하다.

브라우저에서 즉각적으로 오류를 탐지하면 사용자의 대기 시간을 단축하고 서버는 정제된 데이터만 수신하게 되어 시스템 효율이 향상된다.

검증 로직은 서비스의 완성도를 결정하는 요소인 것 같다.

웨이호프