오늘은 실무에서 DataTables와 함께 사용되고 있는 jQuery Validation Plugin에 대한 포스팅을 해보겠습니다.
DataTables Plugin에 대해 알아보시는 분들은 아래 포스팅을 참고해 보시면 도움이 될 거 같습니다.
[ JQuery ] DataTables - Ajax Table Data 출력
오늘은 실무에서 JavaScript Source의 바탕으로 사용되고 있는 DataTables 라이브러리에 대해 포스팅해보겠습니다. 현재 LG 프로젝트 진행 중에 소스를 분석하면서 DataTables라는 라이브러리를 접하면서
drg2524.tistory.com
Validation Plugin
jQuery Validation은 유효성 검사를 쉽게 사용할 수 있도록 도와주는 플러그인입니다.
웹 프로그래밍에서 form 입력 데이터 유효성 검사는 사용자가 허용되지 않은 형식의 값을 입력하는 것을 방지해야 하는데
jQuery Validation을 사용하면 간단하면서도 실시간 유효성 검사가 가능합니다.
간단하게 사용하는 이유에 대해 메모 해보자면
- onkeyup, onfocusout을 이용해서 실시간 유효성 검사가 가능합니다.
- 사용자 편의성과 이해도를 높일 수 있습니다.
- 경고창 방식의 단점을 개선하고 사용자에게 빠른 체크가 가능하도록 시각화할 수 있습니다.
- One Click, One Check -> All Check 가능합니다.
Initial Settings
jQuery Validation Plug-in을 사용하기 위해 include 파일을 설정합니다.
<!-- jQuery 및 jQuery Validation 플러그인 로드 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
사용법은 간단한 테스트 예제를 통해서 알아보겠습니다.
TEST CODE
예제 HTML 코드는 간단한 사용자 정보를 입력하는 폼입니다.
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Validation</title>
<!-- jQuery 및 jQuery Validation 플러그인 로드 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="제출">
</form>
</body>
- JS
// jQuery Validation 플러그인을 사용하여 폼 유효성 검사 설정
$(document).ready(function () {
$("#myForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
}
},
messages: {
name: "이름을 입력하세요",
email: {
required: "이메일을 입력하세요",
email: "올바른 이메일 주소를 입력하세요"
},
password: {
required: "비밀번호를 입력하세요",
minlength: "비밀번호는 최소 {0}자 이상이어야 합니다"
}
}
});
});
jQuery Validation Plug-in을 사용하기 위해 HTML에서 사용된 폼에 대한 유효성 검사 규칙을 설정해줘야 하는데,
validate() 메서드를 사용해서 규칙을 설정합니다.
여기서 #myForm은 유효성 검사를 적용할 폼의 ID입니다.
그리고 rules 속성으로 form 필드의 검증 규칙을 정의했는데,
제공해 주는 메서드는 다음과 같습니다.
[ Rules Method ]
- required : 필수 입력 엘리먼트입니다.
- remote : 엘리먼트의 검증을 지정된 다른 자원에 ajax 로 요청합니다.
- minlength : 최소 길이를 지정합니다.
- maxlength : 최대 길이를 지정합니다.
- rangelength : 길이의 범위를 지정합니다.
- min : 최소값을 지정합니다.
- max : 최대값을 지정합니다.
- range : 값의 범위를 지정합니다.
- step : 주어진 단계의 값을 가지도록 합니다.
- email : 이메일 주소형식으 가지도록 합니다.
- url : url 형식을 가지도록 합니다.
- date : 날짜 형식을 가지도록 합니다.
- dateISO : ISO 날짜 형식을 가지도록 합니다.
- number : 10진수를 가지도록 합니다.
- digits : 숫자 형식을 가지도록 합니다.
- equalTo : 엘리먼트가 다른 엘리먼트와 동일해야 합니다.
예제에서는'name', 'email', 'password' 필드에 대한 규칙을 설정했고, 각 규칙은 필드의 ID 또는 이름과 함께 설정되며,
여러 규칙이 필요한 경우 객체로 정의할 수 있습니다.
마지막으로 messages 속성은 검증 실패 시 사용자에게 표시될 메시지를 정의합니다.
규칙에 대한 메시지는 필드의 ID 또는 이름과 함께 설정했습니다.
이를 통해 사용자가 올바르지 않은 데이터를 입력했을 때 적절한 메시지를 제공할 수 있습니다.
위 예제를 통해서 간단하게 사용자가 폼을 제출할 때 jQuery Validation Plug-in은 정의된 규칙에 따라 입력 데이터를 검증하고, 유효하지 않은 경우 메시지를 표시합니다.
마치며
오늘은 간단한 예제 코드를 통해서 jQuery Validation Plug-in 사용법을 알아봤습니다.
form 안에서 사용자들이 허용되지 않은 형식의 값을 입력하는 것을 방지할 때 자주 쓰이는 Plug-in으로 알고 있는데,
최대 장점이 유효성 검사의 규칙과 사용자에게 보여질 메시지를 JSON 형식으로 정의해 놓으면 스스로 동작하기 때문에
jQuery 필수 Plug-in 중의 하나라고 생각합니다.
다음 포스팅에서 뵙겠습니다.
'[ Script ] > JAVA Script' 카테고리의 다른 글
| [ JAVA Script ] chart.js - 실시간 그래프 차트 구현하기 (0) | 2025.01.07 |
|---|---|
| [ jQuery ] DataTables - Ajax Table Data 출력 (46) | 2024.01.18 |
| [ JAVA Script ] Promise Constructor (0) | 2023.10.21 |
| [ JAVA Script ] Mobile Web UI구현 (0) | 2023.02.28 |
| [ JAVA Script ] Ajax (0) | 2023.02.27 |