案例一:使用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. PAT Basic 1006 换个格式输出整数 (15 分)

    让我们用字母 B 来表示“百”.字母 S 表示“十”,用 12...n 来表示不为零的个位数字 n(<),换个格式来输出任一个不超过 3 位的正整数.例如 234 应该被输出为 BBSSS123 ...

  2. 将Excel数据读入DataGridView

    OpenFileDialog openFileDialog = new OpenFileDialog(); openFileDialog.Filter = "Microsoft Excel ...

  3. 让IE8和IE9支持 placeholder

    1.原因:placeholder是h5的新属性,IE10以前的浏览器(8.9)不支持此属性. 2.解决方法:jQuery三方插件  jquery-placeholder 3.快速开始: <!DO ...

  4. winform的Textbox设置只读之后使用ForeColor更改颜色

    winform的Textbox设置只读之后设置ForeColor更改颜色无效.这是 TextBox 默认的行为. 解决方法:设置为只读之后,修改控件的BackColor,再设置ForeColor就可以 ...

  5. linux完整卸载mysql数据库

    由于本机测试环境数据库装错了,需要卸载数据库,记录一下 yum -y remove mysql find / -name mysql /etc/selinux/targeted/active/modu ...

  6. web前端_css02

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. happens-before规则和as-if-serial语义

    JSR-133使用happens-before的概念来阐述操作之间的内存可见性.在JMM中,如果一个操作执行的结果需要对另一个操作可见, 那么这2个操作之间必须要存在happens-before关系. ...

  8. HDU2082 找单词

    问题分析 不难想到用母函数做. 令自变量\(x\)的次数就是单词价值,那么答案就是\(x\)的\(1\)次到\(50\)次的系数之和.由于我们只需要处理前\(51\)项,所以暴力多项式相乘即可. 举个 ...

  9. js模拟24小时的倒计时效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. DVWA--Brute Force

    这次我们尝试的内容是DVWA的暴力破解 --lower 先抓取一个登陆的包 然后发送到后在Position选项中设置需要破解的变量.Burpsuite会自动设置许多变量,单击“Clear”按钮,把默认 ...