用bootstrap做一个登陆注册页面代码(要有中文注释) 1.注册成功会跳转到登陆 2.注册和登录可以切换 3.注册失败会有提示:用户名已经存在
时间: 2024-05-22 10:11:57 浏览: 15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆/注册</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<!-- 注册表单 -->
<form id="register-form" class="form" action="#" method="post">
<h2>注册</h2>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" class="form-control" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirm-password">确认密码:</label>
<input type="password" class="form-control" id="confirm-password" name="confirm-password" required>
</div>
<button type="submit" class="btn btn-primary">注册</button>
<button type="button" class="btn btn-link" onclick="switchForm()">已有账号?去登陆</button>
</form>
<!-- 登陆表单 -->
<form id="login-form" class="form" action="#" method="post">
<h2>登陆</h2>
<div class="form-group">
<label for="login-username">用户名:</label>
<input type="text" class="form-control" id="login-username" name="login-username" required>
</div>
<div class="form-group">
<label for="login-password">密码:</label>
<input type="password" class="form-control" id="login-password" name="login-password" required>
</div>
<button type="submit" class="btn btn-primary">登陆</button>
<button type="button" class="btn btn-link" onclick="switchForm()">没有账号?去注册</button>
</form>
<!-- 提示信息 -->
<div id="alert" class="alert alert-danger mt-3" style="display: none;"></div>
</div>
<!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入Bootstrap JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script>
// 表单切换函数
function switchForm() {
$('#register-form').toggle();
$('#login-form').toggle();
$('#alert').hide();
}
$(function() {
// 注册表单提交事件
$('#register-form').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
var username = $('#username').val();
var password = $('#password').val();
var confirmPassword = $('#confirm-password').val();
// 判断两次密码输入是否一致
if (password !== confirmPassword) {
$('#alert').text('两次输入的密码不一致').show();
return;
}
// 发送注册请求
$.post('/register', { username: username, password: password }, function(res) {
if (res.code === 0) {
alert('注册成功');
switchForm();
} else if (res.code === 1) {
$('#alert').text('用户名已经存在').show();
}
}, 'json');
});
// 登陆表单提交事件
$('#login-form').submit(function(e) {
e.preventDefault(); // 阻止表单默认提交行为
var username = $('#login-username').val();
var password = $('#login-password').val();
// 发送登陆请求
$.post('/login', { username: username, password: password }, function(res) {
if (res.code === 0) {
alert('登陆成功');
window.location.href = '/home'; // 跳转到首页
} else if (res.code === 1) {
$('#alert').text('用户名或密码错误').show();
}
}, 'json');
});
});
</script>
</body>
</html>