jQuery를 사용하여 텍스트 필드 값이 변경될 때 유효성 검사를 수행하는 방법을 알려드리겠습니다. 이를 위해 change 이벤트와 keyup 이벤트를 활용할 수 있습니다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>유효성 검사 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
<span id="username-error" style="color: red; display: none;">유효하지 않은 값입니다.</span>
<br>
<label for="email">이메일:</label>
<input type="text" id="email" name="email">
<span id="email-error" style="color: red; display: none;">올바른 이메일 주소를 입력하세요.</span>
<br>
<button type="submit">제출</button>
</form>
<script src="validation.js"></script>
</body>
</html>
jQuery 코드 (validation.js)
$(document).ready(function () {
// 사용자 이름 유효성 검사
$("#username").on("keyup change", function () {
const username = $(this).val();
if (username.length < 3 || username.length > 15) {
$("#username-error").show();
} else {
$("#username-error").hide();
}
});
// 이메일 유효성 검사
$("#email").on("keyup change", function () {
const email = $(this).val();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
$("#email-error").show();
} else {
$("#email-error").hide();
}
});
// 폼 제출 시 유효성 검사
$("#myForm").on("submit", function (e) {
let isValid = true;
// 사용자 이름 검사
const username = $("#username").val();
if (username.length < 3 || username.length > 15) {
isValid = false;
$("#username-error").show();
}
// 이메일 검사
const email = $("#email").val();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
isValid = false;
$("#email-error").show();
}
if (!isValid) {
e.preventDefault(); // 제출 방지
alert("유효성 검사를 통과하지 못했습니다.");
}
});
});
설명
- keyup 및 change 이벤트 사용:
- 사용자가 텍스트 필드의 값을 입력하거나 값을 변경할 때마다 유효성 검사를 즉시 수행합니다.
- 유효성 검사 조건:
- 사용자 이름은 최소 3자 이상, 최대 15자 이하.
- 이메일은 정규식을 사용하여 형식 검사를 수행합니다.
- 오류 메시지 처리:
- 유효하지 않은 값일 경우, 해당 오류 메시지를 표시.
- 올바른 값이 입력되면 오류 메시지를 숨김.
- 폼 제출 유효성 검사:
- 사용자가 입력한 값이 유효하지 않으면 폼 제출을 막고 경고 메시지를 표시합니다.
위 코드를 통해 실시간으로 텍스트 필드 값의 유효성을 검사할 수 있습니다. 필요에 따라 검사 조건을 변경하거나 추가할 수 있습니다.
#jquery #change #keyup #event #유효성검사 #폼제출유효성검사 #오류메시지처리
반응형
'프로그램' 카테고리의 다른 글
| jquery 파일 업로드 시 선택된 파일 이름 표시 (0) | 2024.12.05 |
|---|---|
| jquery 다중 선택 박스 값 출력 (0) | 2024.12.03 |
| jquery 라디오 버튼으로 입력 폼 변경 (0) | 2024.11.29 |
| jquery 체크박스 선택 시 특정 섹션 활성화/비활성화 (0) | 2024.11.27 |
| jquery 드롭다운 메뉴에서 선택에 따라 내용 변경 (0) | 2024.11.26 |
댓글