JavaScript事件处理的例题

标签: js

知道的越多,所不知道的越多。如果带给你帮助,点赞支持一下。

1、表单验证

要求:用户名不少于2位,并且用户名第一个字符需为字母!
密码长度必须在6~15之间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单简单验证</title>
	</head>
	<body>
		<h1>用户登录</h1>
		<form name="form1">
			用户账号:<input type="text" name="name1" /><br />
			用户密码:<input type="password" name="password"/><br />
			<input type="button" value="验证" onclick="paanduan()" />
		</form>
		<script type="text/javascript">
			function paanduan(){
				if(document.form1.name1.value.length==0){
				alert("用户名不能为空");
				return false;
				}
				if(document.form1.password.value.length==0){
				alert("密码不能为空");
				return false;
				}
				var s= form1.name1.value.substr(0,1);
				if(!((s>="a"&&s<="z")||(s>="A"&&s<="Z"))){
				alert("用户名第一个字符需为字母!");
				form1.name1.focus();
				return false;
				}
			if(!(document.form1.password.value.length>=6&&document.form1.password.value.length<=15)){
				alert("密码长度必须在6~15之间");
				return false
			}
			alert("登录成功");
			}
		</script>
	</body>
</html>

在这里插入图片描述

2、验证数字输入

如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示;输入错误,否则提示:输入正确。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>验证数字输入</title>
	</head>
	<body>
		<h1>JavaScript验证数字输入</h1>
		<p>请输入1到10之间的数字:</p>
		<form name="form">
		<input type="text" name="x" />
		<input type="button" value="提交" onclick="come(form.x.value)" />
		</form>
		<script type="text/javascript">
			function come(x){
				if(isNaN(x)||x<1||x>10)
				alert("输入错误");
				else
				alert("输入正确");
			}
		</script>
	</body>
</html>

在这里插入图片描述

3、利用document对象的bgColor属性改变背景色,添加鼠标悬停事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变色</title>
	</head>
	<body>
		<h1>移过来我变色给你看看</h1>
		<span  onmouseover="show1()" onmouseout="back()">变红色</span>|
		<span onmouseover="show2()" onmouseout="back()">变蓝色</span>|
		<span onmouseover="show3()" onmouseout="back()">变黄色</span>
		<script type="text/javascript">
		function show1(){
			document.bgColor="red";
		}
		function show2(){
			document.bgColor="blue";
		}
		function show3(){
			document.bgColor="yellow";
		}
		function back(){
			document.bgColor="white";
		}
		</script>
	</body>
</html>

在这里插入图片描述

4.附加题(选做)

实际网站开发过程中,很有可能遇到这样的情况:客户要求将一串长数字分位显示,例如将“13630016”显示为“13,630,016”。在本练习中通过编写一个自定义函数,将输入的数字字符格式化为分位显示的字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换数字</title>
	</head>
	<body>
		<h3>请输入要转换的长数字:</h3>
		<form name="form">
			<input type="text" name="num" /><br/>
			<input type="submit"  value="转换" onclick="changeNum(form.num.value)" />
			<input type="reset"   value="重置" />
		</form>
		<script type="text/javascript">
			function changeNum(num){
				if(isNaN(num)||num==""){
					alert("请输入数字!")
				}
				else	
					alert(Number(num).toLocaleString());
			}
		</script>
	</body>
</html>

在这里插入图片描述

版权声明:本文为qq_44830627原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44830627/article/details/106213098

智能推荐

spring与redis整合和序列化问题

spring与redis整合 首先用docker下载redis 下载:docker pull redis 运行:docker run -d -p 6379:6379 --name myredis docker.io/redis 连接redis Desktop Manager 然后开始在springboot上开始配置 application.yml: 自动配置好StringRedisTemplate...

CentOS 7配置南大docker镜像

