登录和注册切换按钮，当点击登录按钮时，显示登录表单，当点击注册按钮时，显示注册表单。每个表单都有对应的 JavaScript 校验函数，校验用户名、邮箱和密码是否为空，如果为空，会弹出警告框。
<!DOCTYPE html>
<html>
<head>
<title>登录/注册</title>
<link rel="stylesheet" href="styles.css">
<script>
function showLoginForm() {
document.getElementById('loginForm').style.display = "block";
document.getElementById('registerForm').style.display = "none";
}
function showRegisterForm() {
document.getElementById('loginForm').style.display = "none";
document.getElementById('registerForm').style.display = "block";
}
function validateLoginForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
if (username == "") {
alert("请输入用户名");
return false;
}
if (password == "") {
alert("请输入密码");
return false;
}
}
function validateRegisterForm() {
var username = document.forms["registerForm"]["username"].value;
var email = document.forms["registerForm"]["email"].value;
var password = document.forms["registerForm"]["password"].value;
if (username == "") {
alert("请输入用户名");
return false;
}
if (email == "") {
alert("请输入邮箱");
return false;
}
if (password == "") {
alert("请输入密码");
return false;
}
}
</script>
</head>
<body>
<div class="container">
<h2>登录/注册</h2>
<div class="tabs">
<button class="tab" onclick="showLoginForm()">登录</button>
<button class="tab" onclick="showRegisterForm()">注册</button>
</div>
<!-- 登录表单 -->
<form id="loginForm" name="loginForm" style="display: none;" onsubmit="return validateLoginForm()">
<div class="form-group">
<label for="loginUsername">用户名:</label>
<input type="text" id="loginUsername" name="username" required>
</div>
<div class="form-group">
<label for="loginPassword">密码:</label>
<input type="password" id="loginPassword" name="password" required>
</div>
<div class="form-group">
<button type="submit">登录</button>
</div>
</form>
<!-- 注册表单 -->
<form id="registerForm" name="registerForm" style="display: none;" onsubmit="return validateRegisterForm()">
<div class="form-group">
<label for="registerUsername">用户名:</label>
<input type="text" id="registerUsername" name="username" required>
</div>
<div class="form-group">
<label for="registerEmail">邮箱:</label>
<input type="email" id="registerEmail" name="email" required>
</div>
<div class="form-group">
<label for="registerPassword">密码:</label>
<input type="password" id="registerPassword" name="password" required>
</div>
<div class="form-group">
<button type="submit">注册</button>
</div>
</form>
</div>
</body>
</html>创建一个名为 styles.css 的新文件，并将以下样式添加到该文件中：
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
h2 {
text-align: center;
margin-bottom: 30px;
}
.tabs {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.tab {
flex-basis: calc(50% - 10px);
padding: 10px;
background-color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.tab:hover {
background-color: #f2f2f2;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color:#fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #45a049;
}以上示例添加了一些基本的样式，包括容器样式、标题样式、选项卡样式和表单样式。可以根据需要进行进一步的美化和自定义。记得将这两个代码块分别保存在 `index.html` 和 `styles.css` 文件中，并确保它们在同一目录下。