HTML_06(Dom(03))

最新推荐文章于 2022-04-18 14:42:37 发布

my_kudy

最新推荐文章于 2022-04-18 14:42:37 发布

阅读量4.8k

点赞数 1

分类专栏： 2.【—Html/css/javaScript/Dom—】文章标签： html input xhtml function javascript button

本文链接：https://blog.csdn.net/my_kudy/article/details/8019087

版权

2.【—Html/css/javaScript/Dom—】专栏收录该内容

8 篇文章 0 订阅

订阅专栏

笔记总结:

dom概念: W3C组织制定的规范，所有脚本在操作HTML页面元素时都使用这个规范
一、window对象: 表示浏览器窗口
1.属性：closed(判断窗口是否关闭，false为默认，窗口打开)
2.对象:
1)document: 表示整个html文档，通过此对象可访问页面上所有的元素
2)history对象：表示已浏览的url，常用的方法
back,返回上一个访问过的页面，forward，前进一个页面，go，访问任意一个已访问的页面
3)location对象: 包含当前url，默认的属性的href。
4)navigator对象：包含浏览器的信息
3.事件：
onload事件：当页面完成加载时触发
onscroll事件：当用户滚动滚动条时触发
4.方法:
1)弹出对话框的三种方式:
alert:弹出消息对话框window.alert([sMessage])
confirm:弹出确认对话框bConfirmed = window.confirm( [sMessage])
prompt:弹出提示对话框vTextData = window.prompt([sMessage] [, sDefaultValue])
2)window.open方法,打开一个新窗口，此方法会返回一个window对象，可以设置窗口的所有属性
3)window.setTimeout：开启定时器，隔多少毫秒后执行一个表达式
此方法返回一个定时器，可以通过clearTimeout清除定时器
4)window.setInterval: 开启定时器，每隔多少毫秒后执行一个表达式
此方法返回一个定时器，可以通过clearInterval清除定时器

二、Node对象，节点对象，只是所有节点对象的一个统称，不表示具体节点
1.nodeType: 节点类型 document、element(所有的页面元素)Text：文本节点，页面上所有的文本
2.node常用属性
nodeName节点名字、nodeType节点类型、childNodes所有子节点、parentNode父节点
nextSibling下一个兄弟节点、previousSibling前一个兄弟节点
firstChild第一个子节点、lastChild最后一个子节点
3.node常用的方法
appendChild增加一个子节点，增加为最后一个子节点
removeChild删除一个子节点
replaceChild替换一个子节点
insertChild在当前子节点之前插入一个子节点
cloneNode克隆节点
hasChildNodes判断当前节点是否有子节点

三、document对象:表示整个页面文档
1.方法:
createElement()创建一个元素节点，返回一个元素对象，需要append到存在的节点下面，页面才会有显示
获得页面元素： getElementById() getElementsByName() getElementsByTagName()
2.对象：
body、title
3.集合
forms所有表单、links所有超链接、anchors所有锚点

四、element元素对象
1.属性：tagName标签名
2.方法:getAttribute和setAttribute获得和设置标签的属性

五、table对象
1.table的字节点是tbody，tbody的子节点才是tr
2.table有个属性rows表示所有行对象，tr有个属性cells表示所有单元格对象
3.添加行的两种方式： table.insertRow([index]) tbody.appendChild(tr)
4.添加单元格的两种方式: tr.insertCell([index]) tr.appendChild(td)
5.删除行： table.deleteRow(index) tbody.removeChild(tr)
两种用法各有用处，就看是拿到行对象，还是知道行号

六、a超链接触发JavaScript脚本的两种方式
常用: <a href='javascript:func()'></a>
<a href='javascript:void(0)' οnclick='func()'></a>

1,心理测试beta1.0

<!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=utf-8" />
<title>心理测试beta1.0</title>
<style type="text/css">
	.open
	{
		display:block;
	}
	.close
	{
		display:none;
	}
	.ulid
	{
		list-style:none;
		margin:12px;
	}
