查看本章节

查看作业目录

需求说明：

制作登录页面

点击键盘的 Enter 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确

实现思路：

  1. 准备登录的静态页面
  2. 在页面中嵌入脚本，自定义函数 checkLogin 验证登录，判断用户输入的邮箱和密码是否
  3. 自定义函数 keyFun，实现快捷键的操作。如果用户点击 Enter 键，则验证登录
  4. 事件和处理程序的绑定。按钮的 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 键或者单击“登录”按钮，验证用户输入的邮箱和密码是否正确的更多相关文章

  1. 使用 jQuery Ajax 异步登录，并验证用户输入信息（maven）

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  2. jsp跳转不成功，服务器也不报错，登录页面点击登录没反应，代码如下，请韭菜园子的工友给予指导！

    登录后.. 根本跳不到这个检查页面.. 这个登录成功页面也就无从谈起了!

  3. H5 App页面 绝对定位 软键盘弹出时顶起底部按钮

    做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...

  4. enter键实现自动登录

    将登录窗口的属性acceptbutton更改为登录按钮!

  5. JQuery判断页面是否按下了Enter键

    $('#someTextBox').keypress(function(event){ var keycode = (event.keyCode ? event.keyCode : event.whi ...

  6. ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞

    在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”.“提交后无法修改,您确定要继续吗?”友好性的提示. 这时候我们 ...

  7. android软键盘enter键

    enter键,回车键,电脑键盘上enter键就有多种响应.android软键盘也不例外 你在EditText上输入以后,想在下一行输入框输入,可能需要去点击下一行输入框,让它获取焦点,也可能要隐藏软键 ...

  8. 系统开发中按下Enter键登录系统

    转载来自:http://www.jb51.net/article/54308.htm 系统开发中按下Enter键登录系统,即就是监听键盘,当按下Enter键后调用登录按钮的click()事件. JS方 ...

  9. layui弹窗里面 session过期 后跳转到登录页面

    1.在登录页面添加 <script> $(function () { if (top != window) { layer.msg("登录失效", {icon: 5}) ...

随机推荐

  1. 【Reverse】每日必逆0x00

    附件:https://files.buuoj.cn/files/aa4f6c7e8d5171d520b95420ee570e79/a9d22a0e-928d-4bb4-8525-e38c9481469 ...

  2. IDEA 超实用使用技巧分享

    前言 工欲善其事 ​ 必先利其器 最近受部门的邀请,给入职新人统一培训IDEA,发现有很多新人虽然日常开发使用的是IDEA,但是还是很多好用的技巧没有用到,只是用到一些基本的功能,蛮浪费IDEA这个优 ...

  3. Java Web 实现Mysql 数据库备份与还原

    前段时间某某删库事故付出的惨重代价告诉我们: 数据备份的必要性是企业数据管理极其重要的一项工作. 1. Mysql备份与还原命令 备份命令: mysqldump -h127.0.0.1 -uroot ...

  4. Linux学习 - 目录表

    目录名 作用 权限 说明 /bin/ 存放系统命令的目录 所有用户 存放在/bin/下的命令单用户模式下也可以执行 /sbin/ 保存和系统环境设置相关的命令 root                 ...

  5. NSURLSessionDownloadTask实现大文件下载

    - 4.1 涉及知识点(1)使用NSURLSession和NSURLSessionDownload可以很方便的实现文件下载操作 第一个参数:要下载文件的url路径 第二个参数:当接收完服务器返回的数据 ...

  6. 【Service】【Database】【Oracle】Oracle client 12.1.0.2 for MacOS

    1. 概述:为了在我的macos上搭建python的cx_Oracle开发环境,首先需要配置oracle client 2. 环境与版本: 2.1. OS:Mac OS Sierra 10.12.2 ...

  7. Java学习1：图解Java内存分析详解（实例）

    首先需要明白以下几点: 栈空间(stack),连续的存储空间,遵循后进先出的原则,用于存放局部变量. 堆空间(heap),不连续的空间,用于存放new出的对象,或者说是类的实例. 方法区(method ...

  8. 1、学习算法和刷题的框架思维——Go版

    前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...

  9. CF1166A Silent Classroom 题解

    Content 现在有 \(n\) 名学生,我们需要将这些学生分到两个班上.对于两名在同一班级的学生,如果他们的名字首字母相同,他们就会聊天. 现在给定这些学生的名字,问最少有多少对学生会在一起聊天. ...

  10. Java 常用类库一，main方法传参String[] args；获取输入Scanner ；hasNext()；hasNextInt()

    1. main方法传参 package com.zmd.common_class_libraries; /** 给mian方法传参测试 */ public class MainArgsTest { p ...