黑马毕向东Java课程笔记（35天day35-1——35-10）DOM（文档对象模型）+BOM（浏览器对象模型）：part3

最新推荐文章于 2022-03-09 17:05:21 发布

KongJetLin

最新推荐文章于 2022-03-09 17:05:21 发布

阅读量260

点赞数

分类专栏： Java资料文章标签： DOM javascript 黑马 java

本文链接：https://blog.csdn.net/LKJgdut/article/details/103105410

版权

Java资料专栏收录该内容

78 篇文章 2 订阅

订阅专栏

这篇博客详细记录了黑马毕向东Java课程中关于DOM和BOM的部分，包括邮件列表、调查问卷、性格测试、下拉菜单、二级联动菜单、添加删除附件以及表单验证等多个DOM操作实例，通过JavaScript实现动态交互效果。

摘要由CSDN通过智能技术生成

1、DOM示例——邮件列表
相应的代码示例如下

<!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>
	
	<!--
	导入CSS文件修饰表格
	再利用类名选择器预定义一些样式
	-->
		<link rel="stylesheet" type="text/css" href="table.css"/>
		<style>
			.one
			{
				background-color:#9bf7d5;
			}
			.two{
				background-color:#f3e99a;
			}
			.over{
				background-color:#ef7125;
			}
		</style>
	</head>

	<body>
		<!--
		接下来使用dom定义各种功能
		-->
		<script>
			//行颜色间隔显示功能。
			function trColor()
			{
				var name;
				//1、通过id选择器获取表格对象。
				var oTabNode = document.getElementById("mailtable");
				//2、获取表格中的行对象。
				var collTrNodes = oTabNode.rows;
				
				//3、对所有需要设置背景的行对象进行遍历。——第一行和最后一行不需要遍历
				for(var x=1; x<collTrNodes.length-1 ;x++)
				{
					if(x%2 == 1)
					{
						collTrNodes[x].className = "one";
					}
					else
					{
						collTrNodes[x].className = "two";
					}
					//在遍历所有行的时候，顺便给所有行设置鼠标悬浮以及离开的事件
					//这里需要注意，每一行都需要添加事件
					collTrNodes[x].onmouseover = function()
					{
						name = this.className;
						this.className = "over";
					}
					collTrNodes[x].onmouseout = function()
					{
						this.className = name;
					}
					
				}
			}
			//设置窗口页面加载就执行trColor()函数，这样页面一加载各行的事件以及样式便设置好
			onload = function()
			{
				trColor();
			}
			
		
			//复选框的全选动作。
			function checkAll(node)
			{
				var collMailNodes = document.getElementsByName("mail");
				for(var x=0; x<collMailNodes.length ;x++)
				{
					collMailNodes[x].checked = node.checked;//注意不能写反，是将node的状态赋予所有的mail
				}
			}
			
