<JavaScript> JS를 이용한 폼 유효성 검사
- Developer/Web Frontend
- 2023. 8. 26.
반응형
JavaScript를 이용한 폼 유효성 검사: 사용자 입력 확인하기
폼을 이용하여 사용자로부터 정보를 받을 때, 폼에 올바른 정보가 입력되었는지 확인하는 과정은 필수적입니다.
폼 유효성 검사를 통해 이를 수행할 수 있습니다. 자바스크립트를 이용한 폼 유효성 검사를 살펴봅시다.
기본 폼 구성 및 처리
우선 간단한 HTML 폼을 만들어 봅시다. 이 폼에는 이름, 이메일, 암호 등 필요한 입력란이 있습니다.
<form id="userForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<br/>
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<br/>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<br/>
<input type="submit" value="Submit">
</form>이벤트 처리 및 기본 동작 차단
폼 유효성 검사를 수행하기 전에, 폼의 제출 버튼이 클릭되었을 때 수행될 이벤트를 처리해야 합니다.
이 경우에는 JavaScript를 이용해 submit 이벤트를 포착합니다. 또한, 기본 submit 동작을 차단하여 페이지 새로 고침이 발생하지 않게 해야합니다.
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault(); // 기본 submit 동작 차단
// 유효성 검사 수행
});입력란 값에 따른 유효성 검사
이제 각 입력란에 대한 유효성 검사를 수행하겠습니다. 입력란의 값이 적절한지에 따라 다양한 조건을 검토해야 합니다.
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
if (name.trim() === "") {
alert("Please enter a name.");
return false;
}
if (email.trim() === "") {
alert("Please enter an email address.");
return false;
}
if (password.trim() === "" || password.length < 6) {
alert("Please enter a password with at least 6 characters.");
return false;
}
alert("Form submitted successfully!");
return true;
}위의 코드는 각 입력란의 값을 검증한 후, 문제가 있으면 알람을 생성하고 유효성 검사를 종료합니다.
모든 값이 적절하다면 폼 제출에 성공했다는 메시지를 표시합니다.
전체 코드 구성
다음은 HTML과 JavaScript를 합친 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation Example</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault(); // 기본 submit 동작 차단
// 유효성 검사 수행
if (validateForm()) {
// 서버에 폼 전송 작업 (e.g., AJAX, 데이터베이스 연결)
}
});
});
function validateForm() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
if (name.trim() === "") {
alert("Please enter a name.");
return false;
}
if (email.trim() === "") {
alert("Please enter an email address.");
return false;
}
if (password.trim() === "" || password.length < 6) {
alert("Please enter a password with at least 6 characters.");
return false;
}
alert("Form submitted successfully!");
return true;
}
</script>
</head>
<body>
<form id="userForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name">
<br/>
<label for="email">이메일:</label>
<input type="email" id="email" name="email">
<br/>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password">
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
감사합니다.
'Developer > Web Frontend' 카테고리의 다른 글
| <JavaScript> 비동기 처리와 AJAX (0) | 2023.08.27 |
|---|---|
| <JavaScript> 웹 API 소개: Fetch, LocalStorage, Geolocation 등 (0) | 2023.08.27 |
| <JavaScript> 문서 객체 모델(DOM) (0) | 2023.08.25 |
| <JavaScript> 이벤트 처리(Event Handling)와 리스너 (0) | 2023.08.24 |
| <JavaScript> 클래스와 객체지향 프로그래밍 (0) | 2023.08.24 |