帮我编写一个含有js的登录界面
时间: 2023-07-15 15:14:57 浏览: 39
好的,下面是一个简单的登录界面,使用了JavaScript验证用户输入的用户名和密码是否正确:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script>
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "" || password == ""){
alert("Please enter both username and password.");
return false;
}
if(username == "admin" && password == "admin123"){
alert("Login successful!");
return true;
}
else{
alert("Invalid username or password.");
return false;
}
}
</script>
</head>
<body>
<h1>Login Page</h1>
<form onsubmit="return validate()">
<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函数 `validate()` 会被调用。
在 `validate()` 函数中,首先获取输入框中的用户名和密码,并检查它们是否为空。如果任一一个输入框为空,函数将显示一个警告消息并返回 `false`,防止表单被提交。
如果输入框都不为空,函数将检查用户名和密码是否正确。在这个例子中,用户名是 "admin",密码是 "admin123"。如果输入的用户名和密码都正确,函数将显示一个成功消息并返回 `true`,允许表单被提交。如果输入的用户名或密码不正确,函数将显示一个错误消息并返回 `false`,防止表单被提交。
你可以将这个代码复制到一个 HTML 文件中,并在你的浏览器中打开它,然后尝试使用不同的用户名和密码来登录。
相关推荐
![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)