사용자 입력값 검증

H:Dev+에서는 입력 폼에서 사용자의 데이터를 안전하고 일관되게 처리하기 위해 입력값 검증(Validation) 기능을 제공합니다.
입력 필드에 검증 속성을 정의하고, 유효성 조건에 따라 실시간 또는 제출 시 검사를 수행할 수 있습니다.

입력값 검증 흐름

다음 단계를 따라 입력값 검증을 구성할 수 있습니다:

  1. 검증할 데이터에 대한 Validation 패턴 확인
  2. data-validation 속성으로 검증 패턴 설정
  3. data-validation-type 속성으로 실시간 치환 여부 설정 (선택적)
  4. Checkbox의 경우 data-validation-limit으로 선택 수 제한 설정

Validation 패턴

패턴 명Value
phone-auto-hyphen'-'하이픈이 포함된 전화번호 형식Replace 사용 가능
phone숫자로된 전화번호 형식Replace 사용 가능
phone-compact지역번호 등의 앞번호를 제외한 0000-0000 형식의 전화번호Replace 사용 가능
email이메일Replace 사용 가능
domainhttp 또는 https를 포함한 도메인
password-8-32숫자, 영문, 특수문자(?=.*[~!@#$%^*()+-=[]{};:?.,_)형식의 8-32자 형식Replace 사용 가능
password-4-8숫자, 영문, 특수문자(?=.*[~!@#$%^*()+-=[]{};:?.,_)형식의 4-8자 형식Replace 사용 가능
number숫자Replace 사용 가능
number-alphabet숫자 + 알파벳Replace 사용 가능
number-alphabet-underscore숫자 + 알파벳 + 언더바('_')Replace 사용 가능
not-empty입력 필수
ip-v4ip v4 형식(000.000.000.000)의 IP addressReplace 사용 가능
check-limit'data-validation-limit'속성을 통해 설정된 Checkbox의 최소, 최대 선택 수 검증
radio-checkRadio 버튼의 선택여부 검증

HTML attributes

Tag : <form>

NameValueDescription
data-validation-alertyes 또는 미정의입력 값 검증 오류시 alert 으로 표시
- data-validation-alert 속성은 게시물 작성, 회원가입, 웹 폼에만 해당됩니다.

Tag : <input>

NameValueDescription
data-validationValidation 패턴상기 Validation 패턴 색션 참조
data-validation-typereplace 또는 미정의Replace가 가능한 패턴일 경우 입력 값을 해당 패턴 형식으로 replace
data-invalid-messageString입력값 검증에 실패시 표시할 메세지

Tag : <div> (Checkbox 그룹 - 부모요소에 적용)

NameValueDescription
data-validationcheck-limit선택 수 검증 패턴
data-validation-limit1-3'최소-최대수'형식의 최소 및 최대 선택 가능 개수

Tag : div(Radio 버튼의 parent tag)

NameValueDescription
data-validationradio-checkRadio 버튼 선택 필수

HTML

유효한 값을 입력하세요 OK
유효한 값을 입력하세요 OK
유효한 값을 입력하세요 OK
2-4개 까지 선택 가능 합니다. OK 
<form id="frm_validation">
    <!-- phone-auto-hyphen : '-'하이픈이 포함된 전화번호 형식 -->
    <div class="mb-3">
        <label class="form-label">phone-auto-hyphen</label>
		<input type="text" class="form-control" data-validation="phone-auto-hyphen" data-validation-type="replace" placeholder="'-'하이픈이 포함된 전화번호 형식"/>
		<small class="invalid-feedback">유효한 값을 입력하세요</small>
		<small class="valid-feedback">OK</small>
	</div>
    <!-- phone-compact : 지역번호 등의 앞번호를 제외한 0000-0000 형식의 전화번호 -->
	<div class="mb-3">
		<label class="form-label">phone-compact</label>
		<input type="text" class="form-control" data-validation="phone-compact" data-validation-type="replace" placeholder="숫자로된 전화번호 형식"/>
		<small class="invalid-feedback">유효한 값을 입력하세요</small>
		<small class="valid-feedback">OK</small>
	</div>
    <!-- email : 이메일 -->
	<div class="mb-3">
		<label class="form-label">email</label>
		<input type="text" class="form-control" data-validation="email" data-validation-type="replace" placeholder="이메일"/>
		<small class="invalid-feedback">유효한 값을 입력하세요</small>
		<small class="valid-feedback">OK</small>
	</div>
    <!-- check-limit : 'data-validation-limit'속성을 통해 설정된 Checkbox의 최소, 최대 선택 수 검증 -->
	<div class="mb-3">
		<label class="form-label">check-limit</label>
		<div class="form-control d-flex justify-content-start align-items-center" data-validation="check-limit" data-validation-limit="2-4">
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck1">
				<label class="form-check-label small" for="ck1">
					Check 1
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck2">
				<label class="form-check-label small" for="ck2">
					Check 2
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck3">
				<label class="form-check-label small" for="ck3">
					Check 3
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck4">
				<label class="form-check-label small" for="ck4">
					Check 4
				</label>
			</div>
			<div class="form-check-inline d-flex justify-content-start align-items-center">
				<input class="form-check-input" type="checkbox" value="" id="ck5">
				<label class="form-check-label small" for="ck5">
					Check 5
				</label>
			</div>
		</div>
		<small class="invalid-feedback">2-4개 까지 선택 가능 합니다.</small>
		<small class="valid-feedback">OK</small>
	</div>
</form>

관련 링크