//定义操作复选框按钮的方法。——这里使用不同的全选方案，传入一个数，遍历所有行节点，用这个数指定行节点是否选中
			function checkAllByBut(num)
			{
				//先获取所有name为mail的单元格节点
				var collMailNodes = document.getElementsByName("mail");
				
				for(var x=0 ;x<collMailNodes.length ;x++)
				{
					if(num>1)
					{
						//当num=2的时候，将所有复选框状态反选
						collMailNodes[x].checked = !collMailNodes[x].checked;
					}
					else
					{
					//num=1选中，num=0则不选——注意这个技巧
						collMailNodes[x].checked = num;
					}
				}
			}
			
			//删除所选邮件。
			function deleteMail()
			{
				//先使用confirm方法弹窗提示是否要删除所选复选框
				//confirm 显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。 
				if(!confirm("你真的要删除所选的邮件吗？"))
				{//不删除则退出，，既否时执行if内语句
					return;
				}
				//同样找到所有的mail表格，获取包含其的行，再获取包含行的表格，删除该行即可
				var collMailNodes = document.getElementsByName("mail");
				for(var x=0 ;x<collMailNodes.length ;x++)
				{
					if(collMailNodes[x].checked)//只删除被选中的项
					{
						//获取mail对应的行节点
						var oTrNode = collMailNodes[x].parentNode.parentNode;
						//接下来行节点获取相应的表格节点，表格节点再删除行节点
						oTrNode.parentNode.removeChild(oTrNode);
						x--;//因为删除一行后，后面一行会顶替这一行，因此这一行必须继续检验，x--再x++检验这一行
					}
				}
				trColor();//调用这个方法，保证删除后还是相隔行之间颜色不同
			}
		</script>
	
		<!--
		先使用HTML定义一个邮件的界面
		第一行包含一个全选的复选框（全选功能）、发件人、邮件名称、邮件附属信息
		下面的行是邮件的复选框及其他邮件信息
		-->
		
		<table id="mailtable">
			<tr>
				<th>
					<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
				</th>
				<th>
					发件人
				</th>
				<th>
					邮件名称
				</th>
				<th>
					邮件附属信息
				</th>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三11
				</td>
				<td>
        			我是邮件11
        		</td>
        		<td>
        			我是附属信息11
        		</td>
			</tr>
			
			<tr>
    			<td>
        			<input type="checkbox" name="mail" />
        		</td>
        		<td>
        			张三22
        		</td>
        		<td>
        			我是邮件22
       			</td>
        		<td>
        			我是附属信息22
        		</td>
    		</tr>
			
    		<tr>
    			<td>
        			<input type="checkbox" name="mail" />
        		</td>
        		<td>
        			张三33
        		</td>
        		<td>
        			我是邮件33
        		</td>
        		<td>
        			我是附属信息33
        		</td>
    		</tr>
			
    		<tr>
    			<td>
        			<input type="checkbox" name="mail" />
        		</td>
        		<td>
        			张三44
        		</td>
        		<td>
        			我是邮件44
        		</td>
        		<td>
        			我是附属信息44
        		</td>
    		</tr>
			
    		<tr>
    			<td>
      		  	<input type="checkbox" name="mail" />
     		   </td>
        		<td>
        			张三55
        		</td>
        		<td>
        			我是邮件55
        		</td>
        		<td>
        			我是附属信息55
        		</td>
    		</tr>
			
    		<tr>
    			<td>
        			<input type="checkbox" name="mail" />
        		</td>
        		<td>
        			张三66
        		</td>
        		<td>
        			我是邮件66
        		</td>
        		<td>
        			我是附属信息66
        		</td>
    		</tr>
			
    		<tr>
    			<td>
        			<input type="checkbox" name="mail" />
        		</td>
        		<td>
        			张三117
       		 	</td>
        		<td>
        			我是邮件117
        		</td>
        		<td>
        			我是附属信息17
        		</td>
    		</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三118
				</td>
				<td>
					我是邮件118
				</td>
				<td>
					我是附属信息118
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三119
				</td>
				<td>
					我是邮件119
				</td>
				<td>
					我是附属信息119
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三1100
				</td>
				<td>
					我是邮件110
				</td>
				<td>
					我是附属信息110
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三11a
				</td>
				<td>
					我是邮件11a
				</td>
				<td>
					我是附属信息11a
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三11b
				</td>
				<td>
					我是邮件11b
				</td>
				<td>
					我是附属信息1b1
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三11c
				</td>
				<td>
					我是邮件11c
				</td>
				<td>
					我是附属信息11c
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三11d
				</td>
				<td>
					我是邮件11d
				</td>
				<td>
					我是附属信息11d
				</td>
			</tr>
			
			<tr>
				<td>
					<input type="checkbox" name="mail" />
				</td>
				<td>
					张三11e
				</td>
				<td>
					我是邮件11e
				</td>
				<td>
					我是附属信息11e
				</td>
			</tr>
			
			<tr>
				<th>
					<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
				</th>
				<!--
				合并同一行下面的3个表格，并在其中定义按钮，按钮的功能由checkAllByBut()定义
				-->
				<th colspan="3">
					<input type="button" value="全选" onclick="checkAllByBut(1)" />
					<input type="button" value="取消全选" onclick="checkAllByBut(0)" />
					<input type="button" value="反选" onclick="checkAllByBut(2)" />
					<input type="button" value="删除所选附件" onclick="deleteMail()" />
				</th>	
		  </tr>
		</table>
	</body>
</html>

2、DOM示例——调查问卷+性格测试
相应的代码示例如下

