1. HTML5 기본 유효성 검사
HTML5는 기본적인 폼 유효성 검사를 위한 속성을 제공하므로 간단한 폼에서는 JavaScript 없이도 데이터 형식을 확인할 수 있습니다. 주요 HTML5 유효성 검사 속성들을 살펴보겠습니다.
1) required
required 속성을 사용하면 필수 입력 필드로 설정할 수 있습니다. 사용자가 입력하지 않으면 폼이 제출되지 않습니다.
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required>2) min과 max
숫자 또는 날짜 입력에 최소값과 최대값을 설정하여 유효성 검사를 할 수 있습니다.
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" minlength="8" maxlength="16" required>3) minlength와 maxlength
문자열 길이에 대한 최소/최대 길이를 설정할 수 있습니다.
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" minlength="8" maxlength="16" required>4) pattern
정규식을 사용해 특정 패턴에 맞는 문자열만 입력받도록 할 수 있습니다. 예를 들어, 전화번호 형식을 지정할 때 유용합니다.
<label for="phone">전화번호:</label>
<input type="text" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" placeholder="010-1234-5678">2. JavaScript로 커스텀 유효성 검사
HTML5 유효성 검사로 충분하지 않은 경우 JavaScript로 커스텀 유효성 검사를 추가할 수 있습니다. JavaScript를 사용하면 조건을 더욱 세밀하게 설정하고, 사용자에게 실시간으로 오류 메시지를 표시할 수 있습니다.
JavaScript 유효성 검사 예제
아래는 사용자 이름, 이메일, 비밀번호를 검증하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 유효성 검사 예제</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<h2>회원가입 폼</h2>
<form id="signupForm" onsubmit="return validateForm()">
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" minlength="8" required><br><br>
<button type="submit">가입하기</button>
</form>
<p id="errorMsg" class="error"></p>
<script>
function validateForm() {
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const errorMsg = document.getElementById('errorMsg');
// 초기화
errorMsg.innerText = '';
// 사용자 이름 유효성 검사
if (username.length < 3) {
errorMsg.innerText = "사용자 이름은 최소 3자 이상이어야 합니다.";
return false;
}
// 이메일 형식 검사 (기본 HTML5 속성으로 대체 가능)
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
if (!emailPattern.test(email)) {
errorMsg.innerText = "유효한 이메일 주소를 입력하세요.";
return false;
}
// 비밀번호 길이 검사
if (password.length < 8) {
errorMsg.innerText = "비밀번호는 최소 8자 이상이어야 합니다.";
return false;
}
// 유효성 검사를 모두 통과한 경우
alert("회원가입이 완료되었습니다!");
return true;
}
</script>
</body>
</html>코드 설명
- JavaScript 함수: validateForm() 함수에서 사용자 이름, 이메일, 비밀번호의 유효성을 확인합니다.
- 오류 메시지: 조건을 만족하지 않을 경우 errorMsg 요소에 오류 메시지를 표시하고, 폼 제출을 막습니다.
3. 유효성 검사와 사용자 경험 향상
실시간 유효성 검사
JavaScript 이벤트 리스너를 사용해 실시간으로 유효성을 검사하여 사용자 경험을 개선할 수 있습니다. 예를 들어, input 이벤트를 사용해 사용자가 필드를 입력할 때마다 오류를 실시간으로 확인할 수 있습니다.
document.getElementById('username').addEventListener('input', function() {
if (this.value.length < 3) {
document.getElementById('errorMsg').innerText = "사용자 이름은 최소 3자 이상이어야 합니다.";
} else {
document.getElementById('errorMsg').innerText = "";
}
});브라우저 기본 오류 메시지와 커스텀 메시지
HTML5에서는 기본 오류 메시지를 제공하지만, JavaScript를 통해 커스텀 메시지를 설정하면 사용자에게 더 명확한 안내를 할 수 있습니다.
요약
이번 강의에서는 HTML5의 기본 폼 유효성 검사 속성들과 JavaScript를 활용한 커스텀 유효성 검사 방법을 배웠습니다. 유효성 검사를 통해 예상치 못한 오류를 줄이고, 사용자 경험을 향상할 수 있습니다. 다음 강의에서는 미디어 삽입을 다루며 이미지, 비디오, 오디오를 HTML에 추가하는 방법을 알아보겠습니다.
'Study > HTML' 카테고리의 다른 글
| HTML 기초 강의 11편: 웹 접근성(Accessibility) 기초와 ARIA 태그 (1) | 2024.11.11 |
|---|---|
| HTML 기초 강의 10편: 이미지, 비디오, 오디오 삽입하기 (3) | 2024.11.10 |
| HTML 기초 강의 8편: HTML5 시맨틱 태그로 웹 구조 개선하기 (5) | 2024.11.08 |
| HTML 기초 강의 7편: 테이블로 데이터 정리하기 (0) | 2024.11.07 |
| HTML 기초 강의 6편: 폼과 입력 필드 (5) | 2024.11.06 |
