HTML은 attribute를 통해 내장 유효성 검사를 제공하여, 브라우저가 유효하지 않은 제출을 막고 메시지를 표시합니다. JavaScript가 필요 없습니다.
html
Submit
HTML은 attribute를 통해 내장 유효성 검사를 제공하여, 브라우저가 유효하지 않은 제출을 막고 메시지를 표시합니다. JavaScript가 필요 없습니다.
Submit
유효성 검사 attribute: required, min/max, minlength/maxlength, pattern(정규식), 그리고 타입 자체(email, url, number)입니다. 제출 시 브라우저가 이를 검사하여, 하나라도 실패하면 제출을 중단하고 첫 번째 유효하지 않은 필드에 네이티브 말풍선을 표시합니다.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* 사용자가 상호작용한 이후에만 — 더 나은 UX */
JavaScript에서 유효성 검사를 읽고 커스터마이즈할 수 있습니다.
const input = document.querySelector("input");
input.validity.valueMissing; // required인데 비어 있으면 true
input.validity.typeMismatch; // email/url 형식이 틀리면 true
input.checkValidity(); // boolean 반환, invalid 이벤트 발생
input.setCustomValidity("Passwords don't match"); // 커스텀 오류 메시지
setCustomValidity는 attribute로 표현할 수 없는 규칙(예: "비밀번호 확인 일치")을 추가하게 해줍니다.
<form novalidate>...</form> <!-- 네이티브 유효성 검사 건너뛰기 (JS에서 처리) -->
항상 서버에서도 유효성 검사하십시오. 클라이언트 유효성 검사는 UX를 위한 것이며, 사용자는 이를 우회할 수 있습니다.
네이티브 유효성 검사는 접근성 있고 현지화된 오류 메시지와 즉각적인 피드백을 무료로 제공합니다.
선언적 attribute와 Constraint Validation API를 결합해 커스텀 규칙을 만드십시오. 다만 이를 유일한 방어선으로 신뢰해서는 안 됩니다. 서버도 반드시 유효성 검사를 해야 합니다.