<!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>
		<!--
		对问卷内容样式以及结果显示样式进行设置
		-->
		<style type="text/css">
		/*这里利用id选择器为无序列表设置样式，利用类选择器预设结果的样式*/
			#no1ul
			{
				list-style:none;/*将原有样式去除*/
				margin:0px;
			}
			.close
			{
				display:none;
			}
			.open
			{
				display:block;
			}
		</style>
		
	</head>

	<body>
		<!--
		点击是否参加调查问卷，选择不同获得不同的样式——参加则block显示，不参加就不显示
		-->
		<script type="text/javascript">
			function showContent(node)
			{
				//获取id="contentid"的div节点
				var oDivNode = document.getElementById("contentid");
				//使用with语句简化代码，对象是div的style属性
				with(oDivNode.style)
				{
				//样式： display 设置或获取对象是否要渲染。 
					if(node.value == "yes")
					{//block:块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 
						display = "block";//这里本来应该是oDivNode.style.display = "block";
					}
					else
					{//none:隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
						display = "none";
					}
				}
			}
		</script>
		
		
		<!--
		先定义问卷调查——div区域内的单选框，单选框的name设置为相同，这样多个选择只能选择一个
		利用check属性将否定义为默认选项。
		-->
		<div>
			你要参加调查问卷吗？
			<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
			<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
		</div>
		<div id="contentid">
			调查问卷内容：<br />
			你的姓名：<input type="text" /><br/>
			你的邮箱：<input type="text" />
		</div>
		
		
		
		
		<!--2、性格测试。-->
		<!--
		注意，class与id一般用于css的选择器预设样式，id也用于document.getElementById获取标签
		而name一般用于获取一组标签，value用于设置标签的值。注意这几个变量不同的用法。
		-->
		<h2>欢迎你您参加性格测试</h2>
		<div>
			<h3>第一题：</h3>
			<span>你喜欢的水果是什么？</span>
			<ul id="no1ul">
				<li><input type="radio" name="no1" value="1" />葡萄</li>
				<li><input type="radio" name="no1" value="2" />西瓜</li>
				<li><input type="radio" name="no1" value="3" />苹果</li>
				<li><input type="radio" name="no1" value="4" />香蕉</li>
				<li><input type="radio" name="no1" value="5" />火龙果</li>
			</ul>
		</div>
		
		<div>
			<input type="button" value="查看测试结果" onclick="showResult()"/>
			<span id="errinfo"></span>
			<!--
			将选择结果初始化为close，既隐藏结果
			-->
			<div id="res_1" class="close">1-3分：你的性格内向并扭曲，建议...</div>
			<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
		</div>
		
		<script type="text/javascript">
			function showResult()
			{
				//1、判断是否有答案被选中。——没有被选中将错误信息打印到相应地点，并退出 函数 
				//获取所有no1的radio。并遍历判断checked状态。
				var oNo1Nodes = document.getElementsByName("no1");
				var flag = false;//flag用于判断是否有单选框被选中
				var val;//用于存储选中的单选框的值
				
				for(var x=0; x<oNo1Nodes.length ;x++)
				{
					if(oNo1Nodes[x].checked)
					{//有单选框被选中则将flag置true
						flag = true;
						val = oNo1Nodes[x].value;//将no1的值赋予val
						break;//跳出循环
					}
				}
				
				//如果没有被选中将错误信息打印到span区域，并退出 函数
				if(!flag)
				{
					document.getElementById("errinfo").innerHTML = 	"没有任何答案被选中".fontcolor("red");
					return;
				}
				
				//如果有被选中，根据val的值，我们修改res_1与res_2区域的class来修改结果样式
				if(val>=1 && val<=3)
				{
					document.getElementById("res_1").className = "open";
					document.getElementById("res_2").className = "close";
				}
				else
				{
					document.getElementById("res_1").className = "close";
					document.getElementById("res_2").className = "open";
				}
			}
		</script>
	</body>
</html>

3、DOM示例——下拉菜单
相应的代码示例如下

