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的更多相关文章
随机推荐
- 003-centos7:rsyslog简单配置客户端和服务器端
实现把一个主机作为客户端,把日志发送到指定的服务器端: [服务器端] 开放tcp端口,udp端口: vim /etc/rsyslog.conf: # Provides UDP syslog recep ...
- Python内部执行过程
一.编译过程概述 当我们执行Python代码的时候,在Python解释器用四个过程“拆解”我们的代码,最终被CPU执行返回给用户. 首先当用户键入代码交给Python处理的时候会先进行词法分析,例如用 ...
- Practical Lessons from Predicting Clicks on Ads at Facebook (2014)论文阅读
文章链接: https://quinonero.net/Publications/predicting-clicks-facebook.pdf abstract Facebook日活跃度7.5亿,活跃 ...
- poj3522 苗条树(极差最小生成树)
给你N个点和M条边 要求你求出一个生成树使得这个生成树里边权极差最小 做法① n*m做法 当最小的边已知的时候这个生成树就确定 所以最大的边也确定了 于是我们每次枚举最小的边 然后用kruskal做一 ...
- 忘记mysql或mariadb数据库密码的解决方案
主机环境 主机系统:
- CH5102/SPOJ?? Mobile Service/P4046 [JSOI2010]快递服务[线性dp+卡常]
http://contest-hunter.org:83/contest/0x50%E3%80%8C%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E3%80%8D%E4%B ...
- k8s存储卷概述
pod本身具有生命周期,故其内部运行的容器及其相关数据自身均无法持久存在.docker支持配置容器使用存储卷将数据持久存储于容器自身文件系统之外的存储空间中,它们可以是节点文件系统或网络文件系统之上的 ...
- MYSQL数据库事务4种隔离级别及7种传播行为
事务的特性: 原子性:事务的不可分割,组成事务的各个逻辑单元不可分割. 一致性:事务执行的前后,数据完整性保持一致. 隔离性:事务执行不应该受到其他事务的干扰. 持久性:事务一旦结束,数据就持久化到数 ...
- PHP基础回顾
变量:声明变量以$开始,变量名可以用中文但是不要用:不能使用特殊字符,比如@,下划线除外:变量名区分大小写.可变变量 $a = b; $b = c; => $$a = c; 理论上$可以无限使 ...
- Python天天学_03_基础三
Python_day_03 金角大王: http://www.cnblogs.com/alex3714/articles/5740985.html ------Python是一个优雅的大姐姐 学习方式 ...