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的更多相关文章
随机推荐
- ffmpeg函数05__vcodec_decode_video2()
vcodec_decode_video2()的作用是解码一帧视频数据
- 第五章 动画 48：动画-使用transition-group元素实例列表动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 宝塔linux面板命令大全 - 宝塔面板
安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...
- 查看Spring MVC 父容器和子容器的对象的实例
话不多说,直接上案例 package com.oukele.web; import org.springframework.beans.factory.annotation.Autowired; im ...
- Spring mvc i18n国际化的简单demo
在渲染视图的xml文件中,配置一个i18nBean 实现两个接口: SessionLocaleResolver --> 加载资源主题 ReloadableResourceBundleMessag ...
- php的$_get,$_post用法
$_GET 可以被收藏, 可以被缓存, 可以保存在历史记录中, 可以提交请求但是很不安全, 长度有限制在2000个字符,其实get请求就是一个url;$_GET['user_name'] $_POST ...
- Acwing-271-杨老师的照相排列(DP)
链接: https://www.acwing.com/problem/content/273/ 题意: 杨老师希望给他的班级拍一张合照. 学生们将站成左端对齐的多排,靠后的排站的人数不能少于靠前的排. ...
- 02-01 Django之路由层
Django之路由层 一 路由的作用 路由即请求地址与视图函数的映射关系,如果把网站比喻为一本书,那路由就好比是这本书的目录,在Django中路由默认配置在urls.py中,如下图: 二 简单的路由配 ...
- 《Python 3标准库》
在本书中,你会看到用来处理文本.数据类型.算法.数学计算.文件系统.网络通信.Internet.XML.Email.加密.并发性.运行时和语言服务等各个方面的实用代码和解决方案.在内容安排上,每一节都 ...
- Wpf自动滚动效果
一.思路 1.使用ScrollView的Scroll.ScrollToVerticalOffset(offset)方法进行滚动 2.ScrollView中放置2个ListView,第一个滚动出边界后, ...