</style>
<script type="text/javascript">
	function showResult()
	{
		var nodes = document.getElementsByName("no1");
		var flag = false;
		var value;
		for(var x=0; x<nodes.length; x++)
		{
			if(nodes[x].checked)//如果为真
			{
				flag = true;//把状态栏更改为真
				value = nodes[x].value;
				break;//跳过本次循环,
			}else
			{
				flag = false;
				
			}
		}
		if(!flag) //非真就是假
		{
			var info = document.getElementById("errorInfo");
			info.innerHTML = "心理严重有问题".fontcolor("red");
			return;
		}
		if(value>=1&&value<=3)
		{
			 document.getElementById("div_1").className="open"; //打开第一个
			 document.getElementById("div_2").className="close"; //并且把第二个关闭
			
		}else
		{
			document.getElementById("div_2").className="open";
			document.getElementById("div_1").className="close";
		}
	}
</script>
</head>

<body>
		<h2>欢迎您参与性格测试:</h2>
        
        <h4>第一题:</h4>
        <div>
       	你喜欢的水果:
        </div>
       <ul class="ulid">
       <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>
       <input type="button" value=" 点我查看测试的结果:" οnclick="showResult()"/>
       <hr/>
       <div class="close" id="div_1">
        <font color="red">1-3分以下:您的性格内向并且扭曲,建议去医院看病.</font> 
       </div>
       <span id="errorInfo"></span>
       <div class="close" id="div_2">
        <font color="red">4分以上: 哥们,你蛮可以的..建议回家吃药.</font>
        </div>
</body>
</html>

2,调查文档的小测试:

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">

	#tableId
	{
		display:none;
	}
</style>

<script type="text/javascript">

	/*
		注意两个小地方:
			1,默认是隐藏的
			2,通过更改样式表去完成这题目
			3,checked = "checked";//默认按钮是这个
	*/
	function show(node)
	{
		var tableNode = document.getElementById("tableId");
		//通过更改样式表
		
		with(tableNode.style) //通过更改table的样式表
		{
			if(node.value=='yes')
			{
				display="block"; //不隐藏
			}else
			{
				display="none";//隐藏
			}
		}
	}
</script>
</head>

<body>
	<div>
    	<span>您要参与问卷调查吗：</span>
        <input type="radio" name="fun" value="yes" οnclick="show(this)"/>是
        <input type="radio" name="fun" value="no" checked="checked" οnclick="show(this)"/>否
    </div>
	<table  id="tableId">
    	<tr>
        	<th>问卷调查内容</th>
        </tr>
        <tr>
        	 <td>您的姓名:<input type="text" name="useName"></td>
        </tr>
        <tr>
        	<td>您的邮箱:<input type="text" name="useMail"></td>
        </tr>
    </table>

</body>
</html>

3,更改文字背景颜色:

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#text
	{
		clear:left;
		margin-top :20px;
	}
</style>

<script type="text/javascript">
	function showColor()
	{
		//判断获取里面的样式表
		var selectNode = document.getElementsByName("selectColor")[0];
		//获取select集合里面所选中的style样式表
		var optionColor = selectNode.options[selectNode.selectedIndex].style.backgroundColor;
		var divNode = document.getElementById("text");
		divNode.style.backgroundColor = optionColor;
	}
</script>
</head>

<body>
	<script type="text/javascript"> </script>
	<select name="selectColor" οnchange="showColor()">
    	<option style="background-color:#000000" value="color">请选择颜色</option>
    	<option style="background-color:#FF0000" value="red">红色</option>
    	<option style="background-color:#00FF00" value="green">绿色</option>
        <option style="background-color:#000099" value="blue">蓝色</option>
    </select>
    
    <div id="text">
    　【环球网报道 记者 王欢】日本共同社9月24日报道称，经日本第11管区那霸海上保安总部巡逻船确认，北京时间24日上午9点40分左右，一艘中国渔政船驶入钓鱼岛12海里近海。包括当天清晨的2艘海监船在内，目前共有3艘中方公务船在12海里海域内航行。

