在登录注册页面写一个跳转的js判断一下,先获取数据绑定,输入框和按钮的,然后创建一个用户数组写判断js结构怎么些
时间: 2024-03-01 20:50:28 浏览: 22
假设注册登录页面有用户名、密码输入框和注册、登录按钮,以下是一个简单的跳转和用户验证的 JavaScript 代码:
```html
<!-- HTML 代码 -->
<input type="text" id="username">
<input type="password" id="password">
<button id="register-btn">注册</button>
<button id="login-btn">登录</button>
```
```javascript
// JavaScript 代码
// 定义用户数组
const users = [];
// 注册按钮点击事件处理函数
document.getElementById('register-btn').addEventListener('click', () => {
// 获取输入框数据
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 验证用户名和密码是否为空
if (username.trim() === '' || password.trim() === '') {
alert('用户名和密码不能为空!');
return;
}
// 验证用户名是否已存在
if (users.find(user => user.username === username)) {
alert('该用户名已被注册!');
return;
}
// 添加用户到数组中
users.push({ username, password });
// 跳转到登录页面
window.location.href = 'login.html';
});
// 登录按钮点击事件处理函数
document.getElementById('login-btn').addEventListener('click', () => {
// 获取输入框数据
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 验证用户名和密码是否为空
if (username.trim() === '' || password.trim() === '') {
alert('用户名和密码不能为空!');
return;
}
// 查找用户是否存在
const user = users.find(user => user.username === username && user.password === password);
if (user) {
// 登录成功,跳转到首页
window.location.href = 'index.html';
} else {
// 登录失败,提示错误信息
alert('用户名或密码错误!');
}
});
```
上述代码中,我们定义了一个名为 `users` 的数组,用于保存注册的用户信息。当用户点击注册按钮时,我们会获取输入框中的用户名和密码数据,然后进行验证:如果用户名或密码为空,或者用户名已被注册,则弹出相应的提示信息,否则将用户信息添加到 `users` 数组中,并跳转到登录页面。
当用户点击登录按钮时,我们也会获取输入框中的用户名和密码数据,然后查找 `users` 数组中是否有对应的用户信息。如果有,则登录成功,跳转到首页;否则提示用户名或密码错误。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)