[JQuery] jQuery Validation Plugin 사용하기

웹 프로그래밍을 함에 있어서  ID 혹은 PW를 확인하는데 있어서 유효성 검증은 반드시 필요한 작업이다.

 

이를 쉽게 도와주는 기능인  JQuery의 Validation Plugin을 사용하면 쉽게 표시할 수 있다.

 

<script>
var validator = $("#checkform").validate({
	rules: {
    	id: {
        	required: true,
            minlength: 5
        },
        pw: {
        	required: true,
            rangelength: [8, 16]
        }
    },
    messages: {
    	id: {
        	required: "필수 입력 항목입니다.",
            minlength: "최소 {0}글자 이상이어야 합니다."
        },
        pw: {
        	required: "필수 입력 항목입니다.",
            rangelength: "{0}글자 이상 {1} 글자 이하 입력 해주시기 바랍니다."
        }
    },
    //errorPlacement는 필요에 따라 사용
    errorPlacement: function(error, element) {
    	$( element ).closest( "form" ).find( "small[for='" + element.attr( "id" ) + "']" ).append( error );	
    },
    //위와 같이 필요에 따라 사용
    onfocusout: function(element) {
   		$(element).valid();
    },
    submitHandler: function(form) { 
    	/*필요에 따라 ajax를 이용한 submit 가능*/
    }
});
</script>
<div>
	<form id="checkform" method="post">
    	<label>ID</label>
        <div>
        	<input id="id" name="id" type="text" />
        </div>
        <small for="id" style="color:red;"></small>
        
        <label>PW</label>
        <div>
        	<input id="pw" name="pw" type="text" />
        </div>
        <small for="pw" style="color:red;"></small>
    </form>
</div>

위와 같이 코드를 작성할 수있다.

 

실행 하면

 

(해당 이미지는 예시입니다. 위 코드와 css가 일부 다릅니다.)

 

 

이러한 형태로 나타낼 수 있다.

 

기본적으로 사용 가능한 validation method는 다음과 같다.

 

required: "필수 항목입니다.",
remote: "항목을 수정하세요.", 
email: "유효하지 않은 E-Mail주소입니다.", 
url: "유효하지 않은 URL입니다.", 
date: "올바른 날짜를 입력하세요.", 
dateISO: "올바른 날짜(ISO)를 입력하세요.", 
number: "유효한 숫자가 아닙니다.", 
digits: "숫자만 입력 가능합니다.", 
creditcard: "신용카드 번호가 바르지 않습니다.", 
equalTo: "같은 값을 다시 입력하세요.", 
extension: "올바른 확장자가 아닙니다.", 
maxlength: "{0}자를 넘을 수 없습니다. ", 
minlength: "{0}자 이상 입력하세요.", 
rangelength: "문자 길이가 {0} 에서 {1} 사이의 값을 입력하세요.", 
range: "{0} 에서 {1} 사이의 값을 입력하세요.", 
max: "{0} 이하의 값을 입력하세요.", 
min: "{0} 이상의 값을 입력하세요.",
customValidation: "임의의 형식에 맞지 않습니다."

 

여기서 가장 마지막 "customValidation"  은 개발자가 임의로 형식을 만들어서  유효성 검사가 가능 하다는 것이다.

 

예를 들어서

어떠한 사용자의 MAC 주소를 인증 받고 싶다면

 

$.validator.addMethod('customValidation', function (value, element) {
		var pattern1 = /[0-9A-Z][0-9A-Z]-[0-9A-Z][0-9A-Z]-[0-9A-Z][0-9A-Z]-[0-9A-Z][0-9A-Z]-[0-9A-Z][0-9A-Z]-[0-9A-Z][0-9A-Z]/;
 
		if ( pattern1.test(value) == false || value.length != 17) {
			return false;
		}
 
		return true;
	});

위의 방식으로 정규식 체크를 통해 개발자가 추가하고싶은대로 추가할 수 있다.