案例一：使用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. iptables 设置特定IP访问指定端口

    一.添加规则:设置禁止所有IP访问指定端口8075 [root@zabbix_server ~]# iptables -I INPUT -p tcp --dport -j DROP 二.测试telne ...

  2. google的CacheBuilder缓存

    适用性: 计算或检索一个值的代价很高,并且对同样的输入需要不止一次获取值的时候,就应当考虑使用缓存. 常用用法: LoadingCache<Key, Graph> graphs = Cac ...

  3. nginx-轮询、权重、ip_hash 、fair模式

    在 linux 下有 Nginx.LVS.Haproxy 等等服务可以提供负载均衡服 务,而且 Nginx 提供了几种分配方式(策略): 1.轮询(默认) 每个请求按时间顺序逐一分配到不同的后端服务器 ...

  4. python 的ConfigParser模块

    Python 之ConfigParser模块 一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.sect ...

  5. k8s-wordpress

    将数据库的密码写入wordpress的yaml配置文件不行,额外输入可以初始化数据成功,好奇怪 mysql 配置yamL cat mysql.yml --- apiVersion: apps/v1be ...

  6. C# webapi

    HttpContextBase context = (HttpContextBase)Request.Properties["MS_HttpContext"];//获取传统cont ...

  7. Java中 DecimalFormat 用法详解

    我们经常要将数字进行格式化,比如取2位小数,这是最常见的.Java 提供DecimalFormat类,帮你用最快的速度将数字格式化为你需要的样子.下面是一个例子: import java.text.D ...

  8. qtmaind.lib(qtmain_win.obj) : error LNK2019: 无法解析的外部符号 __imp_CommandLineToArgvW，该符号在函数 WinMain 中被引用

    报错:qtmaind.lib(qtmain_win.obj) : error LNK2019: 无法解析的外部符号 __imp_CommandLineToArgvW,该符号在函数 WinMain 中被 ...

  9. HTML标签与属性

    HTML中常用的一些标签和属性. 1.lang属性:搜索引擎      en:英文,  zh:中文 2.meta:元数据     charset属性:字符集编码方式 3.h1~h6:标题   一级标题 ...

  10. Controllers的使用

    代码 angularjs.html <!doctype html> <html> <head> <meta charset="UTF-8" ...