jquery validate

validate-Test.zip

실행을 하면 실시간으로 체크를 해줍니다.

HTML

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

head 에 위와 같이 작성해주셔야 합니다.

validate.js

$(document).ready(function() { $("#frm12").validate({ // 내가 지정하고자 하는 html form 아이디값을 지정해주셔야 합니다. rules : { name : { required : true, minlength : 2, // 최소 입력 수 maxlength : 15 // 최대 입력 수 }, email : { required : true, // 필수 값인지 체키 email : true // 타입지정 jquery validate 에서 지원해주는 기본타입 jquery.validate.js 접속하셔서 변경 가능합니다. }, telPhone : { required : true, phone: true }, cellPhone : { required : false, // 필수 값이 아니면 fales phone: true }, birthday : { required : true }, address1 : { required : true }, password : { required : true, minlength : 6, maxlength : 15 }, passwordCk : { required : true, minlength : 6, maxlength : 15, equalTo : "#password" // 위비밀번호랑 동일한지 비교 체크 } }, messages : { name : { required : " 이름을 입력하세요.", minlength : " {0}글자 이상으로 입력하세요.", maxlength : " {0}글자 이하로 입력하세요." }, telPhone : { required : " 휴대전화번호를 입력하세요.", phone : " 휴대전화번호 타입이 아닙니다." }, cellPhone : { phone : "전화번호 타입이 아닙니다." }, birthday : { required : " 생년월일을 입력하세요." }, address1 : { required : " 주소를 입력하세요." }, email : { required : " 이메일을 입력하세요.", email : " 이메일을 바르게 입력하세요." }, password : { required : " (대소문자 구분, 15자 이내)", minlength : " {0}글자 이상으로 입력하세요.", maxlength : " {0}글자 이하로 입력하세요." }, passwordCk : { required : " (대소문자 구분, 15자 이내)", minlength : " {0}글자 이상으로 입력하세요.", maxlength : " {0}글자 이하로 입력하세요.", equalTo : " 비밀 번호가 서로 일치하지 않습니다." } } }); });

minlength 
최소 길이 체크. ex) minlength: 3

maxlength 
최대 길이 체크. ex) maxlength: 10

rangelength 
길이 범위 체크. ex) rangelength[2, 6] // 2글자 이상 6글자 이하

min 
숫자의 최솟값 체크. ex) min: 13 // 13보다 작을 경우 false

max 
숫자의 최댓값 체크. ex) max: 5 // 5보다 클 경우 false

range
숫자의 범위 체크. ex) range: [13, 24] // 13보다 작거나 24보다 클 경우 false

email
이메일 형식의 값인지 체크. ex) email: true

참조 http://jqueryvalidation.org/