사용자 입력값 검증

사용자가 입력한 입력값을 검증하는 방법을 설명 합니다.

  1. 검증하고자 하는 데이터 값에 해당되는 Validation 패턴 확인
  2. 각 Input tag에 사용하고자 하는 검증 패턴을 data-validation 속성으로 정의
  3. 각 Input tag의 실시간 검증 방법을 data-validation-type 속성으로 정의
  4. Checkbox의 경우 data-validation-limit 를 정의하여 선택 수 검증

Validation 패턴, data-validation-alert, data-validation, data-validation-type, data-validation-limit 속성은 아래에 기술 합니다.

Validation 패턴

패턴 명 Value
phone-auto-hyphen '-'하이픈이 포함된 전화번호 형식 Replace 사용 가능
phone 숫자로된 전화번호 형식 Replace 사용 가능
phone-compact 지역번호 등의 앞번호를 제외한 0000-0000 형식의 전화번호 Replace 사용 가능
email 이메일 Replace 사용 가능
domain http 또는 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-v4 ip v4 형식(000.000.000.000)의 IP address Replace 사용 가능
check-limit 'data-validation-limit'속성을 통해 설정된 Checkbox의 최소, 최대 선택 수 검증
radio-check Radio 버튼의 선택여부 검증

HTML attributes

Tag : form

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

Tag : input

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

Tag : div(Checkbox의 parent tag)

Name Value Description
data-validation check-limit 선택 수 검증 패턴
data-validation-limit 1-3 '최소-최대수'형식의 최소 및 최대 선택 가능 개수

Tag : div(Radio 버튼의 parent tag)

Name Value Description
data-validation radio-check Radio 버튼 선택 필수

HTML

유효한 값을 입력하세요 OK
유효한 값을 입력하세요 OK
유효한 값을 입력하세요 OK
2-4개 까지 선택 가능 합니다. OK 
<form id="frm_validation">
	<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>
	<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>
	<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>
	<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">
					&nbsp;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">
					&nbsp;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">
					&nbsp;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">
					&nbsp;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">
					&nbsp;Check 5
				</label>
			</div>
		</div>
		<small class="invalid-feedback">2-4개 까지 선택 가능 합니다.</small>
		<small class="valid-feedback">OK</small>
	</div>
</form>

관련 링크