写一个具有前段验证的登录事件绑定,登录成功才能跳转到另一个网页
时间: 2023-12-15 14:04:44 浏览: 22
好的,以下是一个具有前端验证的登录事件绑定的示例代码:
HTML 代码:
```
<form>
<label for="username">用户名:</label>
<input type="text" id="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" required>
<br>
<button type="submit" id="loginBtn">登录</button>
</form>
```
JavaScript 代码:
```
const form = document.querySelector('form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn');
loginBtn.addEventListener('click', (event) => {
event.preventDefault();
if (usernameInput.value.trim() === '') {
alert('请输入用户名');
return;
}
if (passwordInput.value.trim() === '') {
alert('请输入密码');
return;
}
// 在这里编写登录逻辑,这里假设用户名为 admin,密码为 123456
if (usernameInput.value.trim() === 'admin' && passwordInput.value.trim() === '123456') {
window.location.href = 'http://example.com/home'; // 登录成功后跳转到另一个网页
} else {
alert('用户名或密码错误');
}
});
```
上述代码中,通过 `addEventListener` 方法将 `click` 事件绑定到登录按钮上,当用户单击登录按钮时,首先会通过 `event.preventDefault()` 方法阻止表单默认的提交行为,然后对用户输入的用户名和密码进行验证,如果输入为空,则弹出提示框提醒用户输入,否则进行登录验证,这里假设用户名为 `admin`,密码为 `123456`,如果用户名和密码匹配,则通过 `window.location.href` 属性跳转到另一个网页,否则弹出提示框提示用户用户名或密码错误。这样,就可以在前端对用户输入进行验证,保证数据的有效性和完整性,并且只有在登录成功的情况下才能跳转到另一个网页。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)