React · Validation

폼 유효성 검사의 단계

폼 검증은 submit 직전에 한 번 막는 코드가 아니라, 필드 단위 오류와 서버 응답 오류를 사용자가 수정 가능한 정보로 바꾸는 과정이다.

01

규칙 정의

필드별 sync validation과 서버 확인이 필요한 규칙을 분리한다.

02

검증 실행

blur, change, submit 중 사용자 경험에 맞는 시점을 고른다.

03

오류 저장

field name을 key로 오류 메시지와 상태를 보관한다.

04

제출 차단

클라이언트 오류가 있으면 요청을 보내지 않고 첫 오류로 안내한다.

required
비어 있음 trim 여부와 0, false 같은 값의 의미를 구분
필드 타입별 기준
format
형식 오류 email, URL, 전화번호 등 입력 규칙
과한 정규식은 사용자 차단 가능
match
필드 간 관계 비밀번호 확인, 시작일/종료일 비교
둘 중 하나 변경 시 재검증
server
원격 판정 중복 계정, 초대 코드, 정책 위반
pending 표시 필요

접근성 · 초점 · 중복 요청 점검

접근성 오류 메시지가 input과 aria-describedby로 연결된다.
초점 제출 실패 시 첫 오류 필드로 이동할 수 있다.
중복 요청 검증 중 제출 버튼이 반복 요청을 만들지 않는다.
서버 오류 클라이언트 검증을 통과해도 서버 오류를 필드에 다시 매핑한다.