制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确
程序员文章站
2022-04-12 08:10:24
查看本章节查看作业目录需求说明：制作登录页面点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确实现思路：准备登录的静态页面在页面中嵌入脚本，自定义函数 checkLogin 验证登录，判断用户输入的邮箱和密码是否自定义函数 keyFun，实现快捷键的操作。如果用户点击 Enter 键，则验证登录事件和处理程序的绑定。按钮的 onclick 事件绑定 checkLogin() 函数，页面的 onkeypress 事件绑定keyFun() 函...
查看本章节
查看作业目录
需求说明：
制作登录页面
点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确
实现思路：
- 准备登录的静态页面
- 在页面中嵌入脚本，自定义函数 checkLogin 验证登录，判断用户输入的邮箱和密码是否
- 自定义函数 keyFun，实现快捷键的操作。如果用户点击 Enter 键，则验证登录
- 事件和处理程序的绑定。按钮的 onclick 事件绑定 checkLogin() 函数，页面的 onkeypress 事件绑定keyFun() 函数
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<style type="text/css">
body{
font-size: 12px;
}
div#login{
margin: 0px auto;
width: 300px;
}
div#login fieldset{
border: 1px solid #ccc;
width: 230px;
height: 120px;
padding: 20px;
}
div#login fieldset legend{
margin-left: 25px;
}
div#login fieldset input{
border: 1px solid #ccc;
}
div#login fieldset input.txt{
width: 180px;
}
</style>
</head>
<body onkeypress="keyFun()">
<div id="login">
<form name="loginForm">
<fieldset id="">
<legend>用户登录</legend>
<p>
<label>邮箱：</label>
<input type="text" id="txtEmail" class="txt" />
</p>
<p>
<label>密码：</label>
<input type="password" id="txtPwd" class="txt"/>
</p>
<p>
<input type="button" value="登录" onClick="checkLogin()"/>
<a href="#">忘记密码了？</a>
</p>
</fieldset>
</form>
</div>
<script type="text/javascript">
function checkLogin(){
var userEmail=document.getElementById("txtEmail").value;
var userPwd=document.getElementById("txtPwd").value;
if (userEmail=="123456@qq.com"&&userPwd=="123456") {
alert("登录成功");
} else{
alert("登录失败");
}
}
function keyFun(){
var key=event.keyCode;
if (key==13) {
checkLogin();
}
}
</script>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_44893902/article/details/109337351