响应式带验证的注册表单html+css+javascript
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">注册表单具有以下特点</a></li><li><a href="#_label1">html+css+javascript代码</a></li><li><a href="#_label2">总结</a></li></ul></div><p>一个现代化、交互友好的注册表单，具有完整的验证功能和精美的 UI 设计。这个表单将包含常见的注册字段，如姓名、电子邮件、密码等，并添加适当的验证和反馈机制。</p><p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202508/2025081611034786.png" /></p>
<p class="maodian"><a name="_label0"></a></p><h2>注册表单具有以下特点</h2>
<ol><li><strong>现代化 UI 设计</strong>：采用了卡片式布局、渐变背景和精心设计的色彩方案，符合 Awwwards 级别的视觉标准。</li><li><strong>完整的表单验证</strong>：</li></ol>
<ul><li>实时验证姓名、电子邮件、密码等字段</li><li>密码强度指示器，显示长度、字母和数字要求</li><li>表单提交前的全量验证</li><li>清晰的错误提示和成功状态反馈</li></ul>
<ol start="3"><li><strong>响应式设计</strong>：在移动设备和桌面设备上都能完美展示，布局会根据屏幕尺寸自动调整。</li><li><strong>交互体验优化</strong>：</li></ol>
<ul><li>密码显示 / 隐藏切换功能</li><li>表单提交后的成功模态框</li><li>按钮悬停和点击效果</li><li>平滑滚动到错误字段</li></ul>
<ol start="5"><li><strong>多种注册方式</strong>：除了常规注册，还提供微信、QQ 和邮箱等快捷注册选项。</li></ol>
<p>表单使用了 Tailwind CSS v3 构建样式，Font Awesome 提供图标支持，并通过 JavaScript 实现了完整的交互功能和验证逻辑。</p>
<p class="maodian"><a name="_label1"></a></p><h2>html+css+javascript代码</h2>
<div class="jb51code"><pre class="brush:xhtml;"><!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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" 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- active:scale- 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">
<!-- 左侧信息面板 -->
<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- font-bold mb-4">欢迎加入我们</h2>
<p class="text-blue-100 mb-8">创建账户，开启您的全新体验。我们重视您的隐私和安全，所有信息将被严格保护。</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">专业支持</h3>
<p class="text-blue-100 text-sm">7×24小时客服团队为您服务</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>
<!-- 右侧注册表单 -->
<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- font-bold text-dark mb-2">欢迎加入我们</h2>
<p class="text-neutral">创建账户，开启您的全新体验</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">设置密码</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位，包含字母和数字" 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">包含数字</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">服务条款</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">请同意服务条款和隐私政策</p>
</div>
</div>
<!-- 提交按钮 -->
<div>
<button type="submit" class="w-full btn-primary flex items-center justify-center gap-2">
<span>创建账户</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>
<!-- 成功提示模态框 -->
<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">您的账户已成功创建，我们已向您的邮箱发送了验证链接</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 = //.test(password);
updateStrengthIndicator(strengthIndicators, 'letter', hasLetter);
// 检查是否包含数字
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').forEach(input => {
// 实时验证
input.addEventListener('blur', function() {
validateField(this);
});
// 输入时清除错误
input.addEventListener('input', function() {
clearError(this);
});
});
// 单独验证确认密码
document.getElementById('confirmPassword').addEventListener('blur', function() {
validateConfirmPassword(this);
});
// 验证复选框
document.getElementById('terms').addEventListener('change', function() {
validateTerms(this);
});
// 表单提交
form.addEventListener('submit', function(e) {
e.preventDefault();
let isValid = true;
// 验证所有字段
form.querySelectorAll('input').forEach(input => {
if (!validateField(input)) {
isValid = false;
}
});
// 验证复选框
if (!validateTerms(document.getElementById('terms'))) {
isValid = false;
}
// 如果表单有效，显示成功模态框
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' });
}
}
});
// 关闭模态框
closeModal.addEventListener('click', function() {
hideSuccessModal();
});
// 显示成功模态框
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';
}
// 隐藏成功模态框
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 (!//.test(value) || !/\d/.test(value)) {
setError(field, '密码必须包含字母和数字');
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;
}
// 设置错误状态
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');
// 显示错误图标
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');
}
}
// 设置成功状态
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');
// 显示成功图标
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');
}
}
// 清除错误状态
function clearError(field) {
const parent = field.parentElement;
const errorElement = parent.nextElementSibling;
const iconElement = parent.querySelector('.validation-icon');
// 移除错误/成功样式
field.classList.remove('border-danger', 'border-secondary');
// 隐藏图标
if (iconElement) {
iconElement.classList.add('hidden');
}
// 隐藏错误消息
if (errorElement) {
errorElement.classList.add('hidden');
}
}
});
</script>
</body>
</html>
</pre></div>
<p class="maodian"><a name="_label2"></a></p><h2>总结</h2>
頁:
[1]