jquery validate

공부/Jquery

jquery validate

성난호랑이 시니철 2015. 12. 29. 17:19

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

HTML

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/

저작자표시