查看本章节
查看作业目录
需求说明：
制作登录页面
点击键盘的 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}) ...
随机推荐
-
jQuery $(document).ready() 与window.onload的区别
ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...
-
LINQ系列：Linq to Object限制操作符
1. Where 限制操作符Where用于过滤序列,按照提供的逻辑对序列中的数据进行过滤.Where可以出现多次. 1.1 原型定义 public static IEnumerable<TSou ...
-
Reporting Service 服务启动时报错The service did not respond to the start or control request in a timely fashion
案例环境: 启动一台数据库服务器(Windows Server 2003)的Reporting Service(SQL Server 2008 R2)服务时,出现如下错误信息: System.Inva ...
-
unity3d web.config设置
原地址:http://www.cnblogs.com/88999660/archive/2013/03/22/2976105.html <?xml version="1.0" ...
-
别名alias
alias #查看已设置的别名 alias 别名='原命令' #暂时设定别名(重启失效):alias ls='ls --color=never' unalias 别名 #删除别名 设置别名永久生效 ...
-
UVaLive 6608 Cabin Baggage (水题)
题意:给定四个数代表长宽高和重,问你是不是满足下面条件,长不高于56,宽不宽于45,高不高于25,或者总和不大于125,并且重量不高于7. 析:判断输出就好,注意这个题是或,不要想错了. 代码如下: ...
-
git添加本地仓库与远程仓库连接
在本地建立一个文件夹,需要与远程git仓库进行连接,具体方法: <1>首先进入所在文件目录执行: git init 初始化git,紧接着 git add . git commit -m ...
-
simulink创建简单模型
创建简单模型 您可以使用 Simulink® 对系统建模,然后仿真该系统的动态行为.Simulink 允许您创建模块图,图中的各个连接模块代表系统的各个部分,信号代表这些模块之间的输入/输出关系.Si ...
-
What Kind of Friends Are You? ZOJ 3960
比赛的时候用vector交集做的...情况考虑的不全面 wrong到疯 赛后考虑全了情况....T了 果然 set_intersection 不能相信 嗯 不好意思 交集a了 第二个代码 求出来 ...
-
ant_任务的含义与使用
任务是一段可执行的代码.任务可以具有多个属性,每个任务都具有共同的结构.任务常见结构由名称,属性等组成. 任务配置结构示例: <task-name attribute1 = "valu ...