制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确
查看本章节
查看作业目录
需求说明：
制作登录页面
点击键盘的 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>
制作登录页面，点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确的更多相关文章
- 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
- jsp跳转不成功，服务器也不报错，登录页面点击登录没反应，代码如下，请韭菜园子的工友给予指导！
登录后.. 根本跳不到这个检查页面.. 这个登录成功页面也就无从谈起了!
- H5 App页面 绝对定位 软键盘弹出时顶起底部按钮
做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...
- enter键实现自动登录
将登录窗口的属性acceptbutton更改为登录按钮!
- JQuery判断页面是否按下了Enter键
$('#someTextBox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.whi ...
- ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞
在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”.“提交后无法修改,您确定要继续吗?”友好性的提示. 这时候我们 ...
- android软键盘enter键
enter键,回车键,电脑键盘上enter键就有多种响应.android软键盘也不例外 你在EditText上输入以后,想在下一行输入框输入,可能需要去点击下一行输入框,让它获取焦点,也可能要隐藏软键 ...
- 系统开发中按下Enter键登录系统
转载来自:http://www.jb51.net/article/54308.htm 系统开发中按下Enter键登录系统,即就是监听键盘,当按下Enter键后调用登录按钮的click()事件. JS方 ...
- layui弹窗里面 session过期 后跳转到登录页面
1.在登录页面添加 <script> $(function () { if (top != window) { layer.msg("登录失效", {icon: 5}) ...
随机推荐
- Linux系统根目录下各文件夹介绍
参考自:[1]Linux 系统根目录下各个文件夹的作用 https://www.cnblogs.com/jiangfeilong/p/10538795.html[2]了解Linux根目录"/ ...
- Lottie 使用
原文:https://mp.weixin.qq.com/s?__biz=MzIxNjc0ODExMA==&mid=2247485033&idx=1&sn=54dd477b4c4 ...
- Java虚拟机(JVM)以及跨平台原理
相信大家已经了解到Java具有跨平台的特性,可以"一次编译,到处运行",在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的. 那么,跨平台 ...
- 深度解析Spring Cloud Ribbon的实现源码及原理
Ribbon的核心作用就是进行请求的负载均衡,它的基本原理如下图所示.就是客户端集成Ribbon这个组件,Ribbon中会针对已经配置的服务提供者地址列表进行负载均衡的计算,得到一个目标地址之后,再发 ...
- minkube在deban10上的安装步骤
环境准备: 所用机器为4c 16g i3 4170 1t机械硬盘 系统 debian 10 安装docker 如果已经安装并配置好可直接跳过 安装ssl sudo apt-get install ...
- CF1506A Strange Table 题解
Content 给定一个 \(n\times m\) 的矩阵.一开始,\((1,1)\) 所在位置上面的数是 \(1\),随后先由上往下将这一列中的所有位置上面填上 \(2,3,\dots,n\),再 ...
- java IO操作和计算操作：工作内存和主内存 volatile关键字作用；原子操作对象AtomicInteger ....
应该停止但无法停止的计算线程 如下线程示例,线程实例中while循环中的条件,在主线程中通过调用实例方法更新后,while循环并没有更新判断变量是否还成立.而是陷入了while(true)死循环. i ...
- jackson-databind-2.2.3.jar,ackson-annotations-2.2.3.jar和jackson-core-2.2.3.jar下载
jackson包开发下载,包括如下3个jar文件 jackson-databind-2.2.3.jar,还需要jackson-annotations-2.2.3.jar和jackson-core-2. ...
- docker启动redis报错 oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
docker启动redis报错 1:C 17 Jun 08:18:04.613 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo1:C 17 Jun 08 ...
- Centos（Linux）安装openoffice教程
一.从官网下载openoffice软件 下载地址:http://www.openoffice.org/zh-cn/download/ 选择(RPM)类型进行下载,选择对应的版本,这里默认选择是最新的版 ...