<!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>
	
		<style type="text/css">
			/*先预定义clrclass的div区域的样式与text的div区域的样式*/
			.clrclass
			{
				height:50px;
				width:50px;
				float:left;
				margin-right:30px;/*与左边边距*/
			}
			#text
			{
				clear:left;/*取消text区域漂浮*/
				margin-top:60px;/*text与上面组件的边距*/
			}
			#text2
			{
				clear:left;
				margin-top:10px;
			}
			.selClass{
				width:100px;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			function changeColor(node)
			{
				//先获取需要显示效果区域的div对象
				var oDivNode = document.getElementById("text");
				//获取node的style的background-color属性，将其赋予oDivNode
				//background-color backgroundColor 设置或获取对象内容后的颜色。 第一个是css代码，第二个是js代码
				//注意这里是获取前面div的背景颜色（backgroundColor），赋予后面div的文本（color）
				oDivNode.style.color = node.style.backgroundColor;
			}
		</script>
	
		<!--
		先定义几个div区域，通过点击该区域可以修改指定文本的颜色
		在每一个div中使用style属性的backgroundcolor值定义背景颜色
		-->
		<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)"></div>
		<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)"></div>
		<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)"></div>
		<div id="text">
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
		</div>
		
		
		<hr/>
		<script type="text/javascript">
			function changeColor2()
			{
				//先获取select对象
				var oSelectNode = document.getElementsByName("changeColor")[0]
				//通过——selectedIndex 设置或获取选中选项option位于 select 对象中的位置。 ——属性获取select中option的下标
				//options集合 获取 select 对象中 option 对象的集合。 
				var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;//获取option选项的value颜色
				document.getElementById("text2").style.color = colorVal;
				
			}
		</script>
		<!--
		定义一个选择菜单，选中选择菜单某一个颜色选项，相应区域的颜色也会改变。
		这里需要用到——onchange 当对象或选中区的内容改变时触发。——事件 
		-->
		<select name="changeColor" onchange="changeColor2()">
			<option value="black">选择颜色</option>
			<option value="red">红色</option>
			<option value="green">绿色</option>
			<option value="blue">蓝色</option>
		</select>
		<select name="selectColor2" onchange="changeColor3()" class="selClass">
			<option style="background-color:black" value="black">选择颜色</option>
			<option style="background-color:red" value="red"></option>
			<option style="background-color:green"  value="green">绿色</option>
			<option style="background-color:blue" value="blue">蓝色</option>
		</select>
		<div id="text2">
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
			需要显示效果的文字<br/>
		</div>
	</body>
</html>

4、DOM示例——下拉菜单，选择城市——二级联动菜单
相应的代码示例如下

