html+css+js验证注册成功跳转登录页面的代码
时间: 2023-08-11 16:24:02 浏览: 73
以下是一个简单的 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.createElement("div");
error_message.className = "error";
error_message.innerHTML = message;
error_messages_div.appendChild(error_message);
}
</script>
</body>
</html>
```
这段代码包括一个表单和一些简单的 CSS 样式来布局表单。在 `<form>` 标签上添加了一个 `onsubmit` 属性,当用户点击注册按钮时,它会调用 `validateForm()` 函数来验证表单数据。如果表单验证通过,它将弹出一个成功消息,并使用 `window.location.href` 跳转到登录页面。
在 `validateForm()` 函数中,我们首先获取表单中的用户名、密码和确认密码。然后,我们检查用户名和密码是否为空,并检查密码和确认密码是否相同。如果检查失败,则使用 `displayErrorMessage()` 函数显示错误消息,并返回 `false` 防止表单提交。如果表单验证通过,则使用 `window.location.href` 跳转到登录页面。