안녕하세요 오늘은 Tailwind로 회원가입 비밀번호 일치 여부 확인해보겠습니다.
해당 회원가입 폼은
입력 값에 대한 유효성 검사를 실시간으로 수행하고 유효성 검사가 통과되면 제출 버튼이 활성화됩니다.
index.html 파일에 다음과 같이 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Interactive Form with Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 flex items-center justify-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg max-w-sm w-full">
<h1 class="text-xl mb-4">회원 가입</h1>
<form id="signup-form">
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700">이름</label>
<input type="text" id="name" name="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
<p id="name-error" class="text-red-500 text-xs hidden">유효한 이름을 입력하세요.</p>
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700">이메일</label>
<input type="email" id="email" name="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
<p id="email-error" class="text-red-500 text-xs hidden">유효한 이메일 주소를 입력하세요.</p>
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-700">비밀번호</label>
<input type="password" id="password" name="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
<p id="password-error" class="text-red-500 text-xs hidden">비밀번호가 너무 짧습니다.</p>
</div>
<div class="mb-4">
<label for="confirm-password" class="block text-sm font-medium text-gray-700">비밀번호 확인</label>
<input type="password" id="confirm-password" name="confirm-password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" required>
<p id="confirm-password-error" class="text-red-500 text-xs hidden">비밀번호가 일치하지 않습니다.</p>
</div>
<button type="submit" id="submit-button" class="w-full bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700 disabled:bg-gray-300" disabled>제출</button>
</form>
</div>
</body>
<script>
const form = document.getElementById('signup-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const submitButton = document.getElementById('submit-button');
const nameError = document.getElementById('name-error');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');
const confirmPasswordError = document.getElementById('confirm-password-error');
function validateInput() {
let valid = true;
if (nameInput.value.trim() === '') {
nameError.classList.remove('hidden');
valid = false;
} else {
nameError.classList.add('hidden');
}
if (!emailInput.value.includes('@') || emailInput.value.trim() === '') {
emailError.classList.remove('hidden');
valid = false;
} else {
emailError.classList.add('hidden');
}
if (passwordInput.value.length < 6) {
passwordError.classList.remove('hidden');
valid = false;
} else {
passwordError.classList.add('hidden');
}
if (passwordInput.value !== confirmPasswordInput.value) {
confirmPasswordError.classList.remove('hidden');
valid = false;
} else {
confirmPasswordError.classList.add('hidden');
}
submitButton.disabled = !valid;
}
nameInput.addEventListener('input', validateInput);
emailInput.addEventListener('input', validateInput);
passwordInput.addEventListener('input', validateInput);
confirmPasswordInput.addEventListener('input', validateInput);
form.addEventListener('submit', function(event) {
event.preventDefault();
alert('Form Submitted Successfully!');
});
</script>
</html>
다음과 같은 결과를 얻을 수 있습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] @keyframes 활용 마우스 클릭 이벤트 (0) | 2024.04.20 |
|---|---|
| [HTML/CSS] Tailwind로 유효성 검사 기능이 들어한 회원가입 만들기 (0) | 2024.04.15 |
| [HTML/CSS] Bootstrap의 Toast 기능 사용하기 (0) | 2024.04.08 |
| [HTML/CSS] 레이아웃 만들기 (0) | 2024.03.16 |
| [HTML/CSS] Bootstrap으로 아코디언 만들기 (0) | 2024.03.12 |