　　《读卖新闻》24日报道称，北京时间24日上午9点40分左右，中国渔政船“渔政310”从赤尾屿西北约22公里海域驶入“日本领海”。截止24日上午10点，共有3艘中方公务船在钓鱼岛12海里近海内巡航。这是日本政府自9月11日实施“国有化”方针以来，中方公务船第3次进入12海里海域。

　　日本内阁官房长官藤村修在24日上午的记者会上称，“日方要求中方公务船退出日本领海，已通过外交渠道向中方提出抗议”。此外，当天上午，日本政府将原本设置在首相官邸危机管理中心设立的情报联络室升级为官邸对策室。

　　另据日本NHK电视台报道，鉴于中方公务船第3次进入12海里巡航，日本政府24日以首相官邸的危机管理中心为核心展开情报收集和局势分析工作。首相野田佳彦指示外务事务次官河相周夫在相关情报收集方面与相关省厅保持密切合作。
    </div>
</body>
</html>

4,对邮箱进行的操作

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	.one{
		background-color:#9bf7d5;
	}
	.two{
		background-color:#f3e99a;
	}
	.over{
		background-color:#ef7125;
	}
</style>

	<script type="text/javascript">
	
	
			/*
				为表格上颜色
			*/
			function trColor()
			{
				//1.获取table节点
				var tableNode = document.getElementById("mailtable");	
				//2.获取到table节点行集合
				var rows = tableNode.rows;
				var name ;
				for(var x=1; x<rows.length-1; x++)
				{
					if(x%2==1)
					{
						rows[x].className = "one";
					}else
					{
						rows[x].className = "two";
					}
					
					/*
						执行流程:
							1,从for循环下面执行起来..执行完毕-->到了事件的监听.  事件处理方式: 不管是那个类型..只要是对象调用了.我离开了这个行.咱们就变.
							
					*/
					rows[x].onmouseover = function()
					{
						name = this.className;
						this.className = "over";
						
					}
					rows[x].onmouseout = function()
					{
						this.className = name;
					}
					
				}
			}
			/*
				当我完成的时候就加载完毕他
			*/
			window.onload = function()
			{
				trColor();
			}
			
			/*
				1.全选的状态
			*/
			function checkAll(node)
			{
				//获取所有的mailid对象
				var mailNodes = document.getElementsByName("mail");
				for(var x=0; x<mailNodes.length; x++)
				{
					mailNodes[x].checked = node.checked;//状态跟着我变化
				}
			}
			
			/*
				取消按钮+全选按钮的功能完成
			*/
			function checkAllByBut(number)
			{
				var mailNodes = document.getElementsByName("mail");
					for(var x=0; x<mailNodes.length; x++)
					{	
						if(number>1)
						{
							//复选框的意思: 如果我的状态为真,咱就假,如果咱为假,就真
							mailNodes[x].checked = !mailNodes[x].checked;
						}
						else
						{
							mailNodes[x].checked = number;
						}
					}

			}
			
			
			/*
				删除邮件 ,需要注意的问题:
			*/
			function deleteMail()
			{
				if(!confirm("确定要删除吗?"))
					//非真
					return;
				//获取到所有的mail对象
				var mailNodes  = document.getElementsByName("mail");
				for(var x=0; x<mailNodes.length; x++)
				{
					var node = mailNodes[x].parentNode.parentNode; //获取到tr节点的内容
					node.parentNode.removeChild(node);//把它的儿子干掉
					/*
						当他删除了第一个元素的时候.角标会往上面移动-->  mailNodes的个数也会少
					*/
					x--;
				}
			}
			
	</script>
</head>

<body>
	<table id="mailtable">
	<tr>
    	<th>
        	<input type="checkbox" name="all" οnclick="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" οnclick="checkAll(this)"  />全选
        </th>
        <th colspan="3">
        	<input type="button" value="全选" οnclick="checkAllByBut(1)" />
            <input type="button" value="取消全选" οnclick="checkAllByBut(0)"  />
            <input type="button" value="反选" οnclick="checkAllByBut(2)"  />
            <input type="button" value="删除所选附件" οnclick="deleteMail()" />
        </th>
    </tr>
