loginForm.querySelector()和document.querySelector实现登录成功后能跳转到 index.html 页面
时间: 2023-10-12 21:20:47 浏览: 42
要实现登录成功后跳转到index.html页面,可以使用以下代码:
``` javascript
const loginForm = document.querySelector('#login-form');
// 监听登录表单提交事件
loginForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
const username = loginForm.querySelector('#username').value.trim();
const password = loginForm.querySelector('#password').value.trim();
// 根据表单数据进行登录验证,并根据结果进行页面跳转
if (username === 'admin' && password === '123456') {
window.location.href = 'index.html'; // 跳转到index.html页面
} else {
alert('用户名或密码错误,请重新输入!');
}
});
```
这里的关键是使用`window.location.href`属性实现页面跳转,`window.location.href`属性是一个可读写的属性,用于获取或设置当前页面的 URL 地址。将其设置为目标页面的 URL 地址即可跳转到目标页面。
相关问题
用html代码写一个可以相互跳转的登录和注册页面
<!DOCTYPE html>
<html>
<head>
<title>Login and Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="password"], input[type="email"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
.link {
margin-top: 20px;
font-size: 16px;
text-align: center;
}
.link a {
color: #4CAF50;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<form id="loginForm">
<h2>Login</h2>
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
<div class="link">
Don't have an account? <a href="#registerForm">Register now</a>
</div>
</form>
<form id="registerForm" style="display: none;">
<h2>Register</h2>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="newUsername">Username</label>
<input type="text" id="newUsername" name="newUsername" required>
<label for="newPassword">Password</label>
<input type="password" id="newPassword" name="newPassword" required>
<button type="submit">Register</button>
<div class="link">
Already have an account? <a href="#loginForm">Login now</a>
</div>
</form>
</div>
<script>
// switch between login and register forms
document.querySelectorAll('.link a').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
document.querySelector(link.getAttribute('href')).style.display = 'flex';
document.querySelector(link.getAttribute('href') === '#loginForm' ? '#registerForm' : '#loginForm').style.display = 'none';
});
});
</script>
</body>
</html>
web前段开发 登录界面输入账号密码后跳转到对应页面的相关代码 大二简单一点的相关代码
以下是一个简单的登录界面的示例代码,使用了HTML、CSS和JavaScript:
HTML代码:
```
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="Login">
</form>
```
CSS代码:
```
#login-form {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 5px 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
JavaScript代码:
```
const loginForm = document.querySelector('#login-form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
loginForm.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止表单提交
const username = usernameInput.value;
const password = passwordInput.value;
if (username === 'admin' && password === '123456') {
window.location.href = 'home.html'; // 跳转到对应页面
} else {
alert('Invalid username or password.'); // 显示错误提示
}
});
```
这段代码会在用户点击登录按钮时检查输入的用户名和密码是否正确,如果正确则跳转到home.html页面,否则会显示错误提示。注意,这只是一个简单的示例,实际应用中需要进行更完善的登录验证和安全措施。