jquery-validation
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
jquery validation #
validation 플러그인 #
웹 프로그래밍에서 form 입력 데이터 유효성 검사는 사용자가 허용되지 않은 형식의 값을 입력하는 것을 방지하기 위하여 꼭 필요한 기능이다. jquery validation은 이러한 유효성 검사를 쉽게 사용할 수 있도록 도와주는 플러그인이다.
- 경고창 방식의 단점을 개선하고 사용자에게 빠른 체크가 가능하도록 시각화
- 원클릭, 원체크의 단점을 개선하여 원클릭 올체크가 가능
- onkeyup, onfocusout을 이용하여 실시간 유효성 검사 가능
- 색 혹은 텍스트를 이용하여 빠른 정보를 제공함
- 사용자 편의성과 이해도를 높일 수 있음
사용 예제 #
INCLUDE 파일 #
// jquery validate를 사용하기 위해서는 jquery library가 있어야 함
<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>
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 #
//validate():
$(function(){
$("form").validate({
/**
* submitHandler : form 양식이 유효한 경우 실질적인
* submit을 하기 위한 콜백 핸들러.
* 유효성이 확인된 후 Ajax를 통해 처리하기에 적합하다.
*/
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이 아닙니다"
}
}
});
})
Options #
https://jqueryvalidation.org/validate/
jquery validation을 다양한 방법으로 활용할 수 있는 options에 대한 document. 유용한 기능을 다양하게 제공하므로 사용 전에 꼭 한번 읽어보는 것을 추천한다.
예를 들어 form data가 invalidate할 시 경고창(alert)을 띄우고 싶다면, 다음과 같이 옵션값을 설정해주면 된다.
change options #
jQuery.validator.setDefaults({
onkeyup:false,
onclick:false,
onfocusout:false,
showErrors:function(errorMap, errorList){
var caption = $(errorList[0].element).attr('caption') ||
$(errorList[0].element).attr('name');
alert('[' + caption + ']' + errorList[0].message);
}
});
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 #
기본적으로 제공되는 rule 이외에 다른 rule이 필요한 경우, $.validator.addMethod로 custom rule을 등록할 수 있다. 인자로는 rule을 명시하는 도메인 값과 validate check function을 등록해주면 된다.
//도메인 형식 지정
$.validator.addMethod("domain", function(value, element) {
// validate check function
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");
}
});
//정규표현을 이용한 휴대폰 번호 양식
$.validator.addMethod("regex", function(value, element, regexp) {
let re = new RegExp(regexp);
let res = re.test(value)
return res;
// rules에는 다음과 같이 기입
telno : {
required : true,
minlength : 12,
regex : "^(010)[-\\s]?\\d{3,4}[-\\s]?\\d{4}$"
}