案例一：使用JS完成注册页面表单校验

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>注册页面</title>

		<script>

			function checkForm() {

				//alert("aa");

				/**校验用户名*/

				//1.获取用户输入的数据

				var uValue = document.getElementById("user").value;

				//alert(uValue);

				if(uValue == "") {

					//2.给出错误提示信息

					alert("用户名不能为空!");

					return false;

				}

				/*校验密码*/

				var pValue = document.getElementById("password").value;

				if(pValue == "") {

					alert("密码不能为空!");

					return false;

				}

				/**校验确认密码*/

				var rpValue = document.getElementById("repassword").value;

				if(rpValue != pValue) {

					alert("两次密码输入不一致!");

					return false;

				}

				/*校验邮箱*/

				var eValue = document.getElementById("eamil").value;

				if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) {

					alert("邮箱格式不正确!");

					return false;

				}

			}

		</script>

	</head>

	<body>

		<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">

			<!--1.logo部分-->

			<tr>

				<td>

					<!--嵌套一个一行三列的表格-->

					<table border="1px" width="100%">

						<tr height="50px">

							<td width="33.3%">

								<img src="../img/logo2.png" height="47px" />

							</td>

							<td width="33.3%">

								<img src="../img/header.png" height="47px" />

							</td>

							<td width="33.3%">

								<a href="#">登录</a>

								<a href="#">注册</a>

								<a href="#">购物车</a>

							</td>

						</tr>

					</table>

				</td>

			</tr>

			<!--2.导航栏部分-->

			<tr height="50px">

				<td bgcolor="black">

					    

					<a href="#">

						<font size="5" color="white">首页</font>

					</a>     

					<a href="#">

						<font color="white">手机数码</font>

					</a>    

					<a href="#">

						<font color="white">电脑办公</font>

					</a>    

					<a href="#">

						<font color="white">鞋靴箱包</font>

					</a>    

					<a href="#">

						<font color="white">家用电器</font>

					</a>

				</td>

			</tr>

			<!--3.注册表单-->

			<tr>

				<td height="600px" background="../img/regist_bg.jpg">

					<!--嵌套一个十行二列的表格-->

					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">

						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">

							<tr height="40px">

								<td colspan="2">

									<font size="4">会员注册</font>    USER REGISTER

								</td>

							</tr>

							<tr>

								<td>

									用户名

								</td>

								<td>

									<input type="text" name="user" size="34px" id="user" />

								</td>

							</tr>

							<tr>

								<td>

									密码

								</td>

								<td>

									<input type="password" name="password" size="34px" id="password" />

								</td>

							</tr>

							<tr>

								<td>

									确认密码

								</td>

								<td>

									<input type="password" name="repassword" size="34px" id="repassword"></input>

								</td>

							</tr>

							<tr>

								<td>

									Emaile

								</td>

								<td>

									<input type="text" name="email" size="34px" id="eamil" />

								</td>

							</tr>

							<tr>

								<td>

									姓名

								</td>

								<td>

									<input type="text" name="username" size="34px" />

								</td>

							</tr>

							<tr>

								<td>

									性别

								</td>

								<td>

									<input type="radio" name="sex" value="男" />男

									<input type="radio" name="sex" value="女" />女

								</td>

							</tr>

							<tr>

								<td>

									出生日期

								</td>

								<td>

									<input type="text" name="birthday" size="34px" />

								</td>

							</tr>

							<tr>

								<td>

									验证码

								</td>

								<td>

									<input type="text" name="yzm" />

									<img src="../img/yanzhengma.png" />

								</td>

							</tr>

							<tr>

								<td colspan="2">

									<input type="submit" value="注册" />

								</td>

							</tr>

						</table>

					</form>

				</td>

			</tr>

			<!--4.广告图片-->

			<tr>

				<td>

					<img src="../img/footer.jpg" width="100%" />

				</td>

			</tr>

			<!--5.友情链接和版权信息-->

			<tr>

				<td align="center">

					<a href="#">关于我们</a>

					<a href="#">电信公告</a>

					<a href="#">网站导航</a>

					<a href="#">掌上营业厅</a>

					<p>

						版权所有 © 2015 中国电信集团公司 [ 增值电信业务经营许可证 A2.B1.B2-20090001 ] ICP 证号:京 ICP 备 09031924号

					</p>

					<p>

						行风监督热线号码：020-38822309

					</p>

				</td>

			</tr>

		</table>

	</body>

