黑马程序员--javascript：27,29 邮件实例，注册表单实例。

于 2013-06-10 12:45:09 发布
阅读量916 收藏
点赞数
分类专栏： 黑马程序员--学习笔记 文章标签： 黑马程序员 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/F781492604/article/details/9070721
版权

---------------------- ASP.Net+Android+IO开发S、.Net培训、期待与您交流！ ----------------------

 

<!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{
	border:#00CC00 1px solid;
	width:70%;}
table th,table td{
	border:#009900 1px solid;
}
th{
	background-color:#FFCCFF;
}
.one{
	background-color:#CC99FF;
}

.two{
	background-color:#99FFCC;
}

.three{
	background-color:#999999;
}

</style>


</head>

<body>

  <table >
    <tr id="table">
	  <th><input name="mail" type="checkbox" value="" οnclick="clickAll(this)"/>全选</th>
	  <th>发件人</th>
	  <th>邮件</th>
	</tr>
    
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike1</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike2</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike3</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike6</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike4</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike5</td>
	  <td>new mail</td>
	</tr>
	
	   <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike1</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike2</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike3</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike6</td>
	  <td>new mail</td>
	</tr>
	
    <tr>
	  <td><input name="mail" type="checkbox" value="" /></td>
	  <td>mike4</td>
	  <td>new mail</td>
	</tr>
	
	<tr>
	  <th><input name="mail" type="checkbox" value="" οnclick="clickAll(this)"/>全选</th>
	  <th colspan="2">
	  <input name="" type="button" value="全选" οnclick="checkBut(1)"/>
	  <input name="" type="button" value="取消全选" οnclick="checkBut(0)"/>
	  <input name="" type="button" value="反选" οnclick="checkBut(2)"/>
	  <input name="" type="button" value="删除选择" οnclick="delMail()"/>
	  </th>
	</tr>
	
  </table>


<script type="text/javascript">//不知道是什么原因，我的script 好像一加载就好运行，而且是在body script 后面的内容被加载之前就运行，因此要是不放在最后的位置，body里的 标签就没法 在script 运行之前 转成 object，这样就好出错，无法被ie解析。
function trColor(){
	var tabNode = document.getElementsByTagName("table")[0];
	var trs = tabNode.rows;
	var cls = ["one","two"];
	
	for(var x =0; x < trs.length-1;x++){
		
		trs[x].className=cls[x%2];
		
		trs[x].οnmοuseοver=function(){
			name=this.className;//这里的 name 是 怎么回事，怎么解释它不需要定义？？
			this.className="three";
		}
		trs[x].οnmοuseοut=function(){
			this.className=name;
		}
	}		
}

function clickAll(mailNode){
	var mails = document.getElementsByName("mail");
	for(var x=0;x < mails.length;x++){

			mails[x].checked=event.srcElement.checked;//mailNode.checked;
			//这两种方法都可行，还可以传入index角标
	}
	
}

function checkBut(index){
	var mails = document.getElementsByName("mail");
	for(var x=1;x < mails.length-1;x++){
		if(index>1)
			mails[x].checked=!mails[x].checked;
		else
			mails[x].checked=index;
	}
	
}

function delMail(){
	if(!window.confirm("delete??"))
		return;
	var mails = document.getElementsByName("mail");
	
	var arr = [];
	var pos =0;	
	for(var x=1;x < mails.length-1;x++){
		if(mails[x].checked)
			arr[pos++] = mails[x].parentNode.parentNode;
	}
	
	for(var x=0;x<arr.length;x++){
		arr[x].parentNode.removeChild(arr[x]);
	}
	/*
	for(x in mails){
		alert(mails[x].tagName);// 非常奇怪，为什么用 for in 就没法遍历出 mails 里面的 元素呢？？？？？
	}
	*/
/*
	for(var x=1;x < mails.length-1;x++){
		if(mails[x].checked){
			var tr = mails[x].parentNode.parentNode
			arr[x-1]=tr;//这里没用pos 会出现 arr[0] 为空指针。
		}
	}
	alert(arr.length);
	for(var x=0;x<arr.length;x++){
		arr[x].parentNode.removeChild(arr[x]);
	}
	*/
	trColor();
}

window.οnlοad=function(){
	trColor();
}
</script>
</body>
</html>

 

这里没法显示动态效果，而且style 也 变了形 就连基本的背景也变了，看起来效果完全不一样

全选发件人邮件
mike1new mail
mike2new mail
mike3new mail
mike6new mail
mike4new mail
mike5new mail
mike1new mail
mike2new mail
mike3new mail
mike6new mail
mike4new mail
全选
  

<!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{
	border:#3366FF 1px solid;
	widows:80%;
}
table th, table td{
	border:#00FF00 1px solid;
	padding:10px;
}
table th{
	background-color:#66FF99;
}
table td{
	background-color:#FFCCFF;
}
.errorinfo{
	color:#FF0000;
	display:none;
}
.focus{
	border:#0000CC 2px solid;
}

</style>
<script type="text/JavaScript">
function init(){
	var tds = document.getElementsByTagName("td");
	alert(tds.length);
	for(var x=0;x<tds.length;x++){
		var divs = tds[x].children;
		divs[1].className="errorinfo";
	}
}

