響應(yīng)式帶驗(yàn)證的注冊(cè)表單html+css+javascript
更新時(shí)間：2025年08月16日 11:12:22 作者：firshare
交互友好的響應(yīng)式注冊(cè)表單,具有完整的驗(yàn)證功能和精美的UI設(shè)計(jì),這個(gè)表單將包含常見(jiàn)的注冊(cè)字段,如姓名、電子郵件、密碼等,并添加適當(dāng)?shù)尿?yàn)證和反饋機(jī)制,注冊(cè)表單具有以下特點(diǎn)：現(xiàn)代化UI設(shè)計(jì)：采用了卡片式布局、漸變背景和精心設(shè)計(jì)的色彩方案,符合Awwwards級(jí)別的視覺(jué)標(biāo)準(zhǔn)
一個(gè)現(xiàn)代化、交互友好的注冊(cè)表單，具有完整的驗(yàn)證功能和精美的 UI 設(shè)計(jì)。這個(gè)表單將包含常見(jiàn)的注冊(cè)字段，如姓名、電子郵件、密碼等，并添加適當(dāng)?shù)尿?yàn)證和反饋機(jī)制。
注冊(cè)表單具有以下特點(diǎn)
- 現(xiàn)代化 UI 設(shè)計(jì)：采用了卡片式布局、漸變背景和精心設(shè)計(jì)的色彩方案，符合 Awwwards 級(jí)別的視覺(jué)標(biāo)準(zhǔn)。
- 完整的表單驗(yàn)證：
- 實(shí)時(shí)驗(yàn)證姓名、電子郵件、密碼等字段
- 密碼強(qiáng)度指示器，顯示長(zhǎng)度、字母和數(shù)字要求
- 表單提交前的全量驗(yàn)證
- 清晰的錯(cuò)誤提示和成功狀態(tài)反饋
- 響應(yīng)式設(shè)計(jì)：在移動(dòng)設(shè)備和桌面設(shè)備上都能完美展示，布局會(huì)根據(jù)屏幕尺寸自動(dòng)調(diào)整。
- 交互體驗(yàn)優(yōu)化：
- 密碼顯示 / 隱藏切換功能
- 表單提交后的成功模態(tài)框
- 按鈕懸停和點(diǎn)擊效果
- 平滑滾動(dòng)到錯(cuò)誤字段
- 多種注冊(cè)方式：除了常規(guī)注冊(cè)，還提供微信、QQ 和郵箱等快捷注冊(cè)選項(xiàng)。
表單使用了 Tailwind CSS v3 構(gòu)建樣式，F(xiàn)ont Awesome 提供圖標(biāo)支持，并通過(guò) JavaScript 實(shí)現(xiàn)了完整的交互功能和驗(yà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>用戶注冊(cè)</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)建賬戶，開(kāi)啟您的全新體驗(yàn)。我們重視您的隱私和安全，所有信息將被嚴(yán)格保護(hù)。</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">您的個(gè)人信息將被加密保護(hù)</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">快速注冊(cè)</h3>
<p class="text-blue-100 text-sm">只需幾分鐘，完成注冊(cè)流程</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小時(shí)客服團(tuán)隊(duì)為您服務(wù)</p>
</div>
</div>
</div>
</div>
<div class="mt-12">
<p class="text-blue-100 mb-4">已有賬號(hào)？</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è)注冊(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)建賬戶，開(kāi)啟您的全新體驗(yàn)</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="請(qǐng)輸入您的姓名" 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>
<!-- 手機(jī)號(hào)碼 -->
<div>
<label for="phone" class="block text-sm font-medium text-dark mb-1">手機(jī)號(hào)碼</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="請(qǐng)輸入手機(jī)號(hào)碼">
<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>
<!-- 確認(rèn)密碼 -->
<div>
<label for="confirmPassword" class="block text-sm font-medium text-dark mb-1">確認(rèn)密碼</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">請(qǐng)同意服務(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>
<!-- 其他注冊(cè)方式 -->
<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">或使用以下方式注冊(cè)</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>
<!-- 移動(dòng)端登錄鏈接 -->
<div class="md:hidden text-center text-neutral">
已有賬號(hào)？<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">注冊(cè)成功！</h3>
<p class="text-neutral mb-6">您的賬戶已成功創(chuàng)建，我們已向您的郵箱發(fā)送了驗(yàn)證鏈接</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');
}
});
});
// 密碼強(qiáng)度檢測(cè)
const passwordInput = document.getElementById('password');
passwordInput.addEventListener('input', function() {
const password = this.value;
const strengthIndicators = document.querySelectorAll('.password-strength');
// 檢查長(zhǎng)度
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);
// 驗(yàn)證密碼
validatePassword(this);
// 驗(yàn)證確認(rèn)密碼（如果已填寫(xiě)）
const confirmPassword = document.getElementById('confirmPassword');
if (confirmPassword.value) {
validateConfirmPassword(confirmPassword);
}
});
// 更新強(qiáng)度指示器
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');
}
}
});
}
// 表單驗(yàn)證
form.querySelectorAll('input[required]').forEach(input => {
// 實(shí)時(shí)驗(yàn)證
input.addEventListener('blur', function() {
validateField(this);
});
// 輸入時(shí)清除錯(cuò)誤
input.addEventListener('input', function() {
clearError(this);
});
});
// 單獨(dú)驗(yàn)證確認(rèn)密碼
document.getElementById('confirmPassword').addEventListener('blur', function() {
validateConfirmPassword(this);
});
// 驗(yàn)證復(fù)選框
document.getElementById('terms').addEventListener('change', function() {
validateTerms(this);
});
// 表單提交
form.addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// 驗(yàn)證所有字段
form.querySelectorAll('input[required]').forEach(input => {
if (!validateField(input)) {
isValid = false;
}
});
// 驗(yàn)證復(fù)選框
if (!validateTerms(document.getElementById('terms'))) {
isValid = false;
}
// 如果表單有效，顯示成功模態(tài)框
if (isValid) {
showSuccessModal();
// 重置表單
form.reset();
// 重置所有強(qiáng)度指示器
document.querySelectorAll('.password-strength').forEach(indicator => {
indicator.classList.remove('bg-green-100', 'text-secondary');
indicator.classList.add('bg-gray-100', 'text-neutral');
});
} else {
// 滾動(dòng)到第一個(gè)錯(cuò)誤字段
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 = '';
}
// 驗(yàn)證字段
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;
}
// 驗(yàn)證姓名
function validateName(field) {
const value = field.value.trim();
if (value.length < 2) {
setError(field, '姓名至少需要2個(gè)字符');
return false;
}
setSuccess(field);
return true;
}
// 驗(yàn)證電子郵件
function validateEmail(field) {
const value = field.value.trim();
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(value)) {
setError(field, '請(qǐng)輸入有效的電子郵件地址');
return false;
}
setSuccess(field);
return true;
}
// 驗(yàn)證密碼
function validatePassword(field) {
const value = field.value;
if (value.length < 8) {
setError(field, '密碼長(zhǎng)度至少需要8個(gè)字符');
return false;
}
if (!/[a-zA-Z]/.test(value) || !/\d/.test(value)) {
setError(field, '密碼必須包含字母和數(shù)字');
return false;
}
setSuccess(field);
return true;
}
// 驗(yàn)證確認(rèn)密碼
function validateConfirmPassword(field) {
const password = document.getElementById('password').value;
const confirmPassword = field.value;
if (confirmPassword !== password) {
setError(field, '兩次輸入的密碼不一致');
return false;
}
setSuccess(field);
return true;
}
// 驗(yàn)證條款
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è)置錯(cuò)誤狀態(tài)
function setError(field, message) {
const parent = field.parentElement;
const errorElement = parent.nextElementSibling;
const iconElement = parent.querySelector('.validation-icon');
// 添加錯(cuò)誤樣式
field.classList.remove('border-green-500');
field.classList.add('border-danger');
// 顯示錯(cuò)誤圖標(biāo)
if (iconElement) {
iconElement.classList.remove('hidden', 'text-secondary');
iconElement.classList.add('text-danger');
iconElement.innerHTML = '<i class="fa fa-exclamation-circle"></i>';
}
// 顯示錯(cuò)誤消息
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>';
}
// 隱藏錯(cuò)誤消息
if (errorElement) {
errorElement.classList.add('hidden');
}
}
// 清除錯(cuò)誤狀態(tài)
function clearError(field) {
const parent = field.parentElement;
const errorElement = parent.nextElementSibling;
const iconElement = parent.querySelector('.validation-icon');
// 移除錯(cuò)誤/成功樣式
field.classList.remove('border-danger', 'border-secondary');
// 隱藏圖標(biāo)
if (iconElement) {
iconElement.classList.add('hidden');
}
// 隱藏錯(cuò)誤消息
if (errorElement) {
errorElement.classList.add('hidden');
}
}
});
</script>
</body>
</html>
總結(jié)
到此這篇關(guān)于響應(yīng)式帶驗(yàn)證的注冊(cè)表單html+css+javascript的文章就介紹到這了,更多相關(guān)響應(yīng)式帶驗(yàn)證的注冊(cè)表單html內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js開(kāi)發(fā)中的頁(yè)面、屏幕、瀏覽器的位置原理（高度寬度）說(shuō)明講解（附圖）
前端js開(kāi)發(fā)中我們常遇到對(duì)頁(yè)面、屏幕、瀏覽器寬高和位置的獲取問(wèn)題，有時(shí)間查到了js的實(shí)現(xiàn)代碼，但是不知道為什么。本篇圖文并茂講解Web環(huán)境中屏幕、瀏覽器及頁(yè)面的高度、寬度信息。2023-02-02
CSS錦囊...2007-02-02
firefox background-image垂直平鋪問(wèn)題的解決方法
firefox下background-image的垂直平鋪repeat-y不設(shè)置height的解決辦法2008-07-07
本例的javascript代碼用于獲得在CSS文件中聲明的特定樣式中的某屬性值。如：2008-08-08
關(guān)于margin-left的示例代碼...2007-05-05
讓網(wǎng)頁(yè)框架透明 底部對(duì)齊的代碼
2008-01-01
發(fā)現(xiàn)四種在網(wǎng)頁(yè)中使用CSS樣式表的方法
發(fā)現(xiàn)四種在網(wǎng)頁(yè)中使用CSS樣式表的方法...2007-09-09
百分比的細(xì)節(jié)－－容器大小篇...2007-04-04
關(guān)于CSS HACK的文章在jb51.net中提及的也很多。CSSer必須掌握的關(guān)于IE6、IE7和FF的最簡(jiǎn)單的hack技巧。2008-09-09
解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法
解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法...2007-01-01