728x90
안녕하세요 오늘은 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] html css 상단바 만드는법 (0) | 2024.05.19 |
|---|---|
| [HTML/CSS] Tailwind로 검색이 가능한 드롭다운 구현하기 (0) | 2024.05.13 |
| [HTML/CSS] @keyframes 활용 마우스 클릭 이벤트 (0) | 2024.04.20 |
| [HTML/CSS] Tailwind로 유효성 검사 기능이 들어한 회원가입 만들기 (0) | 2024.04.15 |
| [HTML/CSS] Bootstrap의 Toast 기능 사용하기 (0) | 2024.04.08 |