</table>
</body>
</html>

4,二级表格的的作用:

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
    		function selectCity()
			{
				var  collCities = [['选择城市']
									,['海淀区','朝阳区','东城区','西城区']
									,['济南','青岛','烟台','威海']
									,['沈阳','大连','鞍山','抚顺']
									,['石家庄','保定','邯郸','廊坊']];
				
				
				//1,获取两个对象						
				var selNode = document.getElementById("selid");	 //省份
				var CityNode = document.getElementById("subselid");//城市
				
				//2,获取到选择省份的角标
				var index = selNode.selectedIndex;//获取到select对象中所选中的位置
				
				//3,获取到二维数组所选择的省份的角标
				var arr = collCities[index];
				//alert(arr.length);
				
				//将子菜单里面的内容清空,由于长度会变,但是角标会自动往上面移动
				for(var x=0; x<CityNode.options.length;)
				{
					//遍历option里面的内容-->把它集合里面的x对象干掉
					CityNode.removeChild(CityNode.options[x]);
				}
				//4,遍历二维数组的内容.并且添加到option里面去
				for(var x=0; x<arr.length; x++)
				{
					optionNode = document.createElement("option");
					//为这个对象添加内容
					optionNode.innerHTML = arr[x]; 
					
					//添加到select对象下面
					CityNode.appendChild(optionNode);
				}
			}
    </script>
	<select id="selid" οnchange="selectCity()">
    	<option>请选择省份</option>
        <option>北京</option>
        <option>山东</option>
        <option>辽宁</option>
        <option>河北</option>
        
    </select>
    
    <select id="subselid">
    	<option>请选择城市</option>
    </select>
</body>
</html>

5,附件的添加与删除功能:

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
    	function addFile()
		{
			var tableNode = document.getElementById("fileId");
			var row = tableNode.insertRow();//创建行
			var cell = row.insertCell();//创建一个行里面的单元格
			var delce = row.insertCell();//新创建一个行里面的单元格
			cell.innerHTML = "<input type='file'/>";//从列里面写上内容
			delce.innerHTML = "<a href='javascript:void(0)' οnclick='delFile(this)'>删除附件</a>"
		}
		
		function delFile(node)
		{
			//1,获取行对象
			var trNode = node.parentNode.parentNode;
			trNode.parentNode.removeChild(trNode);
		}
    </script>
	<table id="fileId">
    	<tr>
        	<td><a href="javascript:void(0)" οnclick="addFile()">添加附件</a></td>
        </tr>
		
    </table>
</body>
</html>

