폼 검증

개념 이해하기

required, minlength, pattern, min, max는 제출 전에 잘못된 입력을 찾는 제약 조건입니다. checkValidity는 유효 여부를 반환하고 reportValidity는 안내 UI를 표시합니다. 브라우저 검증은 사용자 편의 기능이며 요청을 조작할 수 있으므로 서버에서도 같은 규칙을 반드시 다시 검사해야 합니다.

예제에서는 input.checkValidity(); form.reportValidity(); 부분부터 찾으세요. 태그 이름만 외우기보다 부모·자식 관계와 속성이 어느 요소에 붙는지를 한 덩어리로 읽으면 구조를 고치기 쉬워집니다.

먼저 현재 결과를 확인한 뒤 이메일 형식과 비밀번호 길이를 각각 틀리게 입력해 어떤 제약이 실패하는지 확인하세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.