function onFocus(){
	event.srcElement.className="focus";
}
function onBlur(name,test){
	if(test){
		name.className="norm";
		name.parentNode.nextSibling.style.display="none";
	}else{
		name.className="error";
		name.parentNode.nextSibling.style.display="block";
	}
	return test;
}

function checkUser(name){
	var test=/^[a-zA-Z_]\w{5,15}$/.test(name.value);
	return onBlur(name,test);
}
function checkPsw(name){
	var test = /\w{6,16}/.test(name.value)
	return onBlur(name,test);
}
function checkRepsw(name){
	var test = (name.value==document.forms[0].psw.value);
	return onBlur(name,test);
}
function checkMail(name){
	var test = /\w+@\w+(\.\w+)+/.test(name.value);
	return onBlur(name,test);
}
function checkCity(name){
	var test = name.selectedIndex;
	return onBlur(name,test);
}
function checkIntro(name){
	var test = name.value;
	return onBlur(name,test);
}

/*function check(name){
	with(document.forms[0]){
		var test = 0;
		switch(name){
			case user:
			test=/^[a-zA-Z_]\w{5,15}$/.test(name.value);
			case psw:
			test = /\w{6,16}/.test(name.value);
			case repsw:
			test = (name.value==document.forms[0].psw.value);
			case mail:
			test = /\w+@\w+(\.\w+)+/.test(name.value);
			case city:
			test = name.selectedIndex;
			case intro:
			test = name.value;
		}
		
		return onBlur(name,test);
	}
}*/
function checks(name){
	for(var x=0;x<name.length;x++){
		if(name[x].checked){
			name[0].parentNode.nextSibling.style.display="none";
			return name[x].value;
		}else{
			name[0].parentNode.nextSibling.style.display="block";
			return false;
		}
	}
}
function checkSum(){
	with(document.forms[0]){
		if(!(checkUser(user)&&checkPsw(psw)&&checkRepsw(repsw)
			&&checkMail(mail)&&checks(sex)&&checkCity(city)
			&&checks(hobby)&&checkIntro(intro)))
			event.returnValue=false;
		else
			event.returnValue=true;
	}
}
window.οnlοad=function(){init();}
</script>
</head>

<body>
  <form action="" method="get">
    <table>
	  <tr>
	    <th>注册表单</th>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>用户名：<input name="user" type="text" onFocus="onFocus()" onBlur="checkUser(this)" /></div>
		  <div>用户名格式不正确，请按要求输入。</div>
		  <div>用户名必须是6-16位，由字母(a-z,A-Z)，数字(0-9)，下划线(_)组成,不能用数字开头。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>密码：
		    <input name="psw" type="password" onFocus="onFocus()" onBlur="checkPsw(this)" /></div>
		  <div>密码格式不正确，请按要求输入。</div>
		  <div>密码必须是6-16位，由字母(a-z,A-Z)，数字(0-9)，下划线(_)组成。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>确认密码：
		    <input name="repsw" type="password" onFocus="onFocus()" onBlur="checkRepsw(this)" /></div>
		  <div>两次密码不一致，请重新输入。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>邮箱：<input name="mail" type="text" onFocus="onFocus()" onBlur="checkMail(this)" /></div>
		  <div>邮箱格式不正确。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>性别：<input type="radio" name="sex" value="male" />男
		      		 <input type="radio" name="sex" value="female" />女
		  </div>
		  <div>请选择您的性别。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>城市：<select name="city" size="1" onFocus="onFocus()" onBlur="checkCity(this)">
					  <option>---城市---</option>
					  <option>北京</option>
					  <option>香港</option>
					  <option>上海</option>
					  <option>New York</option>
					  <option>杭州</option>
					  <option>singapore</option>
					</select>
		  </div>
		  <div>请选择您的城市。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>兴趣：<input name="hobby" type="checkbox" value="game" />game
		  			 <input name="hobby" type="checkbox" value="java" />java
		  			 <input name="hobby" type="checkbox" value="lisp" />lisp
					 <input name="hobby" type="checkbox" value="ruby" />ruby
					 <input name="hobby" type="checkbox" value="clojure" />clojure
					 <input name="hobby" type="checkbox" value="javascript" />javascript					 
					 <input name="hobby" type="checkbox" value="android" />android
		  </div>
		  <div>请选择您的兴趣爱好。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <td>
		  <div>简介：<br />
			<textarea name="intro" cols="80" rows="9" onFocus="onFocus()" onBlur="checkIntro(this)"></textarea>
		  </div>
		  <div>请填写您的简介。</div>
		</td>
	  </tr>
	  
	  <tr>
	    <th><input type="submit" name="submit" value="提交注册表单" οnclick="checkSum()"/></th>
	  </tr>
	</table>
  </form>
</body>
</html>

注册表单

用户名：

用户名格式不正确，请按要求输入。

用户名必须是6-16位，由字母(a-z,A-Z)，数字(0-9)，下划线(_)组成,不能用数字开头。

密码：

密码格式不正确，请按要求输入。

密码必须是6-16位，由字母(a-z,A-Z)，数字(0-9)，下划线(_)组成。

确认密码：

两次密码不一致，请重新输入。

邮箱：

邮箱格式不正确。

性别：男 女

请选择您的性别。

城市：

请选择您的城市。

兴趣：game javalisprubyclojurejavascriptandroid

请选择您的兴趣爱好。

简介：

请填写您的简介。

---------------------- ASP.Net+Android+IO开发S、 .Net培训、期待与您交流！ ----------------------
F781492604
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值