js实现单击登录按钮且输入正确时跳转页面
时间: 2023-11-27 15:03:43 浏览: 47
好的,以下是一个实现单击登录按钮且输入正确时跳转页面的示例代码:
HTML代码:
```html
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="button" value="登录" onclick="checkLogin()">
</form>
```
JS代码:
```javascript
function checkLogin() {
// 获取用户名和密码输入框的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 判断用户名和密码是否正确
if (username === "admin" && password === "123456") {
// 跳转到登录成功页面
window.location.href = "success.html";
} else {
alert("用户名或密码错误!");
}
}
```
以上代码中,当点击登录按钮时会调用 `checkLogin()` 函数,该函数会根据输入框的值判断用户名和密码是否正确,如果正确则会跳转到登录成功页面,否则会弹出提示框提示用户名或密码错误。注意,这只是一个简单的示例,实际应用中还需要进行更多的安全性判断和用户体验优化。
相关推荐
![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)