Skip to content

jquery-validation #
Find similar titles

Structured data

Category
Programming

jquery validation #

validation 플러그인 #

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

사용예제 #

INCLUDE 파일 #

<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>
<script type="text/javascript" src="messages_ko.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 #

$(function(){
    $("form").validate({
        //validation이 끝난 이후의 submit 직전 추가 작업할 부분
        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이 아닙니다"
            }
        }
    });
})

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 #

//도메인 형식 지정
$.validator.addMethod("domain", function(value, element) {
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");
    }
});
0.0.1_20140628_0