以下是一个简单的
HTML+CSS+JS
注册页面，包括
表单验证和成功跳转到
登录页面的代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<meta charset="UTF-8">
<title>
注册页面</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
margin: 10px;
}
.error {
color: red;
font-size: small;
margin: 5px;
}
</style>
</head>
<body>
<h1>
注册</h1>
<form onsubmit="return
validateForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<button type="submit">
注册</button>
</form>
<div id="error_messages"></div>
<script>
function
validateForm() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let confirm_password = document.getElementById("confirm_password").value;
// 检查用户名是否为空
if (username === "") {
displayErrorMessage("用户名不能为空！");
return false;
}
// 检查密码是否为空
if (password === "") {
displayErrorMessage("密码不能为空！");
return false;
}
// 检查密码是否与确认密码相同
if (password !== confirm_password) {
displayErrorMessage("密码与确认密码不一致！");
return false;
}
//
注册成功，跳转到
登录页面
alert("
注册成功！");
window.location.href = "login.
html";
return false;
}
function displayErrorMessage(message) {
let error_messages_div = document.getElementById("error_messages");
let error_message = document.cre
ateElement("div");
error_message.className = "error";
error_message.inner
HTML = message;
error_messages_div.appendChild(error_message);
}
</script>
</body>
</
html>
```
这段代码包括一个表单和一些简单的 CSS 样式来布局表单。在 `<form>` 标签上添加了一个 `onsubmit` 属性，当用户点击
注册按钮时，它会调用 `
validateForm()` 函数来
验证表单数据。如果
表单验证通过，它将弹出一个成功消息，并使用 `window.location.href` 跳转到
登录页面。
在 `
validateForm()` 函数中，我们首先获取表单中的用户名、密码和确认密码。然后，我们检查用户名和密码是否为空，并检查密码和确认密码是否相同。如果检查失败，则使用 `displayErrorMessage()` 函数显示错误消息，并返回 `false` 防止表单提交。如果
表单验证通过，则使用 `window.location.href` 跳转到
登录页面。
最低0.47元/天 解锁文章
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
