響應(yīng)式帶驗證的注冊表單html+css+javascript
更新時間：2025年08月16日 11:12:22 作者：firshare
交互友好的響應(yīng)式注冊表單,具有完整的驗證功能和精美的UI設(shè)計,這個表單將包含常見的注冊字段,如姓名、電子郵件、密碼等,并添加適當(dāng)?shù)尿炞C和反饋機制,注冊表單具有以下特點：現(xiàn)代化UI設(shè)計：采用了卡片式布局、漸變背景和精心設(shè)計的色彩方案,符合Awwwards級別的視覺標(biāo)準(zhǔn)
一個現(xiàn)代化、交互友好的注冊表單，具有完整的驗證功能和精美的 UI 設(shè)計。這個表單將包含常見的注冊字段，如姓名、電子郵件、密碼等，并添加適當(dāng)?shù)尿炞C和反饋機制。
注冊表單具有以下特點
- 現(xiàn)代化 UI 設(shè)計：采用了卡片式布局、漸變背景和精心設(shè)計的色彩方案，符合 Awwwards 級別的視覺標(biāo)準(zhǔn)。
- 完整的表單驗證：
- 實時驗證姓名、電子郵件、密碼等字段
- 密碼強度指示器，顯示長度、字母和數(shù)字要求
- 表單提交前的全量驗證
- 清晰的錯誤提示和成功狀態(tài)反饋
- 響應(yīng)式設(shè)計：在移動設(shè)備和桌面設(shè)備上都能完美展示，布局會根據(jù)屏幕尺寸自動調(diào)整。
- 交互體驗優(yōu)化：
- 密碼顯示 / 隱藏切換功能
- 表單提交后的成功模態(tài)框
- 按鈕懸停和點擊效果
- 平滑滾動到錯誤字段
- 多種注冊方式：除了常規(guī)注冊，還提供微信、QQ 和郵箱等快捷注冊選項。
表單使用了 Tailwind CSS v3 構(gòu)建樣式，F(xiàn)ont Awesome 提供圖標(biāo)支持，并通過 JavaScript 實現(xiàn)了完整的交互功能和驗證邏輯。
html+css+javascript代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用戶注冊</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="external nofollow" rel="stylesheet">
<!-- 配置Tailwind自定義顏色和字體 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
danger: '#EF4444',
neutral: '#6B7280',
dark: '#1F2937'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.form-input-focus {
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
}
.btn-primary {
@apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50;
}
.btn-outline {
@apply border border-neutral/30 hover:border-primary hover:text-primary bg-transparent font-medium py-3 px-6 rounded-lg transition-all duration-300;
}
.card-shadow {
@apply shadow-lg hover:shadow-xl transition-shadow duration-300;
}
}
</style>
</head>
<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-50 min-h-screen flex items-center justify-center p-4 md:p-8">
<div class="w-full max-w-3xl grid md:grid-cols-5 gap-8">
<!-- 左側(cè)信息面板 -->
<div class="hidden md:block md:col-span-2 bg-primary rounded-2xl p-8 text-white card-shadow flex flex-col justify-between">
<div>
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-4">歡迎加入我們</h2>
<p class="text-blue-100 mb-8">創(chuàng)建賬戶，開啟您的全新體驗。我們重視您的隱私和安全，所有信息將被嚴格保護。</p>
<div class="space-y-6">
<div class="flex items-start gap-4">
<div class="bg-white/20 p-3 rounded-lg">
<i class="fa fa-lock text-xl"></i>
</div>
<div>
<h3 class="font-semibold text-lg">安全保障</h3>
<p class="text-blue-100 text-sm">您的個人信息將被加密保護</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-white/20 p-3 rounded-lg">
<i class="fa fa-bolt text-xl"></i>
</div>
<div>
<h3 class="font-semibold text-lg">快速注冊</h3>
<p class="text-blue-100 text-sm">只需幾分鐘，完成注冊流程</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="bg-white/20 p-3 rounded-lg">
<i class="fa fa-headphones text-xl"></i>
</div>
<div>
<h3 class="font-semibold text-lg">專業(yè)支持</h3>
<p class="text-blue-100 text-sm">7×24小時客服團隊為您服務(wù)</p>
</div>
</div>
</div>
</div>
<div class="mt-12">
<p class="text-blue-100 mb-4">已有賬號？</p>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="inline-block bg-white text-primary font-medium py-2 px-6 rounded-lg hover:bg-blue-50 transition-colors duration-300">
立即登錄
</a>
</div>
</div>
<!-- 右側(cè)注冊表單 -->
<div class="md:col-span-3 bg-white rounded-2xl p-6 md:p-8 card-shadow">
<div class="md:hidden mb-6">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">歡迎加入我們</h2>
<p class="text-neutral">創(chuàng)建賬戶，開啟您的全新體驗</p>
</div>
<form id="registrationForm" class="space-y-6">
<!-- 姓名 -->
<div>
<label for="fullName" class="block text-sm font-medium text-dark mb-1">姓名</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral">
<i class="fa fa-user"></i>
</span>
<input type="text" id="fullName" name="fullName"
class="w-full pl-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
placeholder="請輸入您的姓名" required>
<span class="hidden validation-icon absolute inset-y-0 right-0 flex items-center pr-3"></span>
</div>
<p class="validation-message mt-1 text-sm text-danger hidden"></p>
</div>
<!-- 電子郵件 -->
<div>
<label for="email" class="block text-sm font-medium text-dark mb-1">電子郵件</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral">
<i class="fa fa-envelope"></i>
</span>
<input type="email" id="email" name="email"
class="w-full pl-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
placeholder="your@email.com" required>
<span class="hidden validation-icon absolute inset-y-0 right-0 flex items-center pr-3"></span>
</div>
<p class="validation-message mt-1 text-sm text-danger hidden"></p>
</div>
<!-- 手機號碼 -->
<div>
<label for="phone" class="block text-sm font-medium text-dark mb-1">手機號碼</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral">
<i class="fa fa-phone"></i>
</span>
<input type="tel" id="phone" name="phone"
class="w-full pl-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
placeholder="請輸入手機號碼">
<span class="hidden validation-icon absolute inset-y-0 right-0 flex items-center pr-3"></span>
</div>
<p class="validation-message mt-1 text-sm text-danger hidden"></p>
</div>
<!-- 密碼 -->
<div>
<label for="password" class="block text-sm font-medium text-dark mb-1">設(shè)置密碼</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral">
<i class="fa fa-lock"></i>
</span>
<input type="password" id="password" name="password"
class="w-full pl-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
placeholder="至少8位，包含字母和數(shù)字" required>
<button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-3 text-neutral hover:text-primary transition-colors">
<i class="fa fa-eye-slash"></i>
</button>
<span class="hidden validation-icon absolute inset-y-0 right-8 flex items-center pr-3"></span>
</div>
<div class="mt-1 flex flex-wrap gap-2">
<span class="password-strength text-xs px-2 py-1 rounded-full bg-gray-100 text-neutral" data-strength="length">8位以上</span>
<span class="password-strength text-xs px-2 py-1 rounded-full bg-gray-100 text-neutral" data-strength="letter">包含字母</span>
<span class="password-strength text-xs px-2 py-1 rounded-full bg-gray-100 text-neutral" data-strength="number">包含數(shù)字</span>
</div>
<p class="validation-message mt-1 text-sm text-danger hidden"></p>
</div>
<!-- 確認密碼 -->
<div>
<label for="confirmPassword" class="block text-sm font-medium text-dark mb-1">確認密碼</label>
<div class="relative">
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral">
<i class="fa fa-lock"></i>
</span>
<input type="password" id="confirmPassword" name="confirmPassword"
class="w-full pl-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
placeholder="再次輸入密碼" required>
<button type="button" class="toggle-password absolute inset-y-0 right-0 flex items-center pr-3 text-neutral hover:text-primary transition-colors">
<i class="fa fa-eye-slash"></i>
</button>
<span class="hidden validation-icon absolute inset-y-0 right-8 flex items-center pr-3"></span>
</div>
<p class="validation-message mt-1 text-sm text-danger hidden"></p>
</div>
<!-- 同意條款 -->
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="terms" name="terms" type="checkbox" required
class="w-4 h-4 border border-gray-300 rounded focus:ring-primary focus:ring-2">
</div>
<div class="ml-3 text-sm">
<label for="terms" class="text-neutral">我已閱讀并同意<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="text-primary hover:underline">服務(wù)條款</a>和<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="text-primary hover:underline">隱私政策</a></label>
<p class="validation-message text-danger hidden">請同意服務(wù)條款和隱私政策</p>
</div>
</div>
<!-- 提交按鈕 -->
<div>
<button type="submit" class="w-full btn-primary flex items-center justify-center gap-2">
<span>創(chuàng)建賬戶</span>
<i class="fa fa-arrow-right"></i>
</button>
</div>
<!-- 其他注冊方式 -->
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-200"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-2 bg-white text-neutral">或使用以下方式注冊</span>
</div>
</div>
<div class="grid grid-cols-3 gap-4">
<button type="button" class="btn-outline flex items-center justify-center gap-2">
<i class="fa fa-weixin text-green-500"></i>
<span>微信</span>
</button>
<button type="button" class="btn-outline flex items-center justify-center gap-2">
<i class="fa fa-qq text-blue-400"></i>
<span>QQ</span>
</button>
<button type="button" class="btn-outline flex items-center justify-center gap-2">
<i class="fa fa-envelope-o"></i>
<span>郵箱</span>
</button>
</div>
<!-- 移動端登錄鏈接 -->
<div class="md:hidden text-center text-neutral">
已有賬號？<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="text-primary hover:underline font-medium">立即登錄</a>
</div>
</form>
</div>
</div>
<!-- 成功提示模態(tài)框 -->
<div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300">
<div class="bg-white rounded-xl p-6 max-w-md w-full transform scale-95 transition-transform duration-300">
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fa fa-check text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold text-dark mb-2">注冊成功！</h3>
<p class="text-neutral mb-6">您的賬戶已成功創(chuàng)建，我們已向您的郵箱發(fā)送了驗證鏈接</p>
<button id="closeModal" class="w-full btn-primary">
完成
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('registrationForm');
const successModal = document.getElementById('successModal');
const closeModal = document.getElementById('closeModal');
// 密碼顯示/隱藏切換
document.querySelectorAll('.toggle-password').forEach(button => {
button.addEventListener('click', function() {
const input = this.parentElement.querySelector('input');
const icon = this.querySelector('i');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
} else {
input.type = 'password';
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
}
});
});
// 密碼強度檢測
const passwordInput = document.getElementById('password');
passwordInput.addEventListener('input', function() {
const password = this.value;
const strengthIndicators = document.querySelectorAll('.password-strength');
// 檢查長度
const hasLength = password.length >= 8;
updateStrengthIndicator(strengthIndicators, 'length', hasLength);
// 檢查是否包含字母
const hasLetter = /[a-zA-Z]/.test(password);
updateStrengthIndicator(strengthIndicators, 'letter', hasLetter);
// 檢查是否包含數(shù)字
const hasNumber = /\d/.test(password);
updateStrengthIndicator(strengthIndicators, 'number', hasNumber);
// 驗證密碼
validatePassword(this);
// 驗證確認密碼（如果已填寫）
const confirmPassword = document.getElementById('confirmPassword');
if (confirmPassword.value) {
validateConfirmPassword(confirmPassword);
}
});
// 更新強度指示器
function updateStrengthIndicator(indicators, type, isMet) {
indicators.forEach(indicator => {
if (indicator.dataset.strength === type) {
if (isMet) {
indicator.classList.remove('bg-gray-100', 'text-neutral');
indicator.classList.add('bg-green-100', 'text-secondary');
} else {
indicator.classList.remove('bg-green-100', 'text-secondary');
indicator.classList.add('bg-gray-100', 'text-neutral');
}
}
});
}
// 表單驗證
form.querySelectorAll('input[required]').forEach(input => {
// 實時驗證
input.addEventListener('blur', function() {
validateField(this);
});
// 輸入時清除錯誤
input.addEventListener('input', function() {
clearError(this);
});
});
// 單獨驗證確認密碼
document.getElementById('confirmPassword').addEventListener('blur', function() {
validateConfirmPassword(this);
});
// 驗證復(fù)選框
document.getElementById('terms').addEventListener('change', function() {
validateTerms(this);
});
// 表單提交
form.addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// 驗證所有字段
form.querySelectorAll('input[required]').forEach(input => {
if (!validateField(input)) {
isValid = false;
}
});
// 驗證復(fù)選框
if (!validateTerms(document.getElementById('terms'))) {
isValid = false;
}
// 如果表單有效，顯示成功模態(tài)框
if (isValid) {
showSuccessModal();
// 重置表單
form.reset();
// 重置所有強度指示器
document.querySelectorAll('.password-strength').forEach(indicator => {
indicator.classList.remove('bg-green-100', 'text-secondary');
indicator.classList.add('bg-gray-100', 'text-neutral');
});
} else {
// 滾動到第一個錯誤字段
const firstError = form.querySelector('.validation-message:not(.hidden)');
if (firstError) {
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
});
// 關(guān)閉模態(tài)框
closeModal.addEventListener('click', function() {
hideSuccessModal();
});
// 顯示成功模態(tài)框
function showSuccessModal() {
successModal.classList.remove('opacity-0', 'pointer-events-none');
successModal.querySelector('div').classList.remove('scale-95');
successModal.querySelector('div').classList.add('scale-100');
document.body.style.overflow = 'hidden';
}
// 隱藏成功模態(tài)框
function hideSuccessModal() {
successModal.classList.add('opacity-0', 'pointer-events-none');
successModal.querySelector('div').classList.remove('scale-100');
successModal.querySelector('div').classList.add('scale-95');
document.body.style.overflow = '';
}
// 驗證字段
function validateField(field) {
let isValid = true;
const fieldId = field.id;
switch(fieldId) {
case 'fullName':
isValid = validateName(field);
break;
case 'email':
isValid = validateEmail(field);
break;
case 'password':
isValid = validatePassword(field);
break;
case 'confirmPassword':
isValid = validateConfirmPassword(field);
break;
}
return isValid;
}
// 驗證姓名
function validateName(field) {
const value = field.value.trim();
if (value.length < 2) {
setError(field, '姓名至少需要2個字符');
return false;
}
setSuccess(field);
return true;
}
// 驗證電子郵件
function validateEmail(field) {
const value = field.value.trim();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
setError(field, '請輸入有效的電子郵件地址');
return false;
}
setSuccess(field);
return true;
}
// 驗證密碼
function validatePassword(field) {
const value = field.value;
if (value.length < 8) {
setError(field, '密碼長度至少需要8個字符');
return false;
}
if (!/[a-zA-Z]/.test(value) || !/\d/.test(value)) {
setError(field, '密碼必須包含字母和數(shù)字');
return false;
}
setSuccess(field);
return true;
}
// 驗證確認密碼
function validateConfirmPassword(field) {
const password = document.getElementById('password').value;
const confirmPassword = field.value;
if (confirmPassword !== password) {
setError(field, '兩次輸入的密碼不一致');
return false;
}
setSuccess(field);
return true;
}
// 驗證條款
function validateTerms(checkbox) {
const errorElement = checkbox.parentElement.nextElementSibling.querySelector('.validation-message');
if (!checkbox.checked) {
errorElement.classList.remove('hidden');
return false;
}
errorElement.classList.add('hidden');
return true;
}
// 設(shè)置錯誤狀態(tài)
function setError(field, message) {
const parent = field.parentElement;
const errorElement = parent.nextElementSibling;
const iconElement = parent.querySelector('.validation-icon');
// 添加錯誤樣式
field.classList.remove('border-green-500');
field.classList.add('border-danger');
// 顯示錯誤圖標(biāo)
if (iconElement) {
iconElement.classList.remove('hidden', 'text-secondary');
iconElement.classList.add('text-danger');
iconElement.innerHTML = '<i class="fa fa-exclamation-circle"></i>';
}
// 顯示錯誤消息
if (errorElement) {
errorElement.textContent = message;
errorElement.classList.remove('hidden');
}
}
// 設(shè)置成功狀態(tài)
function setSuccess(field) {
const parent = field.parentElement;
const errorElement = parent.nextElementSibling;
const iconElement = parent.querySelector('.validation-icon');
// 添加成功樣式
field.classList.remove('border-danger');
field.classList.add('border-secondary');
// 顯示成功圖標(biāo)
if (iconElement) {
iconElement.classList.remove('hidden', 'text-danger');
iconElement.classList.add('text-secondary');
iconElement.innerHTML = '<i class="fa fa-check-circle"></i>';
}
// 隱藏錯誤消息
if (errorElement) {
errorElement.classList.add('hidden');
}
}
// 清除錯誤狀態(tài)
function clearError(field) {
const parent = field.parentElement;
const errorElement = parent.nextElementSibling;
const iconElement = parent.querySelector('.validation-icon');
// 移除錯誤/成功樣式
field.classList.remove('border-danger', 'border-secondary');
// 隱藏圖標(biāo)
if (iconElement) {
iconElement.classList.add('hidden');
}
// 隱藏錯誤消息
if (errorElement) {
errorElement.classList.add('hidden');
}
}
});
</script>
</body>
</html>
總結(jié)
到此這篇關(guān)于響應(yīng)式帶驗證的注冊表單html+css+javascript的文章就介紹到這了,更多相關(guān)響應(yīng)式帶驗證的注冊表單html內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js開發(fā)中的頁面、屏幕、瀏覽器的位置原理（高度寬度）說明講解（附圖）
前端js開發(fā)中我們常遇到對頁面、屏幕、瀏覽器寬高和位置的獲取問題，有時間查到了js的實現(xiàn)代碼，但是不知道為什么。本篇圖文并茂講解Web環(huán)境中屏幕、瀏覽器及頁面的高度、寬度信息。2023-02-02
CSS錦囊...2007-02-02
firefox background-image垂直平鋪問題的解決方法
firefox下background-image的垂直平鋪repeat-y不設(shè)置height的解決辦法2008-07-07
本例的javascript代碼用于獲得在CSS文件中聲明的特定樣式中的某屬性值。如：2008-08-08
關(guān)于margin-left的示例代碼...2007-05-05
2008-01-01
發(fā)現(xiàn)四種在網(wǎng)頁中使用CSS樣式表的方法
發(fā)現(xiàn)四種在網(wǎng)頁中使用CSS樣式表的方法...2007-09-09
百分比的細節(jié)－－容器大小篇...2007-04-04
關(guān)于CSS HACK的文章在jb51.net中提及的也很多。CSSer必須掌握的關(guān)于IE6、IE7和FF的最簡單的hack技巧。2008-09-09
解決IE7以下版本不支持無A狀態(tài)偽類的幾種方法...2007-01-01