6,简单的表单判断:

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
		<script type="text/javascript">
		
			function check(name,reg,spanid,okinfo,errorinfo)
			{
				var flag;//默认标记
				var val = document.getElementsByName(name)[0].value;//获取到value  文本框里面的内容
				if(reg.test(val))
				{
					document.getElementById(spanid).innerHTML = okinfo;
					flag = true;  //真就是代表成功
				}else
				{
					document.getElementById(spanid).innerHTML = errorinfo.fontcolor("red");
					flag = false;
				}	
			}
			
			/*
				效验用户名
			*/
			function checkUser()
			{
				var regex = /^[a-z]{4}$/i; //忽略大小写
				return check("user",regex,"userspan","用户名正确","用户名格式不正确!");
			}
			
			/*
				效验密码  当您调用了我这个方法,其实就是把上面的方法所调用.
			*/
			function checkPsw()
			{
				var regex = /[a-z]{6}/i;
				return check("psw",regex,"pswspan","密码可用","密码不可用");
			}
			
			/*
				获取密码框的内容是否相同
			*/
			function checkRepsw()
			{
				var psw = document.getElementsByName("psw")[0].value;
				var repsw = document.getElementsByName("repsw")[0].value;
				var flag;
				
				var repswspan = document.getElementById("repswspan");
				if(psw==repsw)
				{
					//获取span里面的内容->显示信息
					repswspan.innerHTML = "两次密码一致";
					flag = true;
				}else
				{
					repswspan.innerHTML = "两次密码不一致".fontcolor("red");
					flag = false;
				}
				return flag;//把标识符返回过去
			}
			
			/*
				邮箱地址的验证
			*/
			function checkMail()
			{
				var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
				return check("mail",reg,"mailspan","邮箱正确","邮箱不正确");
				//这时候checkMail接收的只有唯一 true false;
			}
			
			/*
				表单数据的提交
			*/
			function checkForm()
			{
				if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail())
					return true;
				return false;
			}
			
			/*
				自定义按钮的提交方式
			*/
			function mySubmit()
			{
				//其实就是获取到form标签的submit方法
				var info = document.getElementById("userinfo");
				info.submit();//代表提表单交数据
			}
        </script>
		<form id="userinfo" οnsubmit="return checkForm()">  <!--事件:当表单提交数据的时候立即触发,判断是否全部都为true,onsubmit事件判断是真或假，如果为假则发布不出去-->
			
			用户名称：<input type="text" name="user" οnblur="checkUser()" /><!--当鼠标离开焦点的时候触发-->
			<span id="userspan"></span>
			<br/>
			
			输入密码：<input type="text" name="psw" οnblur="checkPsw()"  />
			<span id="pswspan"></span>
			<br/>
			
			确定密码：<input type="text" name="repsw" οnblur="checkRepsw()" />
			<span id="repswspan"></span>
			<br/>
			
			邮件地址：<input type="text" name="mail" οnblur="checkMail()"  />
			<span id="mailspan"></span>
			<br/>
			
			<input type="submit" value="提交数据" />
           <hr/>
           <!--自定义提交按钮-->
           <input type="button" value="我来提交啦" οnclick="mySubmit()"/>
		</form>
		<hr/>
</body>
</html>

以下题目绝对搞笑：

题目:
<!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=utf-8" />
<title>无标题文档</title>
<style>

#tableId {
	
}
</style>

<script type="text/javascript">
		
		
		/*
			校验器
		*/
		function check(name,reg,spanid,okinfo,errorinfo)
		{
			var flag;
			var node = document.getElementsByName(name)[0].value;
			var spanid = document.getElementById(spanid);
			if(reg.test(node))
			{
				spanid.innerHTML = okinfo;
				flag = true;
				
			}else
			{
				spanid.innerHTML = errorinfo.fontcolor("red");
			}
			return flag;
		}
		
		
		/*
			效验用户名
		*/
		function checkUse()
		{
			var reg = /^[a-z]{4}$/i;
			return check("useName",reg,"nameSpan","用户名正确","用户名不正确");  //返回true或者false  并且调用了该函数
			
		}
		
		/*
			效验密码
		*/
		function checkPass()
		{
			var reg  =/^[A-Za-z]+$/;
			return check("passWord",reg,"passSpan","密码格式正确","密码格式不准确");
		}
		
		/*
			判断密码是否以上面的内容相同
		*/
		function verifyPass()
		{
			var val = document.getElementsByName("passWord")[0].value;
			var pass = document.getElementsByName("verifyPassWord")[0].value;
			
			//获取输入的密码框
			var node = document.getElementById("verifyPass");
			if(pass==val)
			{
				node.innerHTML = "密码一致";
				return true;
			}else
			{
				node.innerHTML = "密码不一致".fontcolor("red");
				return false;	
			}
		}
		function getMail()
		{
			var reg = /\w+([-+.]\w+)*@\w+([-.] \w+)*\.\w+([-.]\w+)*/;
			return check("mailBox",reg,"mailSpan","邮箱格式正确","邮箱格式不正确");
		}
		
		//提交数据处理
		function checkForm()
		{
			if(checkUse()&&checkPass()&&verifyPass()&& getMail())
			{
				alert("注册成功,等待服务端反馈信息");
				return true;
			}
			else
			{
				alert("注册失败~~");
				return false;
				
			}	
		}
		
		function myForm()
		{
			var node = document.getElementById("formId");
			node.submit();//也是一个提交方式
		}
