HTML Form 유효성 검사

HTML5 폼 유효성 검사는 JavaScript 없이도 기본적인 입력값 검증을 제공합니다. 브라우저 내장 기능을 활용하면 사용자 경험을 향상시키고 서버 부하를 줄일 수 있습니다.

언제 사용하나요?

• 회원가입/로그인 폼 필수값 검증


• 이메일, 전화번호 형식 검증


• 비밀번호 최소 길이 검증


• JavaScript 의존성 최소화

필수 입력 (required)

<form>
    <input type="text" name="name" required
           placeholder="이름을 입력하세요">
    
    <select name="city" required>
        <option value="">도시 선택</option>
        <option value="seoul">서울</option>
    </select>
    
    <input type="checkbox" name="agree" required>
    <label>이용약관 동의</label>
    
    <button type="submit">제출</button>
</form>

입력 타입별 검증

<!-- 이메일 형식 -->
<input type="email" name="email" required>

<!-- URL 형식 -->
<input type="url" name="website">

<!-- 전화번호 -->
<input type="tel" name="phone"
       pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}">

<!-- 숫자만 -->
<input type="number" name="age" min="1" max="150">

<!-- 날짜 -->
<input type="date" name="birthdate"
       min="1900-01-01" max="2024-12-31">

길이/범위 제한

<!-- 문자열 길이 -->
<input type="text" name="username"
       minlength="4" maxlength="20">

<!-- 비밀번호 -->
<input type="password" name="password"
       minlength="8" maxlength="50" required>

<!-- 숫자 범위 -->
<input type="number" name="quantity"
       min="1" max="100" step="1">

<!-- 텍스트영역 -->
<textarea name="content" 
          minlength="10" maxlength="1000"></textarea>

패턴 검증 (정규식)

<!-- 한글만 -->
<input type="text" name="koreanName"
       pattern="[가-힣]+"
       title="한글만 입력 가능합니다">

<!-- 영문+숫자 -->
<input type="text" name="userId"
       pattern="[a-zA-Z0-9]{4,20}"
       title="영문, 숫자 4-20자">

<!-- 비밀번호 복잡도 -->
<input type="password" name="password"
       pattern="(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

<!-- 휴대폰 번호 -->
<input type="tel" name="phone"
       pattern="01[016789]-?[0-9]{3,4}-?[0-9]{4}">

<!-- 우편번호 -->
<input type="text" name="zipcode"
       pattern="[0-9]{5}">

CSS로 상태 스타일링

<style>
/* 유효한 입력 */
input:valid {
    border-color: #2ecc71;
}

/* 유효하지 않은 입력 */
input:invalid {
    border-color: #e74c3c;
}

/* 필수 필드 */
input:required {
    border-left: 3px solid #3498db;
}

/* 포커스 후 유효하지 않은 경우 */
input:focus:invalid {
    background: #fff5f5;
}
</style>

JavaScript 유효성 API

<script>
const form = document.querySelector("form");
const email = document.querySelector("[name=email]");

// 개별 필드 검사
if (email.validity.valid) {
    console.log("유효함");
}

// 상세 상태
email.validity.valueMissing   // 필수값 미입력
email.validity.typeMismatch   // 타입 불일치
email.validity.patternMismatch // 패턴 불일치
email.validity.tooShort       // 최소 길이 미달
email.validity.tooLong        // 최대 길이 초과
email.validity.rangeUnderflow // min 미달
email.validity.rangeOverflow  // max 초과

// 폼 전체 검사
form.addEventListener("submit", (e) => {
    if (!form.checkValidity()) {
        e.preventDefault();
        form.reportValidity();
    }
});
</script>

커스텀 에러 메시지

const input = document.querySelector("[name=email]");
input.addEventListener("invalid", (e) => {
    if (e.target.validity.valueMissing) {
        e.target.setCustomValidity("이메일을 입력해주세요");
    }
});
input.addEventListener("input", (e) => {
    e.target.setCustomValidity("");
});

novalidate 속성

<!-- 브라우저 기본 검증 비활성화 (JS 검증 시) -->
<form novalidate>...</form>

주의사항

• 클라이언트 검증만으로 불충분 - 서버 검증 필수


• 브라우저마다 에러 메시지 스타일 다름


• 복잡한 검증은 JavaScript 필요