用bootstrap做一个登陆注册页面代码(要有中文注释) 1.注册和登录可以切换(切换按钮在下面) 2.注册成功会跳转到登陆 3.注册失败会有提示: 4.注册信息发送到controller,判断是否存在
时间: 2024-05-25 16:19:23 浏览: 175
如何布局登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录/注册</title>
<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 登录/注册切换按钮 -->
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary" id="switch-btn" data-toggle="button" aria-pressed="false" autocomplete="off">切换到注册</button>
</div>
</div>
<!-- 登录表单 -->
<div class="row" id="login-form">
<div class="col-md-4 col-md-offset-4">
<h2>登录</h2>
<form role="form">
<div class="form-group">
<label for="login-username">用户名</label>
<input type="text" class="form-control" id="login-username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="login-password">密码</label>
<input type="password" class="form-control" id="login-password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary">登录</button>
</form>
</div>
</div>
<!-- 注册表单 -->
<div class="row" id="register-form" style="display: none;">
<div class="col-md-4 col-md-offset-4">
<h2>注册</h2>
<form role="form">
<div class="form-group">
<label for="register-username">用户名</label>
<input type="text" class="form-control" id="register-username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="register-password">密码</label>
<input type="password" class="form-control" id="register-password" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="register-email">邮箱</label>
<input type="email" class="form-control" id="register-email" placeholder="请输入邮箱">
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
</div>
</div>
</div>
<script>
$(function() {
// 切换按钮点击事件
$('#switch-btn').click(function() {
// 登录表单和注册表单切换显示
$('#login-form').toggle();
$('#register-form').toggle();
// 切换按钮文本和状态切换
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$(this).text('切换到登录');
} else {
$(this).text('切换到注册');
}
});
// 注册表单提交事件
$('#register-form form').submit(function(event) {
event.preventDefault(); // 阻止表单提交
// 获取表单数据
var username = $('#register-username').val();
var password = $('#register-password').val();
var email = $('#register-email').val();
// 发送数据到controller
$.ajax({
url: '/register',
type: 'post',
data: {username: username, password: password, email: email},
success: function(response) {
// 注册成功,跳转到登录页面
window.location.href = '/login';
},
error: function(xhr, status, error) {
// 注册失败,提示错误信息
alert(xhr.responseText);
}
});
});
});
</script>
</body>
</html>
阅读全文