用户名输入框,密码输入框,提交按钮的登录验证界面
时间: 2023-08-16 18:06:35 浏览: 64
好的,以下是一个简单的用户名输入框、密码输入框和提交按钮的登录验证界面的 HTML 和 JavaScript 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录验证界面</title>
</head>
<body>
<form id="loginForm">
<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="login()">
</form>
<script>
function login() {
// 获取用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 进行校验
if (username === "" || password === "") {
alert("用户名和密码不能为空!");
return false;
} else if (username !== "admin" || password !== "123456") {
alert("用户名或密码错误!");
return false;
} else {
alert("登录成功!");
return true;
}
}
</script>
</body>
</html>
```
在上述代码中,我们使用了 HTML 的 `<form>` 元素来包裹用户名输入框、密码输入框和提交按钮,并给表单元素指定了一个唯一的 ID,方便后面使用 JavaScript 代码获取表单中的数据。
在 JavaScript 代码中,我们使用了 `document.getElementById()` 方法获取了用户名输入框和密码输入框的值,并进行了简单的校验。如果用户名或密码为空,弹出提示信息;如果用户名或密码不正确,也弹出相应的提示信息;如果用户名和密码都正确,弹出登录成功的提示信息。同时,我们在 `login()` 函数中使用了 `return` 语句控制了表单的提交行为。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)