본문바로가기

Javascript

Validator

Basic

Alopex UI 컴포넌트의 입력 값을 검증하는 기능입니다.

Validation Methods

Method Parameter Type Description
required ID Selector, boolean 해당 필드의 필수 여부. ID selector를 넣은 경우 ID selector에 해당되는 필드에 value가 있어야 자신을 필수 검증 대상으로 지정합니다. 또한,ID selector가 지정된 경우 ID selector가 지정하는 대상 element에 대한 의존성이 있는 것이므로, validator를 생성하였다면 대상 element가 validate될 때 자신도 함께 validate가 수행됩니다. ID selector로 지정할 수 있는 element는 Checkbox, Radio, Textinput, Select으로 한정되어 있습니다.
minlength number 해당 필드의 최소 문자 개수
maxlength number 해당 필드의 최대 문자 개수
rangelength [number, number] 해당 필드의 문자 개수가 주어진 수 안에 위치하는가 여부
minblength number 해당 필드의 최소 바이트 길이
maxblength number 해당 필드의 최대 바이트 길이
rangeblength [number, number] 해당 필드의 길이가 주어진 바이트 길이 안에 위치하는가 여부
min number 해당 필드가 가지는 value의 최소값
max number 해당 필드가 가지는 value의 최대값
range [number, number] 해당 필드가 가지는 value값이 주어진 숫자 안에 위치하는가 여부
email boolean 이메일 형식을 지켰는가 여부
url boolean url 형식을 지켰는가 여부(http://..., https://...)
date boolean YYYY/MM/DD 또는 YYYY-MM-DD 형식을 지켰는가 여부
mindate string, ID Selector date형식이면서, 특정 날짜 또는 날짜 이후의 날짜가 입력되었는가 여부
maxdate string, ID Selector date형식이면서, 특정 날짜 또는 날짜 이전의 날짜가 입력되었는가 여부
daterange [date, date] 또는 date대신 ID Selector date형식이면서, 특정 날짜 사이의 값이 입력되었는지 여부
oneof [...] array에 포함된 값들 중 하나가 입력되었는지 여부
number boolean 정수값이 입력되었는가 여부
digits boolean 숫자만(0~9) 입력이 되었는가 여부
alphabet boolean 영문 알파벳만 입력이 되었는가 여부
equalTo ID Selector, value 제시된 값과 동일한 값이 필드에 입력되었는가 여부. ID Selector가 들어온 경우 select된 필드와 값이 동일한가 비교.
numalpha boolean 숫자 또는 알파벳만 입력되었는가 여부
nospace boolean 스페이스를 허용하지 않는가 여부
hangul boolean 한글만 입력되었는가 여부
numhan boolean 숫자 또는 알파벳만 입력되었는가 여부
phone boolean 전화번호 형태로 입력되었는가 여부
mobile boolean 휴대전화번호 형태로 입력되었는가 여부
decimal [number, number] 소수점을 포함하는 정수가 입력되었는가 여부.배열의 첫 번째는 전체 숫자 자릿수이며, 두 번째는 소숫점 자릿수
<form id="form1">
	<div class="Margin-bottom-10">
		<label>마크업 validation 적용</label>
		<input id="inputVali1" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" >
		<span data-for="inputVali1" style="color: red;"></span>
	</div>
	<div>
		<label>Javascript validation 적용</label>
		<input type="text" id="inputVali1JS" class="Textinput">
		<span data-for="inputVali1JS" style="color: red;"></span>
	</div>
</form>
// 마크업 validation 적용
$('#inputVali1').validator();

// Javascript validation 적용
$('#inputVali1JS').validator({
	rule : {
		required : true,
		minlength : 2,
		maxlength : 10
	}
});

기본 오류메시지

Validator 컴포넌트에서 기본적으로 제공하는 오류메시지입니다.

Method 기본 오류메시지
required 반드시 입력해야 하는 항목입니다.
minlength 최소 {0}글자 이상 입력하십시오.
maxlength 최대 {0}글자 까지 입력 가능합니다.
rangelength {0}에서 {1} 글자 사이로 입력하십시오.
minblength 최소 {0}바이트 이상 입력하십시오.
maxblength 최대 {0}바이트 까지 입력 가능합니다.
rangeblength {0}에서 {1} 바이트 사이로 입력하십시오.
min 최소 입력가능 값은 {0}입니다.
max 최대 입력가능 값은 {0}입니다.
range {0}에서 {1} 사이의 값을 입력해 주십시오.
email 이메일 형식에 맞게 입력해 주십시오.
url url 형식에 맞게 입력해 주십시오.
date 날짜를 YYYY/MM/DD 또는 YYYY-MM-DD 형식에 맞게 입력해 주십시오.
mindate {0} 또는 {0} 이후의 날짜를 입력해 주십시오.
maxdate {0} 또는 {0} 이전의 날짜를 입력해 주십시오.
daterange {0}에서 {1} 사이의 날짜를 입력해 주십시오.
oneof 다음중 하나의 값을 입력해 주십시오 : {param}.
number 실수를 입력해 주십시오.
integer 정수를 입력해 주십시오.
digits 숫자만 입력 가능합니다.
alphabet 알파벳만 입력 가능합니다.
equalTo {0} 값만 가능합니다.
numalpha 숫자 또는 영문자만 입력 가능합니다.
nospace 스페이스는 입력할 수 없습니다.
hangul 한글만 입력 가능합니다.
numhan 숫자 또는 한글만 입력 가능합니다.
phone 전화번호 형태를 입력해 주십시오.
mobile 휴대전화번호 형태를 입력해 주십시오.
decimal 소숫점 {1}자리를 포함하여 최대 {0}자리까지 허용됩니다.
Attributes

Validator 동작의 기본 단위는 form을 구성하는 개별 input과 select입니다.

Input/Select Validator Attributes

input/select 태그에 대해 HTML 마크업 속성 및 자바스크립트를 이용하여 validator 룰을 적용할 수 있습니다.

data-validation-message

input/select에서 수행된 검증결과에 따라 메시지를 출력할 때, 기본메시지가 아닌 별도의 에러 메시지를 사용하고자 할 때 사용합니다.

<form id="form2">
	<div class="Margin-bottom-10">
		<label>커스텀 메시지(마크업 적용) </label>
		<input id="inputVali2" class="Textinput" type="text" data-validation-rule="{required:true}" data-validation-message="{required:'ID를 반드시 입력하세요!'}" >
		<span data-for="inputVali2" style="color:deepskyblue;"></span>
	</div>
	<div>
		<label>커스텀 메시지(javascript 적용)</label>
		<input type="text" id="inputVali2JS" class="Textinput" >
		<span data-for="inputVali2JS" style="color:deepskyblue;"></span>
	</div>
</form>
$('#inputVali2').validator();
$('#inputVali2JS').validator({
	rule: {
		required : true,
		minlength : 2,
		maxlength : 10
	},
	message: {
		required: '이름을 반드시 입력하세요!'
	}
});

data-validation-option

input/select를 검증하고자 할 때 사용 가능한 옵션입니다.

Option Default Description
onkeyup true 사용자가 문자열을 입력한 직후에 validation을 수행할 것인가 여부
onchange true DOM의 change 이벤트가 발생하였을 때 validation을 수행할 것인가 여부
onblur true 해당 element가 focus를 잃었을 때 validation을 수행할 것인가 여부
messageToLabel false 자신의 id를 for attribute에 명시한 label 태그에 오류메시지를 넣도록 할 것인가 여부
messageToDatafor true 자신의 id를 data-for attribute에 명시한 태그에 오류메시지를 넣도록 할 것인가 여부
// 마크업 적용 시
<input type="text" id="rule1" data-validation-option=" { onkeyup : false, onchange : false } ">

// javascript 적용 시
$('#rule1').validator({
	option : {
		onkeyup : false,
		onchange : false,
	}
});
<form id="form3">
	<div class="Margin-bottom-10">
		<label>onkeyup:false, onchange:false, onblur:true(마크업 적용)</label>
		<input id="inputVali3" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" data-validation-option="{onkeyup:false, onchange:false}">
		<span data-for="inputVali3" style="color: orange;"></span>
	</div>
	<div>
		<label>onkeyup:false, onchange:false, onblur:true(javascript 적용)</label>
		<input type="text" id="inputVali3JS" class="Textinput">
		<span data-for="inputVali3JS" style="color: orange;"></span>
	</div>
</form>
$('#inputVali3').validator();
$('#inputVali3JS').validator({
	rule : {
		required : true,
		minlength : 2,
		maxlength : 10
	},
	option : {
		onkeyup : false,
		onchange : false,
	}
});

data-validation-rule

input/select에 적용할 검증 룰을 JSON string 형태로 명시합니다. 검증 룰은 Validation Methods 이름을 키로 하며, 해당 method의 파라미터를 value로 가지는 object입니다.

data-for="id명" 을 명시한 태그에 오류메시지를 넣을 수 있습니다.

Form Validator Attributes

form 태그에 대해 다음과 같은 속성을 적용할 수 있습니다.

data-validation-option

form을 검증하고자 할 때 사용 가능한 옵션입니다.

Option Default Description
onsubmit true form이 submit될 때에 validation을 수행하여 submit 중지 여부
submitHandler null form이 submit될 때에 별도로 수행할 submit handler입니다. onsubmit이 true일 때에 submitHandler가 지정되어 있으면, preventDefault()를 수행하는 기본 동작 대신 submitHandler에 지정되어 있는 이벤트 핸들러를 수행하게 됩니다.
oninit false validator가 생성되는 즉시 validation 수행 여부. 기본적으로 사용자가 입력을 시작하면서 부터 validation을 수행하게 됩니다.
// 마크업 적용 시
<form data-validation-option="{onsubmit:true}">
	...
</form>

// javascript 적용 시
$('form').validator({ option : {
	onsubmit : true,
	submitHandler : function(event) {
		if($(this).validate()) {
			return true;
		} else {
			//submit 진행을 억제
			event.preventDefault();
			return false;
		}
	}
}});
<form id="formInit" data-validation-option="{oninit:true}" class="Margin-bottom-10">
	<label>oninit:true form(마크업) </label>
	<input id="inputValiInit" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" >
	<span data-for="inputValiInit" style="color: red;"></span>
</form>
<form id="form4" data-validation-option="{onsubmit:true}" class="Margin-bottom-10">
	<label>submit form 검증(마크업 방식)</label>
	<input id="inputVali4" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" data-validation-option="{onkeyup:false, onchange:false, onblur:false}">
	<span data-for="inputVali4" style="color: red;"></span>
	<button id="inputVali4_submit" class="Button" type="submit">submit</button>
</form>
<form id="form4JS">
	<label>submit form 검증(javascript 방식)</label>
	<input id="inputVali4JS" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" data-validation-option="{onkeyup:false, onchange:false, onblur:false}">
	<span data-for="inputVali4JS" style="color: red;"></span>
<button id="inputVali4JS_submit" class="Button" type="submit" >submit</button>
</form>
$('#formInit').validator();
$('#form4').validator();

$('#form4JS').validator({
	option: {
		onsubmit : true,
		submitHandler : function(event) {
			if($(this).validate()) {
				return true;
			} else {
				//submit 진행을 억제
				event.preventDefault();
				return false;
			}
		}
	}
});

Functions

.validate(Object config)

validator와 거의 동일하나, 해당 input/select/form의 검증 결과 값을 리턴하는 것에 차이가 있습니다.

  • parameter

    • config {Object} Optional.
      • validator()의 config와 동일합니다.
  • return

    • result {Boolean}
      • 해당 input/select/form의 검증결과값을 boolean값으로 리턴합니다.

<form id="form8" class="Margin-bottom-10">
	<input id="inputVali8" class="Textinput">
	<span data-for="inputVali8" style="color: red;"></span>        
</form>
<button id="btn_validator1" class="Button">validator()</button>
<button id="btn_validate1" class="Button">validate()</button>
$('#btn_validator1').on('click', function() {
	var validator1 = $('#form8').validator({
		rule : {
			required : true,
			minlength : 2,
			maxlength : 10
		}
	});
});
$('#btn_validate1').on('click', function() {
	var validate1 = $('#form8').validate({
		rule : {
			required : true,
			minlength : 2,
			maxlength : 10
		}
	});
	if (!validate1) {
		$('#inputVali8').addClass("falseState");
	} else{
		$('#inputVali8').removeClass("falseState");
	};
});
.falseState{border-color: red}
.falseState:hover {border-color: #FF7100}

.validator(Object config)

form/input/select에 valdation 설정하고, 설정을 저장하고 있는 Validation Object를 리턴합니다.

  • parameter

    • config {Object} Optional

      • validator가 input/select에 대해 수행된 경우 config object는 다음과 같은 필드를 가집니다.

        Config Type Description
        rule object 해당 필드에 적용할 검증 규칙입니다.
        message object 필드에 적용한 검증규칙 결과에 따라 표시할 사용자 지정 메시지입니다.
        option object 필드에 적용할 validation 옵션입니다.
      • validator가 form에 대해 수행된 경우 config object는 다음과 같은 필드를 가집니다.

        Config Type Description
        elements object form 안에 위치한 input/select의 name을 key로, 앞서 설명한 input/select에 적용하는 config object의 형태를 가지는 object를 value로 가지는 object입니다. 개별 input/select에 대한 validation rule 설정을 form을 통해서 수행할 수 있도록 합니다.
        option object form에 적용할 옵션입니다.
  • return

    • Object {Validator}
      • 해당 field의 설정을 저장하는 Validator Object를 리턴합니다.
var validator = $('#myinput').validator({rule:{required:true, minlength:2}});
var result = validator.validate();
<form id="form5">
	<div class="Margin-bottom-10">
		<label>inputA(2~10자)</label>
		<input id="inputA" class="Textinput" type="text" name="nameA" >
		<span data-for="inputA" style="color:magenta;"></span>
	</div>
	<div>
		<label>inputB(4~8자)</label>
		<input id="inputB" class="Textinput" type="text" name="nameB">
		<span data-for="inputB" style="color:blue;"></span>
	</div>
</form>
// form에 validator 할 경우
$('#form5').validator({
	// 아래와 같이 input,select의 name 값으로 각기 다른 validator 적용가능.
	elements :{ 
		'nameA' : {
			rule:{required:true, minlength:2 ,maxlength:10} //(2~10자)
		},
		'nameB' : {
			rule:{required:true, minlength:4 ,maxlength:8}, //(4~8자)
			message: {required: '입력란이 비어있습니다.'} // 커스텀 메시지
		}
	}
});

Validator Object 함수

validator() 함수는 Validator object를 리턴합니다. 이때 리턴되는 Validator object는 관련 함수를 제공하며, validator와 관련된 데이터들을 가져올 수 있습니다.

.getErrorMessage()

현재 Validator object가 지시하고 있는 target element에 대한 검증을 실시하였을 때, 발생한 오에 대한 오류메시지를 모두 가져옵니다.

  • return
    • result {Object}
      • input/select일 경우 자신에게 발생한 오류메시지를 array에 담아서 리턴하며, form일 경우 자신이 가지고 있는 input/select에 대한 오류메시지 array를 각기 input/select의 name을 키로하여 저장한 object를 리턴합니다.
var validator = $('form').validator();
if(!validator.validate()) {
	var errorstr = '',
			errormessages = validator.getErrorMessage();
	for(var name in errormessages) {
		for(var i=0; i < errormessages[name].length; i++) {
			errorstr += errormessages[name][i] + '\n';
		}
	}
	$('#errorpanel').text(errorstr);
}

<form id="form7">
	<input id="inputVali7" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" >
	<span data-for="inputVali7" style="color: red;"></span>
</form>
<button id="btn_getMessage1" class="Button">ELEMENT getErrorMessage()</button>
<button id="btn_getMessage2" class="Button">FORM getErrorMessage() </button>
<label>errormessages:<span id="span2" style="white-space: pre;"></span> </label>
$('#form7').validator();
$('#btn_getMessage1').click(function() { // ELEMENT
	var validator = $('#inputVali7').validator();
	var errorstr = validator.getErrorMessage();
	$('#span2').text(errorstr);
});
$('#btn_getMessage2').click(function() { // FORM
	var validator = $('#form7').validator();
	var errorstr = '',
			errormessages = validator.getErrorMessage();
	for(var name in errormessages) {
		for(var i=0; i < errormessages[name].length; i++) {
			errorstr += errormessages[name][i] + '\n';
		}
	}
	$('#span2').text(errorstr);
});

.validate()

현재 Validator object가 지시하고 있는 element에 대한 검증을 실시합니다.

  • return
    • result {Boolean}
var validator = $('#myInput').validator();
if(validator.validate()) { //  'true' or 'false'
	alert('Input is valid');
} else {
	alert('Input is not valid');
}

<form id="form6">
	<input id="inputVali6" class="Textinput" type="text" data-validation-rule="{required:true, minlength:2, maxlength:10}" >
	<span data-for="inputVali6" style="color: red;"></span>
</form>
<div class="Margin-top-10">
	<label>Valid:<span id="span1"></span></label>
	<button id="btn_validate" class="Button">validate()</button>
</div>
$('#btn_validate').click(function() {
	var validator = $('#inputVali6').validator();
	var validate = validator.validate(); //  'true' or 'false'
	$('#span1').text(validate);
	if(validate) {
		alert('Input is valid');            
	} else {
		alert('Input is not valid');
	}
});

Validator.addMethod(String name, function handler)

Validation Methods 외에 Custom Method를 정의할 수 있습니다.

  • parameter
    • name {String} Required
      • 새로 추가하려는 Custom Method의 이름 입니다.
      • 이 이름을 Validation Rule 로 사용할 수 있습니다.
    • handler {function} Required
      • Custom Method의 실제 구현 함수 입니다.
        • parameter
          • element
            • input/select 등 검증하고자 하는 엘리먼트
          • value
            • 해당 엘리먼트의 value
          • param
            • 룰에 지정된 method의 parameter 값
        • return
          • {boolean}
            • 검증 통과 여부를 리턴합니다.
<!-- 아래의 input은 testing이라는 텍스트가 들어와야만 검증을 통과하게 됩니다. -->
<input class="Textinput" data-validation-rule="{customEqual:'testing'}">
Validator.addMethod('customEqual', function(element, value, param) {
	//무조건 rule 파라미터로 넘어온 값과 일치해야 검증을 통과시킵니다.
	if (value === param) {
		return true;
	} else {
		return false;
	}
);

Validator.setMessage(String method, String|function message)

Validation Method 에 해당되는 기본 메시지를 별도로 작성하거나, 사용자 정의 Method에 대한 메시지를 만들고자 할 경우에 Validator.setMessage 기능을 활용합니다.

특정 엘리먼트에 대해서 메시지를 설정하고자 할 때는 data-validation-message 옵션 혹은 validator API를 사용합니다.

  • parameter
    • method {String} Required
      • method 이름입니다
    • message {String|Function} Required
      • method 검증을 통과하지 못하였을 때 출력할 오류메시지입니다.
        • {String}
          • {n} 형태의 텍스트를 이용한 파라미터 포맷팅을 사용할 수 있습니다.
          • 일반적으로 {0}를 입력하면 validate 룰로 지정한 파라미터(true와 같은 값)로 치환이 됩니다.
          • {attr:속성명} 의 형식을 이용한 스트링을 사용할 경우 검증 대상 element의 HTML 속성값을 가져와서 치환하게 됩니다.
        • {function}
          • 해당 함수가 실행되면서 검증메시지를 조합하려 리턴하게 되면 리턴된 메시지를 오류메시지로 사용하게 됩니다.
          • 이 때 함수의 첫번째 파라미터는 검증대상 엘리먼트입니다.
// 검증 Method의 parameter 를 메시지에 포함
Validator.setMessage('customEqual', '{0}만 허용합니다.');
// 또는. 검증 대상 element의 attribute 사용
Validator.setMessage('customEqual', '{attr:data-allow-attr}만 허용합니다.');
// 또는. 특정 함수를 지정하여 오류메시지 생성
Validator.setMessage('customEqual', function(elem) {
	return $(elem).attr('data-allow-attr') + '만 허용합니다.'; }
);
<!-- 아래의 input 검증 실패시 'testing만 허용합니다' 라는 오류메시지가 출력됩니다. -->
<input class="Textinput" data-validation-rule=" { customEqual : 'testing' }" data-allow-attr="testing">

$a.validator.setup (Object config)

validator 함수 사용 시 공통으로 사용할 수 있는 디폴트 값을 설정합니다. 설정할 수 있는 항목은 validator(Object config)와 동일하게 사용할 수 있습니다.

$a.validator.setup({
	 message: {
				required:  'Required Form Field',
		}
 })
Extra Example

Custom Submit Handler (anchor & focus)

Submit handler를 별도로 개발하여 화면 영역에 link를 포함하는 에러메세지를 만들고, a태그 클릭에 의해 포커스가 이동하는 예제 입니다.
input/select/textarea는 이때 반드시 id attribute를 가지고 있어야 합니다.

User ID
관심분야 사용여부
관심분야 2개이상 선택.
<div id="errorpanel" class="errorpanel" style="display:none;"></div>
<form id="form9">
	<div>
		<span>User ID</span>
		<input class="Textinput" type="text" name="userid" id="userid"
				data-validation-rule="{ required:true , minlength : 4, maxlength : 8, nospace : true }"
				data-alias="사용자 아이디">
		<span class="error" data-for="userid"></span>
	</div>
	<div>
		<span>관심분야 사용여부</span>
		<input class="Checkbox" type="checkbox" id="sub" name="sub" data-alias="관심분야 사용여부">
	</div>
	<div>
		<span>관심분야 2개이상 선택.</span>
		<input class="Checkbox" type="checkbox" name="topic" id="topicA" value="A"
				data-validation-rule="{required : '#sub', minlength:2}"
				data-validation-message="{minlength:'{attr:data-alias}를 사용할 경우 {0}개 이상 관심분야를 선택해 주십시오.'}"
				data-alias="관심분야">
		<input class="Checkbox" type="checkbox" name="topic" id="topicB" value="B">
		<input class="Checkbox" type="checkbox" name="topic" id="topicC" value="C">
		<input class="Checkbox" type="checkbox" name="topic" id="topicD" value="D">
		<span class="error" data-for="topicA"></span>
	</div>
	<div>
		<input id="form9_submit" type="submit" class="Button" data-alias="제출">
	</div>
</form>
</div>
$('#form9').validator({
	option : {
		onsubmit : true,
		submitHandler : function(e) {
			var result = $(this).validate();
			if(result) {
					//검증에 성공했을 경우 submit 진행
				$('#errorpanel').hide();
				return;
			}
			//검증 실패시 에러메세지를 가져와서 출력할 수 있는 형태로 만든다.
			var emsg = $(this).validator().getErrorMessage();
			var tags = '';
			tags += '<h3>검증 과정에서 에러가 발생하였습니다.</h3>';
			tags += '<p>다음 내용을 확인해 주십시오.</p>';
			tags += '<ul>';
			for(var prop in emsg) {
				var elem = $(this).find('[name="'+prop+'"]');
				var id = elem.attr('id');
				var str = '<li>';
				str += '<a href="#'+id+'">';
				str += elem.attr('data-alias');
				str += ' : '
				str += emsg[prop].join(' ');
				str += '</a>'
				str += '</li>';
				tags += str;
			}
			tags += '</ul>';
			$('#errorpanel').show().html(tags);
			$('#errorpanel a').on('click', function(){
				$($(this).attr('href')).focus();
				return false;
			});
			$('#errorpanel a:first').focus();
			e.preventDefault();
			return false;
		}
	}
});
.error {
	color:red;
}
.errorpanel {
	background-color : #fbe3e4;
	border:1px solid #fbc2c4;
	max-width:600px;
	padding-top:1em;
	padding-bottom:1em;
	padding-left:2em;
	padding-right:2em;
}

Methods sample usage

attribute 설정을 통해 alopex validator가 제공하는 검증 메소드를 사용하는 예제입니다.

data-validation-rule="{required:true}" - 필수입력항목

data-validation-rule="{minlength:숫자, maxlength:숫자}" - 문자열 갯수를 검증.

data-validation-rule="{rangelength:[숫자,숫자]}" - 문자열 갯수 범위를 검증.

data-validation-rule="{minblength:숫자, maxblength:숫자}" - 문자열의 바이트길이를 검증

한글은 UTF-8인코딩에서 3바이트를 차지. 아래의 예제는 6바이트에서 8바이트까지만 허용하므로 한글 3글자는 9바이트를 차지하여 검증 실패.

data-validation-rule="{rangeblength:[숫자,숫자]}" - 문자열의 바이트길이 범위를 검증.

data-validation-rule="{min:숫자,max:숫자,range:[숫자,숫자]}" - 숫자의 최소값 또는 최대값을 검증

아래 예제는 50에서 100의 숫자를 허용

data-validation-rule="{decimal:[자릿수길이숫자,소숫점길이숫자]}" - 정수입력을 허용

data-validation-rule="{digits:true}" - 숫자만 입력 허용

data-validation-rule="{number:true}" - 실수(real number) 입력 허용(3.14, -2.99)

data-validation-rule="{integer:true}" - 정수 입력 허용(+또는-가 붙어도 검증 통과)

data-validation-rule="{alphabet:true}" - 영문자 알파벳 입력 허용

data-validation-rule="{numalpha:true}" - 숫자와 영문자 알파벳 입력 허용

data-validation-rule="{nospace:true}" - 빈칸(스페이스) 입력을 허용하지 않음

data-validation-rule="{hangul:true}" - 한글 입력만 허용. 스페이스는 한글로 인정하지 않음.

data-validation-rule="{numhan:true}" - 숫자와 한글 입력만 허용

data-validation-rule="{email:true}" - 이메일 형식만 허용

data-validation-rule="{url:true}" - http, https등으로 시작하는 url형식만 허용

data-validation-rule="{date:true}" - 날짜 형식만 허용(YYYY-MM-DD 또는 YYYY/MM/DD)

data-validation-rule="{mindate:날짜,maxdate:날짜,daterange:[날짜,날짜]}" - 날짜의 최소/최대값 또는 범위를 지정

data-validation-rule="{mindate:ID셀렉터,maxdate:ID셀렉터}" - 지정된 ID셀렉터의 input이 가지는 날짜 만큼을 최대/최소값으로 지정. 아래의 예제는 서로 날짜를 추월하지 못하도록 설정한 예.

from to

data-validation-rule="{oneof:[...]}" - 어레이에 지정한 값만 입력하도록 허용

data-validation-rule="{equalTo:값}" - 제시된 값과 동일해야 함. 아래 예시는 'test'만 허용.

<div class="sector">
	<p>data-validation-rule="{required:true}" - 필수입력항목</p>
	<div>
		<input class="Textinput" type="text" name="required1"
			id="required1" data-validation-rule="{required:true}">
		<button id="btn1-1" class="Button">.validate()</button>
		<button id="btn1-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{minlength:숫자, maxlength:숫자}" - 문자열 갯수를
		검증.</p>
	<div>
		<input class="Textinput" type="text" name="len1" id="len1"
			data-validation-rule="{minlength:6,maxlength:8}" value="test">
		<button id="btn2-1" class="Button">.validate()</button>
		<button id="btn2-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{rangelength:[숫자,숫자]}" - 문자열 갯수 범위를 검증.</p>
	<div>
		<input class="Textinput" type="text" name="len2" id="len2"
			data-validation-rule="{rangelength:[6,8]}" value="test">
		<button id="btn3-1" class="Button">.validate()</button>
		<button id="btn3-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{minblength:숫자, maxblength:숫자}" - 문자열의
		바이트길이를 검증</p>
	<p>한글은 UTF-8인코딩에서 3바이트를 차지. 아래의 예제는 6바이트에서 8바이트까지만 허용하므로 한글 3글자는
		9바이트를 차지하여 검증 실패.</p>
	<div>
		<input class="Textinput" type="text" name="len3" id="len3"
			data-validation-rule="{minblength:6,maxblength:8}" value="문자열">
		<button id="btn4-1" class="Button">.validate()</button>
		<button id="btn4-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{rangeblength:[숫자,숫자]}" - 문자열의 바이트길이 범위를
		검증.</p>
	<div>
		<input class="Textinput" type="text" name="len4" id="len4"
			data-validation-rule="{rangeblength:[6,8]}" value="문자열">
		<button id="btn5-1" class="Button">.validate()</button>
		<button id="btn5-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{min:숫자,max:숫자,range:[숫자,숫자]}" - 숫자의 최소값
		또는 최대값을 검증</p>
	<p>아래 예제는 50에서 100의 숫자를 허용</p>
	<div>
		<input class="Textinput" type="text" name="mm1" id="mm1"
			data-validation-rule="{min:50,max:100,range:[50,100]}" value="501">
		<button id="btn6-1" class="Button">.validate()</button>
		<button id="btn6-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{decimal:[자릿수길이숫자,소숫점길이숫자]}" - 정수입력을 허용</p>
	<div>
		<input class="Textinput" type="text" name="dec1" id="dec1"
			data-validation-rule="{decimal:[6,3]}" value="123.456">
		<button id="btn7-1" class="Button">.validate()</button>
		<button id="btn7-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{digits:true}" - 숫자만 입력 허용</p>
	<div>
		<input class="Textinput" type="text" name="d1" id="d1"
			data-validation-rule="{digits:true}" value="text">
		<button id="btn8-1" class="Button">.validate()</button>
		<button id="btn8-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{number:true}" - 실수(real number) 입력
		허용(3.14, -2.99)</p>
	<div>
		<input class="Textinput" type="text" name="n1" id="n1"
			data-validation-rule="{number:true}" value="text">
		<button id="btn9-1" class="Button">.validate()</button>
		<button id="btn9-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{integer:true}" - 정수 입력 허용(+또는-가 붙어도 검증
		통과)</p>
	<div>
		<input class="Textinput" type="text" name="i1" id="i1"
			data-validation-rule="{integer:true}" value="text">
		<button id="btn10-1" class="Button">.validate()</button>
		<button id="btn10-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{alphabet:true}" - 영문자 알파벳 입력 허용</p>
	<div>
		<input class="Textinput" type="text" name="a1" id="a1"
			data-validation-rule="{alphabet:true}" value="텍스트">
		<button id="btn11-1" class="Button">.validate()</button>
		<button id="btn11-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{numalpha:true}" - 숫자와 영문자 알파벳 입력 허용</p>
	<div>
		<input class="Textinput" type="text" name="na1" id="na1"
			data-validation-rule="{numalpha:true}" value="텍스트">
		<button id="btn12-1" class="Button">.validate()</button>
		<button id="btn12-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{nospace:true}" - 빈칸(스페이스) 입력을 허용하지 않음</p>
	<div>
		<input class="Textinput" type="text" name="ns1" id="ns1"
			data-validation-rule="{nospace:true}" value="tex t">
		<button id="btn13-1" class="Button">.validate()</button>
		<button id="btn13-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{hangul:true}" - 한글 입력만 허용. 스페이스는 한글로
		인정하지 않음.</p>
	<div>
		<input class="Textinput" type="text" name="h1" id="h1"
			data-validation-rule="{hangul:true}" value="한글">
		<button id="btn14-1" class="Button">.validate()</button>
		<button id="btn14-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{numhan:true}" - 숫자와 한글 입력만 허용</p>
	<div>
		<input class="Textinput" type="text" name="nh1" id="nh1"
			data-validation-rule="{numhan:true}" value="한글123">
		<button id="btn15-1" class="Button">.validate()</button>
		<button id="btn15-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{email:true}" - 이메일 형식만 허용</p>
	<div>
		<input class="Textinput" type="text" name="em1" id="em1"
			data-validation-rule="{email:true}" value="hello@world.com">
		<button id="btn16-1" class="Button">.validate()</button>
		<button id="btn16-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{url:true}" - http, https등으로 시작하는 url형식만
		허용</p>
	<div>
		<input class="Textinput" type="text" name="url1" id="url1"
			data-validation-rule="{url:true}" value="http://ui.alopex.io">
		<button id="btn17-1" class="Button">.validate()</button>
		<button id="btn17-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{date:true}" - 날짜 형식만 허용(YYYY-MM-DD 또는
		YYYY/MM/DD)</p>
	<div>
		<input class="Textinput" type="text" name="da1" id="da1"
			data-validation-rule="{date:true}" value="2014-01-01">
		<button id="btn17-3" class="Button">.validate()</button>
		<button id="btn17-4" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{mindate:날짜,maxdate:날짜,daterange:[날짜,날짜]}"
		- 날짜의 최소/최대값 또는 범위를 지정</p>
	<div>
		<input class="Textinput" type="text" name="dr1" id="dr1"
			data-validation-rule="{mindate:'2014-01-01',maxdate:'2014-01-31',daterange:['2014-01-01','2014-01-31']}" value="2014-01-15">
		<button id="btn18-1" class="Button">.validate()</button>
		<button id="btn18-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{mindate:ID셀렉터,maxdate:ID셀렉터}" - 지정된 ID셀렉터의 input이 가지는 날짜 만큼을 최대/최소값으로 지정.
	아래의 예제는 서로 날짜를 추월하지 못하도록 설정한 예.</p>
	<div>
		from<input class="Textinput" type="text" name="dr2from" id="dr2from"
			data-validation-rule="{mindate:'2014-01-01',maxdate:'#dr2to'}"
			value="2014-01-19">
		to<input class="Textinput" type="text" name="dr2to" id="dr2to"
			data-validation-rule="{mindate:'#dr2from',maxdate:'2014-12-31'}"
			value="2014-01-13">
			<br/><br/>
		<button id="btn19-1" class="Button">$(from).validate()</button>
		<button id="btn19-2" class="Button">$(from).getErrorMessage()</button>
		<button id="btn19-3" class="Button">$(to).validate()</button>
		<button id="btn19-4" class="Button">$(to).getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{oneof:[...]}" - 어레이에 지정한 값만 입력하도록 허용</p>
	<div>
		<input class="Textinput" type="text" name="oo1" id="oo1"
			data-validation-rule="{oneof:['A','B','C']}" value="D">
		<button id="btn20-1" class="Button">.validate()</button>
		<button id="btn20-2" class="Button">.getErrorMessage()</button>
	</div>
</div>

<div class="sector">
	<p>data-validation-rule="{equalTo:값}" - 제시된 값과 동일해야 함. 아래 예시는
		'test'만 허용.</p>
	<div>
		<input class="Textinput" type="text" name="eq1" id="eq1"
			data-validation-rule="{equalTo:'test'}" value="test1">
		<button id="btn21-1" class="Button">.validate()</button>
		<button id="btn21-2" class="Button">.getErrorMessage()</button>
	</div>
</div>
$('#btn1-1').on('click', function() {alert($('#required1').validate());});
$('#btn1-2').on('click', function() {alert($('#required1').getErrorMessage());});
$('#btn2-1').on('click', function() {alert($('#len1').validate());});
$('#btn2-2').on('click', function() {alert($('#len1').getErrorMessage());});
$('#btn3-1').on('click', function() {alert($('#len2').validate());});
$('#btn3-2').on('click', function() {alert($('#len2').getErrorMessage());});
$('#btn4-1').on('click', function() {alert($('#len3').validate());});
$('#btn4-2').on('click', function() {alert($('#len3').getErrorMessage());});
$('#btn5-1').on('click', function() {alert($('#len4').validate());});
$('#btn5-2').on('click', function() {alert($('#len4').getErrorMessage());});
$('#btn6-1').on('click', function() {alert($('#mm1').validate());});
$('#btn6-2').on('click', function() {alert($('#mm1').getErrorMessage());});
$('#btn7-1').on('click', function() {alert($('#dec1').validate());});
$('#btn7-2').on('click', function() {alert($('#dec1').getErrorMessage());});
$('#btn8-1').on('click', function() {alert($('#d1').validate());});
$('#btn8-2').on('click', function() {alert($('#d1').getErrorMessage());});
$('#btn9-1').on('click', function() {alert($('#n1').validate());});
$('#btn9-2').on('click', function() {alert($('#n1').getErrorMessage());});
$('#btn10-1').on('click', function() {alert($('#i1').validate());});
$('#btn10-2').on('click', function() {alert($('#i1').getErrorMessage());});
$('#btn11-1').on('click', function() {alert($('#a1').validate());});
$('#btn11-2').on('click', function() {alert($('#a1').getErrorMessage());});
$('#btn12-1').on('click', function() {alert($('#na1').validate());});
$('#btn12-2').on('click', function() {alert($('#na1').getErrorMessage());});
$('#btn13-1').on('click', function() {alert($('#ns1').validate());});
$('#btn13-2').on('click', function() {alert($('#ns1').getErrorMessage());});
$('#btn14-1').on('click', function() {alert($('#h1').validate());});
$('#btn14-2').on('click', function() {alert($('#h1').getErrorMessage());});
$('#btn15-1').on('click', function() {alert($('#nh1').validate());});
$('#btn15-2').on('click', function() {alert($('#nh1').getErrorMessage());});
$('#btn16-1').on('click', function() {alert($('#em1').validate());});
$('#btn16-2').on('click', function() {alert($('#em1').getErrorMessage());});
$('#btn17-1').on('click', function() {alert($('#url1').validate());});
$('#btn17-2').on('click', function() {alert($('#url1').getErrorMessage());});
$('#btn17-3').on('click', function() {alert($('#da1').validate());});
$('#btn17-4').on('click', function() {alert($('#da1').getErrorMessage());});
$('#btn18-1').on('click', function() {alert($('#dr1').validate());});
$('#btn18-2').on('click', function() {alert($('#dr1').getErrorMessage());});
$('#btn19-1').on('click', function() {alert($('#dr2from').validate());});
$('#btn19-2').on('click', function() {alert($('#dr2from').getErrorMessage());});
$('#btn19-3').on('click', function() {alert($('#dr2to').validate());});
$('#btn19-4').on('click', function() {alert($('#dr2to').getErrorMessage());});
$('#btn20-1').on('click', function() {alert($('#oo1').validate());});
$('#btn20-2').on('click', function() {alert($('#oo1').getErrorMessage());});
$('#btn21-1').on('click', function() {alert($('#eq1').validate());});
$('#btn21-2').on('click', function() {alert($('#eq1').getErrorMessage());});

다국어 설정

Validator 기본 오류메시지의 다국어 설정을 공통으로 설정합니다.

locale 속성은 $a.setup 다국어설정을 통해서 Alopex UI 공통으로도 적용 가능합니다.

$a.validator.setup({
	locale: 'ko'
});
  • locale {string}
    • 'ko'(default) | 'en' | 'zh' | 'ja'
      • 한글 설정