</script>
</head>

<body>
<table id="tableId">

	<!--当我需要提交数据的时候,我们只需要操作事件就可以..不需要在按钮那边写方法-->
	<form id="formId" οnsubmit="return checkForm()" method="post" action="http://127.0.0.1:8888/">
    	<tr>
        	<td>
    			用户名称:
        	</td>
            <td>
           	 <input type="text" name="useName" οnblur="checkUse()"/>
            </td>
            <td>
            	<span id="nameSpan"></span>
            </td>
        </tr>
        
    	<tr>
        	<td>
    		    输入密码:
        	</td>
            <td>
            	<input type="password" name="passWord" οnblur="checkPass()"/>
            </td>
            <td>
            	<span id="passSpan"></span>
            </td>
        </tr>
        
        <tr>
        	<td>
    			确认密码:
        	</td>
            <td>
            	<input type="password" name="verifyPassWord" οnblur="verifyPass()"/>
            </td>
            <td>
            	<span id="verifyPass"></span>
            </td>
        </tr>
        

        <tr>
        	<td>
    			邮箱地址:
        	</td>
            <td>
            	<input type="text" name="mailBox" οnblur="getMail()"/>
            </td>
            <td>
            	<span id="mailSpan"></span>
            </td>
       </tr>
       
       <tr>
       		<td> <input type="submit" value="提交数据"/></td>
            <td> <input type="reset" value="清空数据"/></td>
       </tr>
    </form>
</table>     
	 <hr/>
    <input type="button" value="管理员专用" οnclick=""/>

</body>
</html>


测试题:
		练习1：对性别单选按钮进行判断，如果用户没有选择任何性别选项，要给出提示。"必须选择您的性别。"
		
		练习2：对兴趣复选选项进行判断，必须至少选择一个兴趣。

这个答案保证错!!~但也是无聊实现的结果哦.
<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<script type="text/javascript">
			function checkFun()
			{
				var nodes = document.getElementsByName("fun");
				for(var x=0; x<nodes.length ;x++)
				{
					if(nodes[x].value=="java"||nodes[x].value=="net"||nodes[x].value=="c")
					{
						var node = document.getElementById("spanFun");
						node.innerHTML = "请选择兴趣".fontcolor('red');
					}
				}
				var sex = document.getElementById("spanSex");
				sex.innerHTML = "";
			}
			
			function checkSex()
			{
				var nodes = document.getElementsByName("sex");
				for(var x=0; x<nodes.length ;x++)
				{
					if(nodes[x].value=="man"||nodes[x].value=="wanmax")
					{
						var node = document.getElementById("spanSex");
						node.innerHTML = "请选择性别".fontcolor('red');
					}
				}
				var fun = document.getElementById("spanFun");
				fun.innerHTML = "";
			}
	</script>
	<!--
    		练习1：对性别单选按钮进行判断，如果用户没有选择任何性别选项，要给出提示。"必须选择您的性别。"
			练习2：对兴趣复选选项进行判断，必须至少选择一个兴
            趣。
            
            思路: 判断里面有一项必须要比选
            中
            
    -->
    <form οnsubmit="return checkForm()">
    <div>
    性别:
    <input type="radio" name="sex" value="man"  οnclick="checkFun()"/>男
    <input type="radio" name="sex" value="woman" οnclick="checkFun()"/>女
     <span id="spanSex"></span>
    </div>
    
    <div>
    	兴趣:
    	<input type="checkbox" name="fun" value="java"οnclick="checkSex()"/>java开发
        <input type="checkbox" name="fun" value="net" οnclick="checkSex()"/>net开发
        <input type="checkbox" name="fun" value="C" οnclick="checkSex()"/>C++开发
        <span id="spanFun"></span>
    </div>
    <div>
    	<input type="submit" name="sub" value="提交数据"/>
    </div>
    </form>
	
</body>
</html>

心得：思路是锻炼出来的～～加油。