JQuery Validation Plugin 소개 및 활용!

 

미리보기

 

JQuery Validation Plugin 

앞서 포스팅 했던것 처럼 비슷하게 js로 유효성 검사를 구현할 수 있지만 미리 만들어져 있는걸 쓰고싶다면 jQuery Validation Plugin 이 있습니다.  상단 이미지와 같이 나오게 할 수 있으며 demo 페이지가 많으니 (https://jqueryvalidation.org/files/demo/milk/) 직접 경험할 수 있습니다.

 

사용 방법

1. 필요 코드 import

https://jqueryvalidation.org/ 여기서 다운로드 합니다.

jquery.validate.js  와 jquery  가 있어야합니다. (필수)

 

그리고 필자는 https://github.com/jquery-validation/jquery-validation/blob/bda9a58ec006e9ab866263c9209147ff6e3352ed/src/localization/messages_ko.js  파일도 추가하였습니다.

$.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} 이상의 값을 입력하세요." )
} );

 

2. 비밀번호 변경 예제

html

<form id="pwdUpdateForm" >
    <div>
        <ul>            
             <li>
                <label for="user_pwd">
                	새 비밀번호
                	<span>*</span>
               	</label>
                 <input type="password" id="user_pwd_new" class="" name="user_pwd_new" value="" >
            </li>
            <li>
                <label for="user_pwd_new">
                	새 비밀번호 확인
                	<span>*</span>
               	</label>
                 <input type="password" id="user_pwd_confirm" class="" name="user_pwd_confirm" value="">
            </li>
           
        </ul>
    </div>

    <!-- form_button -->
    <div class="form_button">
        <input type="button" value="취소" class="">
        <input type="submit" value="수정" class="">
    </div> <!-- //form_button -->
</form>

 

여기서 유의점은 <form>태그 안에 <input>태그가 위치해야한다는것과, 수정 버튼의 타입이 <input type="submit"> 이라는 것입니다. 그리고 유효성 검사를 할 태그들의 name값으로 판별하기에 꼭 써주어야합니다.

 

script

	$("#pwdUpdateForm").validate({
		submitHandler: function(form) {
              $.ajax({
                url : "/pwdUpdate",
                type : "POST",
                data : $("#pwdUpdateForm").serialize(),
                dataType: 'JSON',
                success : function (data) {
                    alert("사용자 비밀번호 수정 완료")
                }
            });
		},
		rules:{
			user_pwd_new : {required:true, pwRegex:true},
			user_pwd_confirm : {required:true, equalTo:'#user_pwd_new'}
			
		}		
	});

모든 유효성 검사가 정상이면 submit  이 발생하여 controller로 가게됩니다.

rules 부분을 보면 user_pwd_new , user_pwd_confirm 은 우리가 html 에서 지정해준 name값입니다.

required:true는 필수값으로 지정하겠다는 뜻이며

equalTo는 해당 input의 value값이 아이디가 user_pwd_new인 태그의 value값과 일치하는지의 여부입니다.

 

pwRegex:true > 이부분은 제가 따로 customize한 부분입니다. 

$.validator.addMethod("pwRegex",function(value, element){
		return this.optional(element) || value.match(/^(?=.*[A-Za-z])(?=.*\d)(?=.*[#?!@$%^&*-])[A-Za-z\d#?!@$%^&*-]{8,15}$/);
	}, "영문, 숫자, 특수문자(#?!@$%^&*-)를 포함한 8~15자리");

 

js에서 끝나지 않고 만약 DB를 조회하고 싶을때에는

   $.validator.addMethod("pw_check",function(value, element){
    var res = false;
    if(value != ""){
      $.ajax({
        type:"GET",
        url:"pwdCheck",
        dataTye:"json",
        data:{user_pwd:value},
        async:false,
        success:function(data){
          if(data == "OK"){
            res = true;
          }
        }
      }); 
    }
    return res;
  }, "비밀번호가 일치하지 않습니다.");

function(value, element) 에서 파라미터의 value값이 사용자가 입력한  input value가 됩니다.

 

 

기본 설정 수정

jQuery.validator.setDefaults({
    onkeyup:false,
    onclick:false,
    onfocusout:false,
    showErrors:function(errorMap, errorList){
    var caption = $(errorList[0].element).attr('caption') ||
    $(errorList[0].element).attr('name');
    alert('[' + caption + ']' + errorList[0].message);
    }
});

 

참고 사이트

https://github.com/jquery-validation/jquery-validation