在线演示
您可以直接访问这个链接查看模板的实时效果： Bootstrap 5 注册页面模板演示
完整代码
您可以直接复制以下所有代码，保存为一个 .html 文件,然后在浏览器中打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">用户注册 - Bootstrap 模板</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<style>
body {
background-color: #f8f9fa;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.registration-form {
width: 100%;
max-width: 450px;
padding: 15px;
margin: auto;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.registration-form .form-floating {
margin-bottom: 15px;
}
.registration-form h2 {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 25px;
text-align: center;
color: #333;
}
.password-strength-meter {
height: 5px;
margin-top: 5px;
border-radius: 5px;
background-color: #e9ecef;
}
.password-strength-meter div {
height: 100%;
border-radius: 5px;
width: 0%;
transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.strength-weak { background-color: #dc3545; width: 33.33%; }
.strength-medium { background-color: #ffc107; width: 66.66%; }
.strength-strong { background-color: #198754; width: 100%; }
.form-check .form-check-input {
margin-top: 0.6rem;
}
.btn-register {
width: 100%;
padding: 12px;
font-size: 1.1rem;
font-weight: 500;
}
.divider {
text-align: center;
margin: 20px 0;
position: relative;
}
.divider::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #dee2e6;
}
.divider span {
background-color: #fff;
padding: 0 15px;
position: relative;
color: #6c757d;
font-size: 0.9rem;
}
.social-login {
display: flex;
gap: 10px;
justify-content: center;
}
.social-login .btn {
flex: 1;
border: 1px solid #dee2e6;
}
.social-login .btn:hover {
border-color: #adb5bd;
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.login-link {
text-align: center;
margin-top: 20px;
color: #6c757d;
}
.login-link a {
color: #0d6efd;
text-decoration: none;
font-weight: 500;
}
.login-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="registration-form">
<h2>创建新账户</h2>
<form id="registrationForm" novalidate>
<!-- 用户名 -->
<div class="form-floating">
<input type="text" class="form-control" id="username" placeholder="用户名" required>
<label for="username">用户名</label>
<div class="invalid-feedback">
请输入一个4-20位的用户名。
</div>
</div>
<!-- 邮箱 -->
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="name@example.com" required>
<label for="email">电子邮箱</label>
<div class="invalid-feedback">
请输入一个有效的电子邮箱地址。
</div>
</div>
<!-- 密码 -->
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="密码" required>
<label for="password">密码</label>
<div class="invalid-feedback">
密码长度至少为8位。
</div>
<!-- 密码强度指示器 -->
<div class="password-strength-meter">
<div id="strengthBar"></div>
</div>
</div>
<!-- 确认密码 -->
<div class="form-floating">
<input type="password" class="form-control" id="confirmPassword" placeholder="确认密码" required>
<label for="confirmPassword">确认密码</label>
<div class="invalid-feedback">
两次输入的密码不一致。
</div>
</div>
<!-- 同意条款 -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="terms" required>
<label class="form-check-label" for="terms">
我已阅读并同意 <a href="#">服务条款</a> 和 <a href="#">隐私政策</a>
</label>
<div class="invalid-feedback">
您必须同意条款后才能注册。
</div>
</div>
<!-- 提交按钮 -->
<button class="btn btn-primary btn-register w-100 mb-3" type="submit">立即注册</button>
</form>
<!-- 分隔线 -->
<div class="divider">
<span>或使用以下方式注册</span>
</div>
<!-- 社交登录 -->
<div class="social-login">
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-google"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-github"></i>
</button>
<button type="button" class="btn btn-outline-secondary">
<i class="bi bi-twitter"></i>
</button>
</div>
<!-- 登录链接 -->
<div class="login-link">
已有账户？ <a href="#">立即登录</a>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('registrationForm');
const passwordInput = document.getElementById('password');
const strengthBar = document.getElementById('strengthBar');
// 密码强度检测
passwordInput.addEventListener('input', function() {
const password = this.value;
let strength = 0;
if (password.length >= 8) strength++;
if (password.match(/[a-z]+/)) strength++;
if (password.match(/[A-Z]+/)) strength++;
if (password.match(/[0-9]+/)) strength++;
if (password.match(/[$@#&!]+/)) strength++;
strengthBar.className = 'password-strength-meter div';
if (strength <= 1) {
strengthBar.classList.add('strength-weak');
} else if (strength <= 3) {
strengthBar.classList.add('strength-medium');
} else {
strengthBar.classList.add('strength-strong');
}
});
// 表单验证
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
// 自定义验证逻辑
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const terms = document.getElementById('terms');
// 用户名验证
if (username.value.length < 4 || username.value.length > 20) {
username.setCustomValidity('用户名长度必须在4到20个字符之间');
username.classList.add('is-invalid');
} else {
username.setCustomValidity('');
username.classList.remove('is-invalid');
}
// 邮箱验证
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email.value)) {
email.setCustomValidity('请输入有效的邮箱地址');
email.classList.add('is-invalid');
} else {
email.setCustomValidity('');
email.classList.remove('is-invalid');
}
// 密码验证
if (password.value.length < 8) {
password.setCustomValidity('密码长度至少为8位');
password.classList.add('is-invalid');
} else {
password.setCustomValidity('');
password.classList.remove('is-invalid');
}
// 确认密码验证
if (password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity('两次输入的密码不一致');
confirmPassword.classList.add('is-invalid');
} else {
confirmPassword.setCustomValidity('');
confirmPassword.classList.remove('is-invalid');
}
// 条款验证
if (!terms.checked) {
terms.setCustomValidity('您必须同意条款后才能注册');
terms.classList.add('is-invalid');
} else {
terms.setCustomValidity('');
terms.classList.remove('is-invalid');
}
// 如果所有验证都通过，则显示成功消息
if (form.checkValidity()) {
event.preventDefault();
alert('注册成功！'); // 在实际应用中，这里应该是AJAX请求
}
form.classList.add('was-validated');
});
});
</script>
</body>
</html>
模板特点详解
HTML 结构
- 语义化标签: 使用了
<main>,<section>,<form>,<label>,<input>,<button>等语义化标签,有助于SEO和可访问性。 - 表单元素:
form-floating: Bootstrap 5 提供的浮动标签组件，输入时标签会优雅地向上浮动,提升用户体验。type="email": 使用 HTML5 原生的邮箱输入类型,浏览器会自动进行基本格式校验。type="password": 密码输入框,内容以掩码显示。form-check: 用于复选框的布局。
- 社交登录: 提供了 Google, GitHub, Twitter 等第三方登录的按钮入口,这是现代注册页面的标配。
- 登录链接: 引导已有账户的用户返回登录页面。
CSS 样式
- 响应式布局: 使用 Bootstrap 的
.container和.py-5(上下内边距) 确保在不同屏幕尺寸下都有良好的居中和间距。 - 卡片式设计:
.registration-form被设计成一个白色卡片，带有圆角和阴影,使其在浅色背景上脱颖而出。 - 密码强度指示器: 一个自定义的进度条，根据密码的复杂度（长度、大小写、数字、特殊字符）动态改变颜色和宽度,提供即时反馈。
- 交互细节: 为按钮添加了
hover效果,让界面更具活力。
JavaScript 功能
- Bootstrap 表单验证:
novalidate: 在<form>标签上使用，禁用浏览器默认的、有时很丑陋的验证提示。form.checkValidity(): 在提交时检查表单内所有输入的required和pattern等属性。was-validated: 在提交后给表单添加此 class，以显示 Bootstrap 的验证样式（如红色边框和错误提示）。
- 实时密码强度检测:
- 监听
password输入框的input事件。 - 通过正则表达式判断密码是否包含大小写字母、数字和特殊字符。
- 根据得分动态更新
strengthBar的样式。
- 监听
- 自定义验证逻辑:
- 使用
setCustomValidity()和classList.add('is-invalid')来处理更复杂的验证规则，用户名长度4-20位”和“两次密码必须一致”。 - 在提交时，如果所有验证都通过，会弹出一个
alert。在实际项目中，这里应该替换为发送 AJAX 请求到后端。
- 使用
如何使用和修改
- 保存文件: 将以上代码复制并粘贴到一个新的文本文件中，将其命名为
register.html或任何你喜欢的名字。 - 打开文件: 用浏览器（如 Chrome, Firefox, Edge）打开这个
.html文件。 - :
- : 直接修改
<h2>、<label>、<a>标签内的文本即可。 - 样式: 在
<style>标签内修改 CSS 类来改变颜色、字体、间距等。 - 功能: 在
<script>标签内修改 JavaScript 逻辑，例如调整密码强度的判断规则，或替换alert为真实的 API 调用。 - 图标: 模板使用了 Bootstrap Icons，你可以通过修改
<i>标签的类名来更换图标，<i class="bi bi-apple"></i>。
- : 直接修改
这个模板为你提供了一个功能强大且美观的起点,你可以根据具体需求进行快速定制和扩展。