<!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>
		<style type="text/css">
		/*设置select的样式*/
			select{
				width:100px;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript">
		//我们在第一个下拉菜单选中一个省，第二个下拉菜单就会有相应的市选择
			function selectCity()
			{
				//先定义一个二元数组容器，用于保存每一个省的城市只
				var collCities = [['选择城市'],
									['海淀区','朝阳区','东城区','西城区'],
									['济南','青岛','烟台','威海'],
									['沈阳','大连','鞍山','抚顺'],
									['石家庄','保定','邯郸','廊坊']];
				//上面这部分也可以通过value设置为
				//				var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
									
				//获取两个下拉菜单对象。 
				var oSelNode = document.getElementById("selid");
				var oSubSelNode = document.getElementById("subselid");
				
				//获取到底选择的是哪个省。
				var index = oSelNode.selectedIndex;
				//通过角标到容器去获取对应的城市数组。
				var arrCities = collCities[index];
				
				//将子菜单中的内容清空一下。
				//可以通过for循环将子菜单所有的option一个一个删除
				//这里x如果从1开始，保留“选择城市”项。另一方面，我们这里不需要x++，因为删除这一个option后，下面的option会补上来，我们直接删除x=1角标下的所有option即可
				/*
				for(var x=1; x<oSubSelNode.options.length ;)
				{
					oSubSelNode.removeChild(oSubSelNode.options[x]);
				}
				*/
				//当然也可以直接将oSubSelNode的长度置0
				oSubSelNode.length = 0;//清除动作
				
				//遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
				for(var x=0; x<arrCities.length ;x++)
				{
					var oOptNode = document.createElement("option");//创建一个option节点
					oOptNode.innerHTML = arrCities[x];//设置选项option的内容，为数组arrCities的内容
					oSubSelNode.appendChild(oOptNode);//将option节点添加到子菜单
				}
			}
		</script>
		
		<!--
		先设置选择菜单
		-->
		<select id="selid" onchange="selectCity()">
			<option>选择省市</option>
			<option value="beijing">北京</option>
			<option>山东</option>
			<option>辽宁</option>
			<option>河北</option>
		</select>
		
		<select id="subselid">
			<option>选择城市</option>
		</select>
	</body>
</html>

5、DOM示例——添加删除附件
相应的代码示例如下

<!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>
		<style type="text/css">
			table a:link,table a:visited
			{
				color:#179ed9;
				text-decoration:none;
			}
			table a:hover
			{
				color:#f36021;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			function addFile()
			{	
				/*
				 * 因为文件选取框定义在行对象中。
				 * 所以只要给表格创建新的行和单元格即可。
				 */
				//先获取table节点
				var oTabNode = document.getElementById("fileid");
				//insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。 
				var oTrNode = oTabNode.insertRow();//插入一行
				
				//insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。 
				var oTdNode_file = oTrNode.insertCell();//在行中插入单元格，该单元格用于保存插入的内容
				oTdNode_file.innerHTML = "<input type='file' />";//单元格内容为file组件
				
				//再插入一个单元格，这个单元格用于添加删除的超链接，该删除超链接仍然是超链接
				//该超链接用于删除添加的附件，既将添加的一行全部删除
				var oTdNode_del = oTrNode.insertCell(); 
				//oTdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='deleteFile(this)'>删除附件</a>";
				oTdNode_del.innerHTML = "<img src='11.jpg' alt='删除附件' οnclick='deleteFile(this)'>";
			}
			
			function deleteFile(node)
			{
				var oTrNode = node.parentNode.parentNode;//获取行节点，超链接父节点是td,td父节点是行tr
				oTrNode.parentNode.removeChild(oTrNode);//获取tr父节点table，再用table节点删除tr
			}
		</script>
		
		
		<table id="fileid">
		<!--
		我们先只定义添加附件的超链接，在添加了附件后再出现删除附件的超链接，该超链接用于删除添加的附件
		-->
			<tr>
				<td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td>
			</tr>
			<!--tr>
				<td><input type="file" /> </td>
				<td><a href="javascript:void(0)">删除附件</a></td>
			</tr-->
		</table>
	</body>
</html>

6、DOM示例——表单校验
相应的代码示例如下

<!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>
</head>

	<body>
		<!--
		表单校验。什么是表单校验？见35-35-7-00.17
		-->
		
		<script type="text/javascript">
		/*
			//校验用户名
			function checkUser()
			{
				//先获取用户名的节点与对应的值
				var oUserNode = document.getElementsByName("user")[0];
				var name = oUserNode.value;
				
				//获取span节点方便往里面添加信息
				var oSpanNode = document.getElementById("userspan");
				

JS的正则表达式对象：RegExp
语法1：
/pattern/attributes

语法2：
new RegExp(pattern, attributes);
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

				
				//定义正则表达式
				//^：reg的开始；$：reg的结束
				//如果不限定头和尾，那么test只要查找到字符串中有符合reg的子串，就会返回true。比如“11sdaf”就符合
				var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。i表示不区分大小写。
				//reg = new RegExp("^\\d{4}$");// 必须是四个数字。 
				//上面也可以写作reg = /^\d{4}$/;//这里表示所有数字用“\d”而不需要使用“\\d”
//因为字符串有""，导致其里面的“\”表示特殊字符，因此其需要转义；而第二种方式没有字符串""，直接写正则表达式即可
				
				var flag;
				//if(name == "abc")
				//test() 方法检索字符串中的指定值。返回值是 true 或 false。成功匹配就返回true，否则返回false
				//字符串的match() 用来查找字符串中特定的字符，并且如果找到的话，将查找的结果作为数组返回。 

				if(reg.test(name))
				{
					oSpanNode.innerHTML = "用户名正确".fontcolor("green");
					flag = true;
				}
				else
				{
					oSpanNode.innerHTML = "用户名错误".fontcolor("red");
					flag = false;
				}
				return flag;
			}
			*/
			
			/*
			 * 发现很多框的校验除了几个内容不同外，校验的过程是一样的。
			 * 所以进行了代码的提取。
			 */
			 function check(name,reg,spanid,okinfo,errinfo)
			 {
			 	//先获取text节点的值
				var val = document.getElementsByName(name)[0].value;
				//获取span区域节点
				var oSpanNode = document.getElementById(spanid);
				var flag;
				
				if(reg.test(val))//val值与reg匹配
				{
					oSpanNode.innerHTML = okinfo.fontcolor("green");
					flag = true;
				}
				else
				{
					oSpanNode.innerHTML = errinfo.fontcolor("red");
					flag = false;
				}
				return flag;
			 }
			 
			 //校验用户名。
			function checkUser()
			{
				var reg = /^[a-z]{4}$/i;
				return check("user",reg,"userspan","用户名正确","用户名错误");
			}
			
			//校验密码；
			function checkPsw()
			{
				var reg = /^\d{4}$/;
				return check("psw",reg,"pswspan","密码正确","密码错误");
			}
			
			//校验确定密码。只要和密码一致即可。
			 function checkRepsw()
			 {
			 	var flag;
				//获取密码框与确认密码框的值
				var psw = document.getElementsByName("psw")[0].value;
				var repsw = document.getElementsByName("repsw")[0].value;
				
				//获取确认密码的span区域。 
				var oSpanNode = document.getElementById("repswspan");
				
				if(psw == repsw)
				{
					oSpanNode.innerHTML = "两次密码一致".fontcolor("green");
					flag = true;
				}
				else
				{
					oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
					flag = false;
				}
				return flag;
			 }
			 
			 //校验邮件
			function checkMail()
			{
				var reg = /^\w+@\w+(\.\w+)+$/i;
				return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
			}
			
			// 提交事件处理。
			function checkForm()
			{
				if(checkUser() && checkPsw && checkRepsw() && checkMail())
				 return true;
				return false;
			}
			
			function mySubmit()
			{
				var oFormNode = document.getElemantById("userinfo");
				//submit 提交表单。 
				oFormNode.submit();
			}
		</script>
	
		<!--
		先定义表单
		onsubmit 当表单将要被提交时触发。 
		onblur 在对象失去输入焦点时触发。 
		
		我们写完一行的信息（如用户名密码等），就需要对信息进行校验，而不是等到全部写完再进行校验。
		因此在当前的text失去焦点的时候（onblur）就必须要触发相应的检验。
		在每一个text后面定义一个span区域，用于显示提示的信息。（span区域不带换行，div区域有换行）
		
		submit有默认的事件，点击它它就会将它所在form中的人数据提交到服务端，而不管提交的数据是否符合要求
		我们想要判断提交的数据是否符合要求，就必须改写submit默认的提交事件 
		-->
		<!--
		checkForm返回一个Boolean的值，而提交事件里面，我们必须明确事件是否要将事件发出去，既需要返回一个Boolean值
		我们可以对这个事件进行布尔型值的返回，返回true则提交，否则不提交
		-->
		<form id="userinfo" onsubmit="return checkForm()">
			用户名称：<input type="text" name="user" onblur="checkUser()" />
			<span id="userspan"></span>
			<br/>
			
			输入密码：<input type="text" name="psw" onblur="checkPsw()" />
			<span id="pswspan"></span>
			<br/>
			
			确认密码：<input type="text" name="repsw" onblur="checkRepsw()" />
			<span id="repswspan"></span>
			<br/>
			
			邮件地址：<input type="text" name="mail" onblur="checkMail()" />
			<span id="mailspan"></span>
			<br/>
			
			<input type="submit" value="提交数据" />
		</form>
		
		<hr/>
		<!--自定提交按钮
		我们既可以通过input的submit按钮提交，也可以自定义一个按钮，通过form的submit方法提交
		-->
		<input type="button" value="我的提交" onclick="mySubmit()" />
		
		<!--
		一个小问题（35-35-10-17.40）：我们输入完毕后，再次修改“输入密码”框的值，发现“确认密码”框
		内容与“输入密码”框不同，但是没有报错，因为我们在离开“输入密码”框时密码是格式是正确的，
		如果我们没有再次点击“确认密码”框，就不会报错。但是最后提交的时候会再次调用确认密码的方法
		这个时候就报错了！
		-->
	</body>
</html>

KongJetLin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马毕向东Java课程笔记（35天day35-1——35-10）DOM（文档对象模型）+BOM（浏览器对象模型）：part3

1、DOM示例——邮件列表相应的代码示例如下<!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...
复制链接

扫一扫

专栏目录