유효성 검사 상태

분류: 폼 요소

입력 값의 유효/무효 검증 결과를 시각적으로 표시하는 예제입니다. .is-valid/.is-invalid를 .form-control에 추가하면 각각 초록/빨강 테두리와 아이콘으로 상태가 강조되고, .invalid-feedback으로 오류 메시지를 함께 보여줄 수 있습니다. 강조 색상을 옅게 표시하고 싶다면 .is-valid-lite/.is-invalid-lite를 추가로 붙입니다.

소스

<div class="mb-3">
    <label class="form-label">유효성 검사 상태</label>
    <input type="text" class="form-control is-valid mb-2" placeholder="유효한 상태..">
    <input type="text" class="form-control is-invalid" placeholder="유효하지 않은 상태..">
    <div class="invalid-feedback">잘못된 입력입니다.</div>
</div>

<div class="mb-3">
    <label class="form-label">유효성 검사 상태 (라이트)</label>
    <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="유효한 상태..">
    <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="유효하지 않은 상태..">
</div>

사용된 주요 클래스

클래스	역할
form-control	텍스트 입력의 기본 스타일
form-label	입력 필드 위에 붙는 라벨 텍스트 스타일
invalid-feedback	.is-invalid 입력 아래 표시되는 오류 메시지
is-invalid	입력을 유효하지 않은 상태(빨강 테두리·아이콘)로 표시
is-invalid-lite	유효하지 않은 상태를 옅은 색상으로 표시
is-valid	입력을 유효한 상태(초록 테두리·아이콘)로 표시
is-valid-lite	유효한 상태를 옅은 색상으로 표시
mb-2, mb-3	요소 사이 아래쪽 여백(margin-bottom)

참고 자료

• Validation states

실전 예제 페이지

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-유효성-검사-상태.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