validation plugin

Html form 안에서 허용되지 않은 형식의 값을 입력하는 것을 방지하기 위하여 submit 이벤트가 발생했을 때 입력 여부 및 입력 형식의 값을 검사하는 처리가 반드시 필요하다. validation 플러그인은 유효성 검사를 하기 위한 jquery 플러그인 중의 하나이다.

플러그인 참조

jquery를 사용하기 위한 jquery 라이브러리와 validation을 사용하기 위한 플러그인을 참조한다.

<!-- jQuery 라이브러리 참조--> 
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>                                          
<!-- plugin 참조-->
<script type="text/javascript" src="js/jquery-validation/jquery.validate.min.js"></script>

valid

valid 메서드는 유효성 검사를 위한 간단한 방법이다. 예를들어 다음과 같이 input에 required가 적용되어 있고 valid 메서드를 호출하면 유효성 검사를 수행한다.

<form id="frm_test">
  <input type="text" id="username" name="username" class="required" />
</form>

<script>
  $(function () {
    // 유효성 검사를 수행
  	if(!$('#frm_test').valid()){
  		return;
  	}
  })
</script>

validate

validate 메서드는 검사 규칙을 지정해서 세분화된 유효성 검사를 수행한다.

$('#form_id').validate({..검사규칙..});

메서드 옵션

validate 메서드는 debug, rules, message 3개의 옵션으로 구성되어 있다.

• debug : 유효성 검사가 완료되어도 submit을 하지 않는다.
• rules : 검사할 필드와 검사 항목을 나열 한다.
• message : 유효성 검사가 실패할 경우 표시할 메시지를 나열 한다.

$('#form_id').validate({
 	debug : true,
	rules : {
		name속성 값: {
			required : true,             //필수여부 지정
            digits : true,               //숫자만 입력 지정
            email : true,                //이메일만 입력 지정
            url : true,                  //url만 입력 지정
            minlength : 4,               //최소길이 지정
            maxlength : 8,               //최대길이 지정
            equalTo : "값 또는 다른 태그 아이디(#아이디)", //특정 요소와 입력값이 같은지 여부 검사
			range: [최대, 최대],
			remote: "serverside 요청으로 true/false를 반환" // ajax 수행
		}
	},
	messages : {
		name속성 값 : {
            required : "필수 입력 항목 입니다.",
            digits : "숫자만 입력하세요.",
            minlength : "최소 {0}글자 입니다.",
            maxlength : "최대 {0}글자 입니다.",
            equalTo : "입력이 잘못되었습니다.",
				.
				.
        }
	}
});

예를들어 input 태그에 대한 유효성을 검사하기 위해서는 다음과 같다.

<form id="frm_test">
  <input type="text" id="userage" name="userage" class="required" />
  <input type="text" type="password" id="userpwd" name="userpwd" class="required" />
  <input type="text" type="password" id="userpwdConfirm" name="userpwdConfirm" class="required" />
</form>

<script>
  $(function () {
  	// 숫자 형식에 대한 유효성 검사를 수행
  	$('#frm_test').validate({
    	rules: {
        	userage: {
            	digits: true
            },
  			userpwdConfirm: {equalTo:'#userpwd'}
        },
        message: {
        	userage: {
            	digits: '숫자만 입력하세요.'
  			},
  			userpwdConfirm: { equalTo:"암호를 다시 확인하세요" }
  		}
  	});

    // required에 대한 유효성 검사를 수행
  	if(!$('#frm_test').valid()){
  		return;
  	}
  })
</script>