用js写一个登录页面
时间: 2024-01-03 10:04:08 浏览: 36
好的,以下是一个简单的登录页面的HTML和JavaScript代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<form>
<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="button" value="Submit" onclick="login()">
</form>
<script src="login.js"></script>
</body>
</html>
```
JavaScript代码(在一个名为`login.js`的文件中):
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 检查用户名和密码是否正确(这里只是简单地判断是否为空,实际应用中需要使用更安全的方法)
if (username === "" || password === "") {
alert("Please enter both username and password.");
} else {
alert("Login successful!");
// 登录成功后执行其他操作
// ...
}
}
```
这是一个简单的登录页面,当用户单击“Submit”按钮时,JavaScript代码将获取表单中的用户名和密码,并检查它们是否为空。如果两个字段都不为空,则显示一个弹出框,表示登录成功。在实际应用中,您需要将`login()`函数与服务器端的验证逻辑结合起来,以确保只有已注册的用户才能登录。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)