用html设计一个登录界面,在此页面输入用户名和密码,可通过JavaScript代码检测用户名和密码是否与指定的值(模拟检测,自行指定)相同,相同则通过验证,并跳转到主页,不相同则给出相应的提示,同时把光标定位到用户名输入框中,若正确则跳转到新页面
时间: 2024-03-26 08:39:48 浏览: 33
好的,以下是一个简单的登录界面的HTML代码,同时也包含了JavaScript代码进行用户名和密码的基本检测。当用户填写正确的信息后,点击“登录”按钮,页面会跳转到主页。如果信息不正确,页面会给出相应的提示,并将焦点定位在用户名输入框中,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<meta charset="UTF-8">
<script type="text/javascript">
function checkForm(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == ""){
alert("用户名不能为空!");
document.getElementById("username").focus();
return false;
}
if(password == ""){
alert("密码不能为空!");
document.getElementById("password").focus();
return false;
}
if(username != "admin" || password != "123456"){
alert("用户名或密码不正确!");
document.getElementById("username").focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form action="index.html" method="post" onsubmit="return checkForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
```
在代码中,我们同样使用了`<form>`标签定义了一个表单,其中`action`属性指定了表单提交的地址,`method`属性指定了表单提交的方式,这里是使用`post`方式提交的。
我们同样使用了`<label>`标签来定义表单字段的名称,然后使用`<input>`标签来定义表单输入框,其中`type`属性指定了输入框的类型,例如:文本框、密码框等等。`id`属性和`name`属性用于标识该输入框的名称,方便后台程序进行处理。
在代码中,我们定义了一个`checkForm()`函数,用于检测表单信息的合法性。当用户点击“登录”按钮时,会触发该函数进行用户名和密码的检测。如果用户名或密码为空,函数会弹出一个警示框提示用户进行修改,并将焦点定位在相应的输入框中。如果用户名和密码不正确,函数会弹出一个警示框提示用户进行修改,并将焦点定位在用户名输入框中。如果用户名和密码正确,函数会返回`true`,表单将会被提交到指定的`action`地址。
请注意,这里的检测只是基本的检测,实际应用中需要进行更加严格的验证,以确保用户的安全。
相关推荐
![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)