第六章第二堂课后续

最新推荐文章于 2024-03-29 18:38:42 发布

小小萌新倪

最新推荐文章于 2024-03-29 18:38:42 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/qq_43366068/article/details/103227679

版权

表单验证

表单是HTML中非常重要的部分，几乎每个网页上都有表单，例如，用户提交信息，查询信息。在表单
中，表单验证也是非常重要的。
用blur事件判断用户名和密码不能为空，并且密码不能小于8位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单验证</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("form :input.required").each(function(){                  
		var $required = $("<strong class='star'>*</strong>");     
		$(this).parent().append($required);                       
	})
	$("form :input").blur(function(){
		if($(this).is("#username")){        
			if($(this).val() == ""){        
				alert("用户名不能为空！");
			}
		}
		if($(this).is("#pwd")){            
			if($(this).val() == ""){        
				alert("密码不能为空！");
			}
			if(this.value.length < 8){      
				alert("密码不能小于8位，请重新输入！");
			}
		}
	})
})
</script>
</head>

<body>
	<form>
		<h3 align="center">用户注册</h3>
		<div class="dt">用户名：<input type="text" id="username" name="username" size=20 class="required" /></div>
		<div class="dt">密&nbsp;&nbsp;码：<input type="password" id="pwd" name="pwd" size=20 class="required" /></div>
		<div class="dt">性&nbsp;&nbsp;别：<input  type="text" id="sex" name="sex" size=4 maxlength=3 /></div>
		<div class="dt">年&nbsp;&nbsp;龄：<input type="text" id="age" name="age" size=4 maxlength=3 /></div>
		<div class="dt">
			<input type="submit" name="sub" value="注册" />
		</div>
	</form>
</body>
</html>

使用jQuery操作表格

表单换色

实现表格的的隔行换色，首先需要为表格的奇数行和偶数行设定样式，之后使用jQuery为表格的奇数行和
偶数行分别添加样式。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格隔行换色</title>
<style>
.a{
	background:lightblue;
}
.b{
	background:yellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("tbody>tr:odd").addClass("a");   
	$("tbody>tr:even").addClass("b");   
})
</script>
</head>
<body>
<table border="1" align="center">
  <caption>JavaScript开发非常之旅套系图书</caption>
  <thead bgcolor="#B2B2B2" align="center" valign="bottom">
  	 <tr>
  	   <th>书名</th>
 	   <th>出版单位</th>
 	 </tr>
  </thead>
 <tbody>
  <tr>
    <td width="185">JavaScript从入门到精通</td>
    <td width="220">吉林省明日科技有限公司</td>
  </tr>
  <tr>
    <td>JavaScript自学视频教程</td>
    <td>吉林省明日科技有限公司</td>
  </tr>
  <tr>
    <td>JavaScript程序设计</td>
    <td>吉林省明日科技有限公司</td>
  </tr>
  <tr>
    <td>jQuery开发基础教程</td>
    <td>吉林省明日科技有限公司</td>
  </tr>
  <tr>
    <td>jQuery从入门到精通</td>
    <td>吉林省明日科技有限公司</td>
  </tr>
  </tbody>
</table>
</body>
</html>

小小萌新倪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六章第二堂课后续

表单验证表单是HTML中非常重要的部分，几乎每个网页上都有表单，例如，用户提交信息，查询信息。在表单中，表单验证也是非常重要的。用blur事件判断用户名和密码不能为空，并且密码不能小于8位。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh...
复制链接

扫一扫