jQuery validation (유효성체크) | Client Side

http://docs.jquery.com/Plugins/Validation/validate#options

<?XML:NAMESPACE PREFIX = O /> 

jQuery가 기존에 있어야 하고 jQuery호환버전은 jQuery 1.3.2 또는 1.4.2 둘다 가능하다.

 

[jQuery Form Plugin 다운로드]

http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js

http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js

http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js

http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

 

[스크립트 코드]

<script src="/js/jquery/jquery.validate.js"></script> 

또는

<script src="/js/jquery/jquery.validate.min.js"></script>

 

<script type="text/javascript"> 

$(document).ready(function() { 

$("#login_form").validate({ 

    rules: { 

        userId: "required", 

        password: { 

            required: true, 

            minlength: 3 

        },

        confirm_password: {

           required: true,

           minlength: 8,

           equalTo: "#password"

       },

        email: {

            required: true,

            email: true

        },

        agree: "required"

    }, 

    messages: { 

        userId: "아이디는 반드시 입력되어야 합니다",

        password: { 

            required: "패스워드는 반드시 입력되어야 합니다", 

            minlength: "3자리이상" 

        },

        confirm_password: {

            required: "암호를 한 번 더 입력해 주세요",

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

            equalTo: "암호가 일치하지 않습니다."

        },

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

        agree: "정책 동의에 체크해 주세요"

    }

}); 

</script>

 

* 이메일 유형은 아이디@도메인(.com, co.kr, .net ...) 이런 형태를 가지고 있어야 한다.

* 위의 agree는 우리가 흔히 볼 수 있는 약관 동의 체크박스 같은 것들이다.

   <input type="checkbox" class="checkbox" id="agree" name="agree" />

* 암호 다시 입력하기 등에서 보면 다른 입력필드와 동일하게 입력했는지 여부를 체크하는 기능도 있다.

 

[css에 추가할 사항]

아래 stype을 추가하면 입력오류가 발생하였을 때 아래의 스타일로 보여주게 된다.

 

- 에러메세지 옆으로 보여주기

폭의 공간이 있다면 옆으로 보여주는 편이 더 좋음.

input.error, textarea.error{

  border:1px dashed red;

}

label.error{

  margin-left:10px;

  color:red;

}

 

- 에러메세지 아래쪽으로 보여주기

아래로 보여줄 경우에는 길이가 길어져 화면이 늘어남.폭이 좁을 때 사용함.

<style type="text/css">

input.error, textarea.error{

  border:1px dashed red;

}

label.error{

  display:block;

  color:red;

}

</style>


[remote]

인증을 할 때 다른 파일이나 url을 통해 인증을 받고 싶을 땐 remote 속성을 이용하면 된다.

        USER_EMAIL: { 
            required: true, 
            email: true,
        remote : {
        type : "POST",
        url  : "check_user_email.php"
        }
        }


이렇게 하면 check_user_email.php에 USER_EMAIL파라미터(여기서는 포스트로 지정되었으니 포스트로 받아야 함)를 받아서

true 또는 false를 반환해 주면되고 ... 만약 false를 반환할 때 msg는


    USER_EMAIL: {
          required: "사용자 이메일을 입력해 주세요",
        email: "형식에 맞는 사용자 이메일을 입력해 주세요." ,
        remote :  "사용자 이메일이 중복됩니다. 다른 이메일을 입력해 주세요"
    }

메세지 부분에서 이렇게 정의해 주면 된다.

출처 : http://blog.naver.com/haimy?Redirect=Log&logNo=110092643892

 

jQuery,validation
Comment Write
Comment List
등록된 코멘트가 없습니다.