[JQuery]_validate 검증 플러그인

공식문서 :https://jqueryvalidation.org/

 

프로그램을 짜면서 데이터 검증은 필수적입니다.

 

JQuery 플러그인 중 validate 검증 플러그인을 사용했습니다.

 

JQuery 플러그인이기 때문에 순서는 jquery부터 받아와야 합니다.

<script src="/resources/app/js/jquery-3.4.1.min.js" type="text/javascript"></script>

그 후에 vaildate 스크립트가 옵니다.

<script type="text/javascript" src="/resources/js/jquery.validate.min.js"></script>

만약 커스텀해서 사용한다면 해당 경로를 스크립트 합니다. ※경로는 해당 파일 위치입니다.

<script type="text/javascript" src="/resources/js/jquery.vaildate.custom.js"></script>

 

script 에서 등록버튼과 같은 이벤트 작동시 아래와 같은 양식을 사용합니다.

#frmRequest => form 데이터

($('#frmRequest').valid()) 

해당 jsp 파일의 script 단 에서 바로 검증을 해서 메시지를 출력 할 수 있습니다.

let validator = $('#frmRequest').validate({

를 선언하여 form 데이터의 검증을 실시합니다.

 

validate 설정은 다음과 같습니다.

let validator = $('#frmRequest').validate({
    ignore: '',
    invalidHandler: function (form, validator) {
        let errors = validator.numberOfInvalids();
        if (errors) {
            let titles = validator.errorList.map(function (obj) {
                return obj.element.dataset.title
            }).join(', ');
            let msg = `필수 입력 정보를 모두 입력해 주세요.<br/>미입력 사항 : \${titles}`;
            common.alert(msg, function () {
                validator.errorList[0].element.focus();
            });
        }
    }
});

검증할 form 데이터에 validate() 를 통해 시작합니다.

ignore : 검증을 제외할 엘리먼트 요소입니다.

 

함수는 2가지가 있습니다.

 

submitHandle > 커스텀코드를 작성할 수 있는 콜백함수입니다. 유효성 여부를 가지고 있지 않습니다.

invalidHandler > 커스텀코드를 작성할 수 있는 콜백함수입니다. 유효성 검사를 실시합니다. 

유효성 검사가 필요함으로 invalidHandlere 를 사용합니다.

invalidHandler: function (form, validator) {

파라미터로는 2가지를 받습니다.

event > 이밴트 대상이 될 이벤트객체

Validator >  해당 커스텀 함수에서 사용할 인스턴스 validator 

 

let errors = validator.numberOfInvalids();

Description: Returns the number of invalid fields.

유효성 검사에 실패한 값들을 반환합니다.해당 반환값은 키와 value 로 이루어져있습니다.

let titles = validator.errorList.map(function (obj) {
    return obj.element.dataset.title
}).join(', ');

그중 title 의 키를 받와 저장합니다.

let msg = `필수 입력 정보를 모두 입력해 주세요.<br/>미입력 사항 : \${titles}`;

 

alert에 제공할 메세지를 작성합니다.

 

마지막으로 잘못 기입한 곳으로 focus를 이동합니다.

validator.errorList[0].element.focus();

 

또한 rule를 설정하여 사용자가 원하는 대로 검증할 수도 있습니다.

$("#myform").validate({
    rules: {
        contact: {
            required: true,
            email: {
                depends: function(element) {
                    return $("#contactform_email").is(":checked");
                }
            }
        }
    }
});

 

custom.js 를 별도로 지정하면 다음과 같은 포멧으로 작성 할 수 있습니다.

 

$.validator.addMethod("startdate",function (value,element){
    let year = new Date().getFullYear();
    let month = new Date().getMonth() +1;
    let day = new Date().getDate() +7;


    let compareDate = new Date(year +"-"+ month + "-"+ day);
    let inputDate = new Date(value);
    if(inputDate >= compareDate){
        return true;
    } else if(inputDate < compareDate){
        return false;
    }

}, $.validator.format('현재일로부터 7일 이후인 {0} 일 이후로 신청 가능합니다.'));

 

element 에 지정하는 법은 다음과 같습니다.

data-rule-method 이름을 작성합니다.

 

<input type="date" id="testdate"
       max="9999-12-31"
       data-title="일시"
       data-rule-startdate
       data-msg-required="일시를 선택해 주세요." required>

 

required 에 적용한 메시지는 label에 적용됩니다. 또한 rule에도 적용할 수 있습니다.

<label class="checkText" for="testdate"></label>

 

jquery를 사용해서 검증하는 방법에 대해 알아보았습니다.

감사합니다.