[jQuery] jQuery Validate

jQuery Validate

jQuery Validate (링크)

jquery-validation-1.13.1.zip

jquery validate를 사용하기 위해서는 name값이 반드시 필요.

HTML

<form action="/register" id="registerform" method="post">

<label for="userName">이름</label>

<input type="text" id="userName" name="userName" placeholder="이름을 입력하세요"/>

<label for="nickName">닉네임</label>

<input type="text" id="nickName" name="nickName" placeholder="닉네임을 입력하세요"/>

<label for="email">이메일</label>

<input type="text" id="email" name="email" placeholder="이메일"/>

<label for="password">비밀번호</label>

<input id="password" name="password" type="password" placeholder="비밀번호를 입력하세요"/>

<label for="confirmPassword">비밀번호 확인</label>

<input type="password" id="confirmPassword" name="confirmPassword" placeholder="비밀번호 확인"/>

</form>

Script

$(document).ready(function() {

$("#registerform").validate({

rules: {

nickName: {

required: true

},

userName: {

required: true,

email: true,

remote: {

url: "/ajaxValidUser",

type: "GET",

data: {

userName: function() {

return $("#userName").val();

}

}

}

},

userNameAgain: {

required: true,

email: true,

equalTo: "#userName"

},

password: {

required: true,

minlength: 6

},

confirmPassword: {

required: true,

minlength: 6,

equalTo: "#password"

}

},

messages: {

userName : {

required : "이름 필드가 필요합니다."

}

nickName: {

required: "닉네임 필드가 필요합니다.",

},

email: {

required: "이메일을 한 번 더 입력해 주세요",

email: "형식에 맞는 이메일을 입력해 주세요.",

remote: "이미 존재하는 계정입니다. 다른 이메일주소를 사용해 주세요."

},

password: {

required: "비밀번호 필드가 필요합니다.",

minlength: "암호는 6자 이상이어야 합니다."

},

confirmPassword: {

required: "비밀번호 및 비밀번호 확인이 일치하지 않습니다.",

minlength: "암호는 6자 이상이어야 합니다.",

equalTo: "비밀번호 및 비밀번호 확인이 일치하지 않습니다."

}

},

submitHandler: function(form) {

if (!$("#allowpersonalinfo").is(":checked")) {

alert("개인정보 수집에 동의해 주세요.");

return false;

} else if (!$("#allowterms").is(":checked")) {

alert("약관에 동의해 주세요.");

return false;

}

form.submit();

}

});

});

자주 사용하는 옵션

최소 길이 체크

minlength : 6

최대 길이 체크

maxlength : 10

길이 범위 체크

rangelength[6, 10] // 6자리 이상 10자리 이하

숫자의 최소값 체크

min : 15 // 15보다 작을 경우 false

숫자의 최대값 체크

max : 20 // 20보다 클 경우 false

숫자의 범위 체크

range : [10, 100] // 10보다 작거나 100보다 클 경우 false

이메일 형식의 값인지 체크

email : true

유효한 url 형식인지 체크

url : true

유효한 날짜 형식의 값인지 체크

date : true

유효한 숫자인지 체크

number : true

해당 값과 비교

equalTo : "비교할 대상" // 다를 경우 false

서버 페이지 전달 후 결과 값

remote : {

url: "/ajaxValidUser",

type: "GET",

data: {

userName: function() {

return $("#userName").val();

}

}

서버에서 결과값은 무조건 boolean(true/false) 형식이어야 한다.

예를들어 아이디 중복체크의 경우 false인 경우는 중복, true인 경우는 사용가능이다.

유효한 digit 값인지 체크

digits : true // 양의 정수만 허용

사용자 정의 옵션 추가

jQuery.validator.addMethod("추가할 메서드명", function(value, element) {   

// 검증 코드

}, "에러 메세지");

ex1)

// 우편번호 확인   

jQuery.validator.addMethod("isZipCode", function(value, element) {   

    var tel = /^[0-9]{6}$/;

    return this.optional(element) || (tel.test(value));

}, "우편번호를 정확하게 입력해 주세요.");

ex2)

// jquery 데이트피커 날짜 형식 옵션 추가

jQuery.validator.addMethod("date", function(value, element, params) {

if(this.optional(element)) {

return true;

};

var result = false;

try{

$.datepicker.parseDate('yy-mm-dd', value);

result = true;

}catch(err){

result = false;

}

return result;

},"");

ex3)

// 전화번호 형식 추가

jQuery.validator.addMethod("phone", function(phone_number, element) {

   phone_number = phone_number.replace(/\s+/g, ""); 

   return this.optional(element) || phone_number.length > 9 &&

phone_number.match(/^(?:(010-\d{4})|(01[1|6|7|8|9]-\d{3,4}))-(\d{4})$/)

|| this.optional(element) || phone_number.length > 9 &&

phone_number.match(/^\d{2,3}-\d{3,4}-\d{4}$/);

}, "정확한 형식을 입력하여 주세요.");

jQuery.validator.addMethod("isNumber", function(value, element) {   

        //var tel = /^((01[1|6|7|8|9])[1-9]+[0-9]{6,7})|(010[1-9][0-9]{7})$/;

        var tel = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/;

        if(this.optional(element) || (tel.test(value))){

        trans_num = value.replace(/^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?([0-9]{3,4})-?([0-9]{4})$/, "$1-$2-$3");

        $("#contactNumber").val(trans_num);

        }

        return this.optional(element) || (tel.test(value));

    }, "잘못된 전화번호입니다. 숫자, - 를 포함한 숫자만 입력하세요. 예) 050-XXXX-XXXX");

에러 메세지 형태를 기존의 alert() 형태로 바꾸는 경우

jQuery.validator.setDefaults({

onkeyup:false,

onclick:false,

onfocusout:false,

showErrors:function(errorMap, errorList){

if(this.numberOfInvalids()) { // 에러가 있을 때만..

alert(errorList[0].message);

}

}

});

or

errorPlacement: function(error, element) {

           // do nothing

       }, invalidHandler: function(form, validator) {

            var errors = validator.numberOfInvalids();

            if (errors) {

                alert(validator.errorList[0].message);

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

            }          

       },

submitHandler에서 Ajax를 사용할 경우

submitHandler: function(form) {

$.ajax({

// ajax 구문

});

return false; // return 을 명시해 줘야 한다.

}

location.href등 alert 확인 버튼을 누른후 이벤트가 일어나야할 때

alertify.alert("잘 못된 접근입니다", function(){
            location.href="주소";
        });

form 검증 여부

if($("#formId").valid()){

// form 검증이 된 경우

}else{

}

reset 

var validator = $( "#myform" ).validate();
validator.resetForm();