jquery validation #

validation 플러그인 #

웹 프로그래밍에서 form 입력 데이터 유효성 검사는 사용자가 허용되지 않은 형식의 값을 입력하는 것을 방지하기 위하여 꼭 필요한 기능이다. jquery validation은 이러한 유효성 검사를 쉽게 사용할 수 있도록 도와주는 플러그인이다.

• 경고창 방식의 단점을 개선하고 사용자에게 빠른 체크가 가능하도록 시각화
• 원클릭, 원체크의 단점을 개선하여 원클릭 올체크가 가능
• onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능
• 색 혹은 텍스트를 이용하여 빠른 정보를 제공함
• 사용자 편의성과 이해도를 높일 수 있음

사용 예제 #

INCLUDE 파일 #

// jquery validate를 사용하기 위해서는 jquery library가 있어야 함
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="additional-methods.min.js"></script>

HTML 예제 #

<form action="/test.jsp" id="frm">
    아이디 : <input type="text" name="id" id="id"/><br/>
    비밀번호 : <input type="password" name="password" id="password"/><br/>
    비밀번호확인 : <input type="password" name="repassword" id="repassword"/><br/>
    나이 :  <input type="text" name="age" id="age"/><br/>
    이름 : <input type="text" name="name" id="name"/><br/>
    이메일 : <input type="text" name="email" id="email"/><br/>
    홈페이지 : <input type="text" name="homepage" id="homepage"/><br/>
    <input type="submit" value="회원가입" />
</form>

javascript code #

//validate(): 
$(function(){
    $("form").validate({
         /**
        * submitHandler : form 양식이 유효한 경우 실질적인 
        * submit을 하기 위한 콜백 핸들러. 
        * 유효성이 확인된 후 Ajax를 통해 처리하기에 적합하다.
        */
        submitHandler: function() {
            var f = confirm("회원가입을 완료하겠습니까?");
            if(f){
                return true;
            } else {
                return false;
            }
        },
        // 체크할 항목들의 룰 설정
        rules: {
            id: {
                required : true,
                minlength : 5,
                remote: "/check_id.jsp"
            },
            password: {
                required : true,
                minlength : 3
            },
            repassword: {
                required : true,
                minlength : 3,
                equalTo : password
            },
            name: {
                required : true,
                minlength : 2
            },
            age: {
                digits : true
            },
            email: {
                required : true,
                minlength : 2,
                email : true
            },
            homepage: {
                url : true
            }
        },
        //규칙체크 실패시 출력될 메시지
        messages : {
            id: {
                required : "필수로입력하세요",
                minlength : "최소 {0}글자이상이어야 합니다",
                remote : "존재하는 아이디입니다"
            },
            password: {
                required : "필수로입력하세요",
                minlength : "최소 {0}글자이상이어야 합니다"
            },
            repassword: {
                required : "필수로입력하세요",
                minlength : "최소 {0}글자이상이어야 합니다",
                equalTo : "비밀번호가 일치하지 않습니다."
            },
            name: {
                required : "필수로입력하세요",
                minlength : "최소 {0}글자이상이어야 합니다"
            },
            age: {
                digits : "숫자만입력하세요"
            },
            email: {
                required : "필수로입력하세요",
                minlength : "최소 {0}글자이상이어야 합니다",
                email : "메일규칙에 어긋납니다"
            },
            homepage: {
                url : "정상적인 URL이 아닙니다"
            }
        }
    });
})

• 출처 : http://jqueryvalidation.org
• 사용 예제 : http://jqueryvalidation.org/files/demo/

Options #

https://jqueryvalidation.org/validate/

jquery validation을 다양한 방법으로 활용할 수 있는 options에 대한 document. 유용한 기능을 다양하게 제공하므로 사용 전에 꼭 한번 읽어보는 것을 추천한다.

예를 들어 form data가 invalidate할 시 경고창(alert)을 띄우고 싶다면, 다음과 같이 옵션값을 설정해주면 된다.

change options #

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);
    }
});

Rule #

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

Rule Customizing #

기본적으로 제공되는 rule 이외에 다른 rule이 필요한 경우, $.validator.addMethod로 custom rule을 등록할 수 있다. 인자로는 rule을 명시하는 도메인 값과 validate check function을 등록해주면 된다.

//도메인 형식 지정
$.validator.addMethod("domain", function(value, element) {
// validate check function
return this.optional(element) || /^http:\/\/naver.com.com/.test(value);}, "도메인 형식을 확인하세요.");

//계산 식 지정
$.validator.addMethod("math", function(value, element, params) {
return this.optional(element) || value == params[0] + params[1];}, $.validator.format("올바른 값을 입력하세요. {0} + {1}"));

//에러메시지 출력 방식
$('form').validate({
  showErrors: function(errorMap, errorList) {
    if (errorList && errorList[0]) {
      //alert(errorList[0].message);
      //console.log(errorList[0].message);
      //errirModal(errorList[0].message)
    }
  },
  rules: {}
});

//에러메시지 위치 및 css 지정
$('form').validate({
    errorElement: "label",
    errorPlacement: function(error, element) {
        error.insertAfter(element);
        error.css("border", "1px solid red");
    }
});

//정규표현을 이용한 휴대폰 번호 양식
$.validator.addMethod("regex", function(value, element, regexp) {
        let re = new RegExp(regexp);
    let res = re.test(value)
    return res;

// rules에는 다음과 같이 기입
telno : {
    required : true,
    minlength : 12,
    regex : "^(010)[-\\s]?\\d{3,4}[-\\s]?\\d{4}$"
    }