← 목록으로

폼 유효성 검사 피드백 흐름

폼 검증 타이밍과 피드백 상태를 시각화합니다

검증 타이밍 전략

실시간 검증 (On Change)
사용자가 입력할 때마다 즉시 검증을 수행합니다.
적합: 비밀번호 강도, 포맷 힌트, 글자 수 제한
주의: 비용이 큰 검증은 디바운스 적용
🎯
필드 이탈 (On Blur)
필드에서 포커스가 벗어날 때 검증을 수행합니다.
적합: 대부분의 입력 필드, 덜 방해적
장점: 입력 완료 후 검증, 사용자 친화적
🚀
제출 시 (On Submit)
폼 제출 버튼 클릭 시 모든 필드를 검증합니다.
적합: 최종 검증, 모든 오류 한 번에 표시
주의: 첫 번째 오류 필드로 자동 포커스
필드 상태 흐름
1. Untouched
초기 상태
피드백 없음
2. Touched
포커스됨
요구사항 표시
3. Validating
검증 중
스피너 표시
4. Valid
검증 통과
체크 아이콘
5. Invalid
검증 실패
오류 메시지
인터랙티브 데모
검증 모드 선택
오류 목록:

    디자인 프롬프트