响应式带验证的注册表单html+css+javascript
作者：firshare
交互友好的响应式注册表单,具有完整的验证功能和精美的UI设计,这个表单将包含常见的注册字段,如姓名、电子邮件、密码等,并添加适当的验证和反馈机制,注册表单具有以下特点：现代化UI设计：采用了卡片式布局、渐变背景和精心设计的色彩方案,符合Awwwards级别的视觉标准
一个现代化、交互友好的注册表单，具有完整的验证功能和精美的 UI 设计。这个表单将包含常见的注册字段，如姓名、电子邮件、密码等，并添加适当的验证和反馈机制。
注册表单具有以下特点
- 现代化 UI 设计：采用了卡片式布局、渐变背景和精心设计的色彩方案，符合 Awwwards 级别的视觉标准。
- 完整的表单验证：
- 实时验证姓名、电子邮件、密码等字段
- 密码强度指示器，显示长度、字母和数字要求
- 表单提交前的全量验证
- 清晰的错误提示和成功状态反馈
- 响应式设计：在移动设备和桌面设备上都能完美展示，布局会根据屏幕尺寸自动调整。
- 交互体验优化：
- 密码显示 / 隐藏切换功能
- 表单提交后的成功模态框
- 按钮悬停和点击效果
- 平滑滚动到错误字段
- 多种注册方式：除了常规注册，还提供微信、QQ 和邮箱等快捷注册选项。
表单使用了 Tailwind CSS v3 构建样式，Font Awesome 提供图标支持，并通过 JavaScript 实现了完整的交互功能和验证逻辑。
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 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-[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">
<!-- 左侧信息面板 -->
<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">创建账户，开启您的全新体验。我们重视您的隐私和安全，所有信息将被严格保护。</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-[clamp(1.5rem,3vw,2rem)] 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 = /[a-zA-Z]/.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[required]').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[required]').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 (!/[a-zA-Z]/.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>
总结
到此这篇关于响应式带验证的注册表单html+css+javascript的文章就介绍到这了,更多相关响应式带验证的注册表单html内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！