文章目录 CentOS 7配置南大docker镜像 0.帮助页面 1.系统要求 2.卸载旧版本(没有旧版本可跳过) 3.安装方式 4.准备工作 5.可选操作 Stable Test Nightly 6.安装docker引擎 7. (可选)修改配置文件防止与xshell连接冲突 8.启动docker CentOS 7配置南大docker镜像 0.帮助页面 南大docker源:https://mirr...

Qcon演讲纪实:详解如何在实时视频通话中实现AR功能

2018年4月20日-22日,由 infoQ 主办的 Qcon 2018全球软件开发大会在北京如期举行。声网首席 iOS 研发工程师,iOS 端移动应用产品设计和技术架构负责人龚宇华,受邀分享了《基于 ARkit 和 ARcore,在实时视频通话中实现 AR 功能》,在演讲中剖析了 AR 与 VR 差异,ARKit 的工作原理,以及逐步讲解如何基于 ARKit 与声网Agora SDK 创建 AR...

POJ2348 UVa10368 HDU1525 Euclid's Game【博弈】

Euclid's GameTime Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 4106    Accepted Submission(s): 1947 Probl...

使用Breeze.js编写更好的查询

这篇文章是由同行评审Agbonghama柯林斯 。 感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的! 数据量正在迅速发展,他们正在变得越来越复杂,维护。 许多开发人员希望避免由数据问题他们的工作过程中造成的问题和头痛。 一个使我们的工作更轻松的图书馆是Breeze.js 。 在这篇文章中,我们将讨论我们如何能够写出更好的查询与Breeze.js。 但是首先,我们应该知道什...

猜你喜欢

Netty框架构建Nio编程

~~~ 随手点赞,养成习惯 ~~~ 为什么选择Netty框架 Netty是业界最流行的NIO框架之一,它的健壮性、功能、性能、可定制性和可扩展性在同类框架中都是首屈一指的。 优点: ① API使用简单,开发门槛低 ②功能强大,预置了多种编解码功能,支持多种主流协议 ③ 定制能力强,可以通过ChannelHandler对通信框架进行灵活地扩展; ④性能高,通过与其他业界主流的NIO框架对比,Nett...

【JZOJ5262】【GDOI2018模拟8.12】树(DP,性质题)

Description Solution 首先我们可以知道两个性质:1、路径u-v和路径v-w可以合并为路径u-w;2、路径u1-v1加路径u2-v2和路径u1-v2加路径u2-v1是等价的(就是起始点和终点可以互换) 那么知道这些性质之后就很好做了。我们只用知道每个点多少次做起点和多少次做终点。 我们设f[i]表示满足i子树的需求i上的值要是多少。 那么枚举i的所有儿子,判断a[i]-f[i],...

【String-easy】541. Reverse String II 反转的元素,有反转个数和间隔

1. 题目原址 https://leetcode.com/problems/reverse-string-ii/ 2. 题目描述 3. 题目大意 给定一个字符串,和字符串的间隔k, 这个k表示每k个数反转一次,然后再间隔k个元素再反转k个元素。 4. 解题思路 只要按照间隔去反转就可以了。然后间隔k个元素不反转是通过让i每次递增 2*k完成的。 5. AC代码 6. 相似题型 【1】344. Re...

【C语言笔记结构体】

我们都知道C语言中变量的类型决定了变量存储占用的空间。当我们要使用一个变量保存年龄时可以将其声明为int类型,当我们要使用一个变量保存某一科目的考试成绩时可以将其声明为float。 那么,当我们要做一个学生信息管理系统时,需要保存学生的姓名、学号、年龄等信息,该怎么做呢? 如当要保存三个学生的信息时, 方法一是: 方法二是: 显然,方法二跟更清晰,因为它把name、num、age都集成在一个模板,...

39. Combination Sum 回溯算法简析

LeetCode传送门     这道题要求给你一组正数 C,然后给你一个目标数 T,让你从那组C中找到加在一起等于 T 的那些组合。     例如:给你 [2,3,6,7] 和 7,则返回 [[2,2,3],[7] ] 。      想解决这个问题前,我们首先引入一个新问题,图(树)的遍历问题。  ...