javascript登录页面
时间: 2023-12-22 09:04:27 浏览: 26
以下是一个简单的JavaScript登录页面的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script>
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
if (username == "") {
alert("Please enter your username");
return false;
}
if (password == "") {
alert("Please enter your password");
return false;
}
// 这里可以添加更多的验证逻辑,例如检查用户名和密码是否匹配
alert("Login successful!");
return true;
}
</script>
</head>
<body>
<h1>Login Page</h1>
<form name="loginForm" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</body>
</html>
```
这个示例中,我们使用了JavaScript来验证登录表单。当用户点击登录按钮时,`validateForm()`函数会被调用。该函数首先获取用户名和密码的值,然后进行验证。如果用户名或密码为空,将弹出相应的警告框。你可以在这里添加更多的验证逻辑,例如检查用户名和密码是否匹配。如果验证通过,将弹出登录成功的提示框。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)