[jQuery - 기능 - (5) ] $.validate() - (1) : 유효성 검사 [ 확인 문구 바로 출력 ]
$.validate()
validation 플러그인, HTML의 Form 안에서는 사용자들이 허용되지 않은 형식의 값을 입력하는 것을 방지하기 위하여 submit 이벤트가 발생했을 때 입력 여부 및 입력 형식의 값을 검사하는 처리가 반드시 필요하다. 그런데 이러한 유효성 검사 처리는 많은 if문의 구조를 필요로 하기 때문에 Javascript를 코딩하는 입장에서는 매우 번거러운 처리이다.
validation 플러그인은 유효성 검사의 규칙과 사용자에게 보여질 메시지를 JSON형식으로 정의해 놓으면 스스로 동작하는 jQuery 필수 플러그인 중의 하나이다.
기본 제공 메소드
- required : 필수 입력 엘리먼트입니다.
- remote : 엘리먼트의 검증을 지정된 다른 자원에 ajax 로 요청합니다.
- minlength : 최소 길이를 지정합니다.
- maxlength : 최대 길이를 지정합니다.
- rangelength : 길이의 범위를 지정합니다.
- min : 최소값을 지정합니다.
- max : 최대값을 지정합니다.
- range : 값의 범위를 지정합니다.
- step : 주어진 단계의 값을 가지도록 합니다.
- email : 이메일 주소형식으 가지도록 합니다.
- url : url 형식을 가지도록 합니다.
- date : 날짜 형식을 가지도록 합니다.
- dateISO : ISO 날짜 형식을 가지도록 합니다.
- number : 10진수를 가지도록 합니다.
- digits : 숫자 형식을 가지도록 합니다.
- equalTo : 엘리먼트가 다른 엘리먼트와 동일해야 합니다.
예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>회원가입: validate 플러그인을 사용하여 유효성 검사</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#registerForm label.error { margin-left: 10px; color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.3.2.min.js" ></script>
<!-- jQuery.validate 플러그인 삽입 -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
//기본형태
//$('#registerForm').validate(); //유효성 검사를 적용
// validate signup form on keyup and submit
//확장옵션
$('#registerForm').validate({
rules: {
txtID:{required:true, minlength:3, remote:"Validate"},
txtPassword: "required",
txtPasswordConfirm: {required:true, equalTo:'#txtPassword'},
txtName: {required:true},
txtEmail: {required:true, email:true},
txtAge: {required:true, range:[1,100]} // 1~100범위
},
messages: {
txtID: {
required:"아이디를 입력하시오.",
minlength: jQuery.format("아이디는 {0}자 이상 입력해주세요!"),
remote : jQuery.format("입력하신 {0}는 이미존재하는 아이디입니다. ")
},
txtPassword:"암호를 입력하시오.",
txtPasswordConfirm: {
required: "암호확인를 입력하시오.",
equalTo:"암호를 다시 확인하세요" },
txtName: {required:"이름을 입력하시오."},
txtEmail: {
required:"이메일을 입력하시오.",
email:"올바른 이메일을 입력하시오."},
txtAge: {range: "나이는 1~100"}
}
//여기부터
,
submitHandler: function (frm){
frm.submit(); //유효성 검사를 통과시 전송
},
success: function(e){
//
}
//여기까지는 생략 가능
});
}); //end ready()
</script>
</head>
<body>
<form id="registerForm" method="post" action="sineup.jsp">
<!-- 반드시 입력이 필요한 항목은 class="required" 속성 입력 -->
아이디 : <input type="text" id="txtID" name="txtID" /> <br />
암호 : <input type="password" id="txtPassword" name="txtPassword" /> <br />
암호확인 : <input type="password" id="txtPasswordConfirm" name="txtPasswordConfirm" /> <br />
이름 : <input type="text" id="txtName" name="txtName" /> <br />
이메일 : <input type="text" id="txtEmail" name="txtEmail" /> <br />
나이 : <input type="text" id="txtAge" name="txtAge" value="0" /><br />
<input type="submit" value="전송" />
</form>
</body>
</html>
Color Scripter
|
'◽ HTML & CSS & JS, jQuery' 카테고리의 다른 글
| [jQuery - 기본 - (2) ] $(function(){}) ▶ $(document).ready(function(){ }) 같은 의미 (0) | 2019.08.14 |
|---|---|
| [jQuery - 기능 - (6) ] $.ajax(), $.getJSON → JSON 데이터 (0) | 2019.08.14 |
| [jQuery - 기능 - (5) ] $.validate() - (2) : errorPlacement - validate 메시지 위치 설정하기 (0) | 2019.08.13 |
| [jQuery - 기능 - (4) ] $.each() → 반복 함수 (0) | 2019.08.12 |
| [jQuery - 기능 - (3) ] $.var() → value load : 값 추출(로드) (0) | 2019.08.12 |
| [jQuery - 기능 - (2) ] $.on() → event bind ( 1.7 ver.) : 이벤트 설정 (0) | 2019.08.12 |
| [jQuery - 기능 - (1) ] $.ready() = $(document).ready(function(){ }) (0) | 2019.08.12 |