</html>

JavaScript Window - 浏览器对象模型

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Window对象</title>

		<script>

			//确认弹出框

			confirm("您确定是否删除吗？");

			//输入框

			prompt("请输入价格");

		</script>

	</head>

	<body>

	</body>

</html>

JavaScript Window Location

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Location对象</title>

	</head>

	<body>

		<input type="button" value="跳转到history页面" onclick="javascript:location.href='02_History对象.html'" />

	</body>

</html>

JavaScript Window History

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>History对象</title>

		<script>

			function fanhui() {

				history.back();

			}

		</script>

	</head>

	<body>

		<input type="button" value="返回上一页" onclick="fanhui()" />

	</body>

</html>

Web03_JavaScript的更多相关文章

随机推荐

  1. web规范文档说明三

    网站头部:    head/header(头部) top(顶部)导航:   nanv 导航具体区分:topnav(顶部导航).mainnav(主导航).mininav(迷你导航).textnav(导航 ...

  2. poj 1655 找树的重心

    树形DP 求树的重心,即选择一个结点删去,使得分出的 若干棵树的结点数 的最大值最小 #include<map> #include<set> #include<cmath ...

  3. Tableau Sheet中的操作

    如果想要给数据排名,例如给饼图中的数据排名 1 创建一个Rank 描述为INDEX()的测度 2.将RANK用Label形式显示并且编辑计算方法选择特定的属性. 属性本身也有可以快速计算的一些方式. ...

  4. CodeForces - 1175E Minimal Segment Cover (倍增优化dp)

    题意:给你n条线段[l,r]以及m组询问,每组询问给出一组[l,r],问至少需要取多少个线段可以覆盖[l,r]区间中所有的点. 如果贪心地做的话,可以求出“从每个左端点l出发选一条线段可以到达的最右端 ...

  5. 仅1年GitHub Star数翻倍，Flink 做了什么？

    Apache Flink 是公认的新一代开源大数据计算引擎,其流水线运行系统既可以执行批处理程序也可以执行流处理程序.目前,Flink 已成为 Apache 基金会和 GitHub 社区最为活跃的项目 ...

  6. TTTTTTTTTTTTTT poj 1127 Jack Straws 线段相交+并查集

    题意: 有n个木棍,给出木棍的两个端点的x,y坐标,判断其中某两个线段是否连通(可通过其他线段连通) #include <iostream> #include <cstdio> ...

  7. 翻译一篇英文文章，主要是给自己看的——在ASP.NET Core Web Api中如何刷新token

    原文地址 :https://www.blinkingcaret.com/2018/05/30/refresh-tokens-in-asp-net-core-web-api/ 先申明,本人英语太菜,每次 ...

  8. FLASH和EEPROM的区别

    FLASH和EEPROM的最大区别是FLASH按扇区操作,EEPROM则按字节操作,二者寻址方法不同,存储单元的结构也不同,FLASH的电路结构较简单,同样容量占芯片面积较小,成本自然比EEPROM低 ...

  9. 分布式-网络通信-IO-基础（1）

    IO整体图架构  一.IO流概述 概述: IO流简单来说就是Input和Output流,IO流主要是用来处理设备之间的数据传输,Java对于数据的操作都是通过流实现,而java用于操作流的对象都在IO ...

  10. JavaScript疑难杂症系列-事件

    事件这块知识点虽然是老生长谈的,但对于我来说多多整理,多多感悟,温故知新,每次看看这块都有不同的收获.(在这里我不会长篇大论,只会挑重点;具体的小伙伴们自行查找) 什么是事件 在编程时系统内发生的动作 ...