Web03_JavaScript
案例一：使用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的更多相关文章
随机推荐
- 抄来的，占个位儿【百度架构师是怎样搭建MySQL分布式集群】
1.准备集群搭建环境 使用6台虚拟机来搭建MySQL分布式集群,相应的实验环境与对应的MySQL节点之间的对应关系如下图所示: 管理节点(MGM):这类节点的作用是管理MySQLCluster ...
- 标准C语言(12)
一个存储区的地址应该是它自身大小的整数倍(双精度浮点类型存储区的地址只需要是4的整数倍),这个规则叫数据对齐,结构体内部的存储区通常也需要遵守数据对齐的规则,数据对齐有可能导致结构体相邻子存储区之间有 ...
- 【HEOI2015】小Z的房间
题意 https://www.luogu.org/problemnew/show/P4111 题解 前置知识:矩阵树定理 不要问证明,我不会,用就完事了(反正一般也不会用到) 因为矩阵树定理就是求一张 ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 【hiho1065】全图传送
题目大意:给定一棵 N 个节点的树,点有点权,边有边权,给定 M 个询问,每次询问距离 U 节点不超过 R 的点集中,点权最大的点的编号是多少,若有相同点权,取编号较小的点. 题解: 发现是多组询问, ...
- 关于system.timer的使用
private System.Timers.Timer _timer = null; if (_timer == null) { _timer = new System.Timers.Timer(); ...
- Python 3标准库 第十一章 网路通信
网路通信11.1 ipaddress : Internet 地址 ipaddress模块提供了处理IPv4和IPv6 11.1.2 网络 CMDB 11.2 socket:网络通信 11.2. ...
- 【Winform-右下角弹窗】实现右下角弹窗，提示信息
网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...
- three months timestamp
1.有效期三个月 package com.hengqin.life.idps; import java.text.SimpleDateFormat; import java.util.Calendar ...
- idea 导入（非maven）web项目并发布到tomcat服务器
IDEA 2017.1版本 web项目导入并发布到Tomcat服务器 1.点击编辑项目结构 2.点击project 将项目编译输出目录改成{项目目录}/OUT,并设置项目环境,编译版本 3.点击mod ...