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的更多相关文章
随机推荐
- jq事件操作汇总
bind() 向匹配元素附加一个或更多事件处理器blur( ) 触发.或将函数绑定到指定元素的 blur 事件change() 触发.或将函数绑定到指定元素的 ...
- zabbix的简单操作（监控客户端MySQL数据包库）
环境准备: 192.168.175.102 zabbix服务端 192.168.175.106 zabbix客户端(监控MySQL) 命令:iptables -F #清空防火 ...
- 结束&新的开始。
我退役啦. 真的很抱歉,但我的学习周期还是太长了,没能在noi之前让自己变得足够强啊. FareWellOi.虽然很舍不得,但总要告别对吧. 相比竞赛的跳跃性钻研性学习,我的优势在于系统性学习.所以我 ...
- js 设置多条css样式
如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:var obj = document.getElementById("mydiv"); ...
- 初学者的springmvc笔记02
springmvc笔记 springmvc拦截器,spring类型转换,spring实现文件上传/下载 1.SpringMVC标准配置 导入jar包:core contaner 在web.xml文件中 ...
- python 正则表达式实例：
#!/usr/bin/python import re line = "Cats are smarter than dogs" matchObj = re.match( r'(.* ...
- ueditor+实现word图片自动上传
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- 在对 Angular 的文档 aio 进行编译的时候提示错误
error angular-examples-master@1.0.0: The engine "yarn" is incompatible with this module. E ...
- poj 2976 Dropping tests 二分搜索+精度处理
Dropping tests Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8349 Accepted: 2919 De ...
- CodeForces 349B--Color the Fence（贪心）
B. Color the Fence time limit per test 2 seconds memory limit per test 256 megabytes input standard ...