jQuery Validation Plugin 사용하기

웹프로그래밍에서 입력값 검증은 꼭 필요하며, 상당히 까다로운 작업입니다. 이러한 작업을 좀 쉽게 도와 주는 jQuery Validation Plugin 의 사용법을 알아보도록 하겠습니다.

 

jQuery validation plugin은 다음 주소에서 다운 받을 수 있습니다.

 

https://jqueryvalidation.org/

 

이글을 쓰고 있는 현재 버전은 1.16.0 입니다. MIT 라이센스로 배포됩니다.

 

jQuery 플러그인 이므로 jQuery 가 있어야 합니다. 이버전은 jQuery 1.7.2, 1.8.3, 1.9.1, 1.11.1, 3.1.1 버전에서 테스트 되어 졌다고 합니다. jQuery 도 MIT 라이센스로 배포됩니다.

 

 

파일은 위 사이트에서 다운받아서 사용되도 되고 다음 CDN 주소를 사용해도 되겠습니다.

 

https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js

 

기본적인 사용법을 보겠습니다.

 

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script type="text/javascript">
//<![CDATA[
$(function() {
	$("#commentForm").validate();
});
//]]>
</script>

<form class="cmxform" id="commentForm" method="get" action="">
	<fieldset>
		<legend>이름, 이메일, 의견을 입력해주세요.</legend>
		<p>
			<label for="cname">이름 (필수, 2 자 이상)</label>
			<input id="cname" name="name" minlength="2" type="text" required>
		</p>
		<p>
			<label for="cemail">이메일 (필수)</label>
			<input id="cemail" type="email" name="email" required>
		</p>
		<p>
			<label for="curl">URL (선택)</label>
			<input id="curl" type="url" name="url">
		</p>
		<p>
			<label for="ccomment">의견 (필수)</label>
			<textarea id="ccomment" name="comment" required></textarea>
		</p>
		<p>
			<input class="submit" type="submit" value="Submit">
		</p>
	</fieldset>
</form>

 

실행 결과 입니다.

 

 

 

기본 메세지들이 영어로 나옵니다. 한글 메세지 파일은 messges_ko.js 파일 입니다. 이 파일을 포함시켜도 되고, 다음 처럼 파일의 내용을 직접 사용해도 됩니다.

 

<script type="text/javascript">
//<![CDATA[
$(function() {
	$("#commentForm").validate();
	$.extend( $.validator.messages, {
		required: "필수 항목입니다.",
		remote: "항목을 수정하세요.",
		email: "유효하지 않은 E-Mail주소입니다.",
		url: "유효하지 않은 URL입니다.",
		date: "올바른 날짜를 입력하세요.",
		dateISO: "올바른 날짜(ISO)를 입력하세요.",
		number: "유효한 숫자가 아닙니다.",
		digits: "숫자만 입력 가능합니다.",
		creditcard: "신용카드 번호가 바르지 않습니다.",
		equalTo: "같은 값을 다시 입력하세요.",
		extension: "올바른 확장자가 아닙니다.",
		maxlength: $.validator.format( "{0}자를 넘을 수 없습니다. " ),
		minlength: $.validator.format( "{0}자 이상 입력하세요." ),
		rangelength: $.validator.format( "문자 길이가 {0} 에서 {1} 사이의 값을 입력하세요." ),
		range: $.validator.format( "{0} 에서 {1} 사이의 값을 입력하세요." ),
		max: $.validator.format( "{0} 이하의 값을 입력하세요." ),
		min: $.validator.format( "{0} 이상의 값을 입력하세요." )
	});
});
//]]>
</script>

 

기본적으로 제공되는 검증용 메소드들은 다음과 같습니다.

 

- required : 필수 입력 엘리먼트입니다. - remote : 엘리먼트의 검증을 지정된 다른 자원에 ajax 로 요청합니다. - minlength : 최소 길이를 지정합니다. - maxlength : 최대 길이를 지정합니다. - rangelength : 길이의 범위를 지정합니다. - min : 최소값을 지정합니다. - max : 최대값을 지정합니다. - range : 값의 범위를 지정합니다. - step : 주어진 단계의 값을 가지도록 합니다. - email : 이메일 주소형식으 가지도록 합니다. - url : url 형식을 가지도록 합니다. - date : 날짜 형식을 가지도록 합니다. - dateISO : ISO 날짜 형식을 가지도록 합니다. - number : 10진수를 가지도록 합니다. - digits : 숫자 형식을 가지도록 합니다. - equalTo : 엘리먼트가 다른 엘리먼트와 동일해야 합니다.

 

다음을 포함하면 추가적인 메소드를 사용할 수 있습니다.

 

https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js

 

검증 메소드, 룰(메세지)을 추가하거나 변경할 수 있습니다.

 

1. 오류 메세지가 alert 되도록 수정하기

 

$.validator.setDefaults({
    onkeyup:false,
    onclick:false,
    onfocusout:false,
    showErrors:function(errorMap, errorList){
        if(this.numberOfInvalids()) {
            alert(errorList[0].message);
        }
    }
});

 

2. 검증 메소드를 추가합니다.

$.validator.addMethod(
    "extraMethod",
    function (value, element) {
        if(value != "") {
            reutrn true;
        } else {
            return false;
        }
    },
    "값이 없습니다."
);

 

3. 각 폼 엘리먼트에 메소드와 메세지를 직접 지정합니다.

$("#commentForm").validate({
    rules: {
        extraMethod : {required: true, extraMethod: true}
      , strName: {required: true, rangelength: [2, 10]}
    },

    messages: {
        extraMethod: {
            required: "값을 입력해 주십시오."
          , extraMethod: "올바른 값이 아닙니다."
        },
        strName: {
            required: "이름을 입력해 주십시오."
          , rangelength: "이름은 최소 2자 최대 10자 이내로 입력해 주십시오."
        },
    }
});

 

4. 검증 후 submit 처리를 직접 수행합니다.

 

$("#commentForm").validate({
    submitHandler: function(form) {
        // 필요에 따라 ajax를 사용한 제출등으로 변경가능.
        form.submit();
    }
});