`
webdev2014
  • 浏览: 670114 次
文章分类
社区版块
存档分类
最新评论

DHTMl案例(简称动态网页)--html、css、javascript、div技术的结合

 
阅读更多

CreateTable

<!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">
table{
	border:#0099FF 1px solid;
	width:600px;
	border-collapse:collapse;
	}
	
table td{
	border:#0099FF 1px solid;
	padding:10px 20px 3px 1px; 
	}
</style>

<script type="text/javascript">
	function createTable(){
		/*
			创建 一个一行一列的表格
			思路:
			0、找到div
			1、创建表格标签
			2、创建行标签
			3、创建单元格标签
			4、添加文本
			5、组合表格
			6、将表格添加指定位置 DIV
		*/
		//找到div
		var divNode = document.getElementById("div_id");
		//创建表格标签
		var tableNode = document.createElement("table");
		//创建行标签
		var trNode = document.createElement("tr");
		//创建单元格标签
		var tdNode = document.createElement("td");
		//添加文本
		tdNode.innerText = "哈哈,我是新创建出来的表格";
		//组合表格
		trNode.appendChild( tdNode );
		tableNode.appendChild( trNode );
		//将表格添加指定位置 DIV
		divNode.appendChild( tableNode );
	}
	
	function createTable2(){
		//0、找到div
		var divNode = document.getElementById("div_id");
		//1、创建表格标签
		var tableNode = document.createElement("table");
		
		for(var x=1; x<=5; x++){
			//2、创建行标签
			var trNode = tableNode.insertRow();
			for(var y=1; y<=6; y++){
				//3、创建单元格标签
				var tdNode = trNode.insertCell();
				//4、添加文本
				tdNode.innerText = x+"行"+ y +"列";
			}
		}
		
		//5、组合表格
		//6、将表格添加指定位置 DIV
		divNode.appendChild( tableNode );
	
	}
	
	function createTable3(){
		var row = document.getElementById("row").value;
		var col = document.getElementById("col").value;
		//0、找到div
		var divNode = document.getElementById("div_id");
		//1、创建表格标签
		var tableNode = document.createElement("table");
		
		for(var x=1; x<=row; x++){
			//2、创建行标签
			var trNode = tableNode.insertRow();
			for(var y=1; y<=col; y++){
				//3、创建单元格标签
				var tdNode = trNode.insertCell();
				//4、添加文本
				tdNode.innerText = x+"行"+ y +"列";
			}
		}
		
		//5、组合表格
		//6、将表格添加指定位置 DIV
		divNode.appendChild( tableNode );
	}
</script>

</head>

<!-- 
	方法:
		insertRow 在表格中创建新行(tr),并将行添加到 rows 集合中。
		insertCell 在表格行(tr)中创建新单元格,并将单元格添加到 cells 集合中。 
-->
<body>
<div id="div_id">
	
</div>

<input type="button" value="创建表格" onclick="createTable()" /><br />

<input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br />

行数:<input type="text" name="row" id="row"/><br />
列数:<input type="text" name="col" id="col"/><br />
<input type="button" name="createButton" value="创建表格(行列用户输入)" onclick="createTable3()" />
</body>
</html>
DataSort

<!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">
table {
	border:#0099FF 1px solid;
	border-collapse:collapse;
	width:600px;
	}
	
table td{
	border:#0099FF 1px solid;
	text-align:center;
	}
	
#age:link,#age.visited {
	color:#000000;
	}
</style>

<script type="text/javascript">
	function sortAge(){
		//获取当前表格
		var tableNode = document.getElementsByTagName("table")[0];
		//获取表格中的所有行
		//var trNodes = tableNode.getElementsByTagName("tr");
		var trNodes = tableNode.rows;
		//创造新数组  该数组用来存储行的数据
		var arr = new Array(trNodes.length -1);
		//将行的数据 复制到新数组中
		for(var x=0; x<arr.length; x++){
			arr[x] = trNodes[x+1];
		}
		//获取行中年龄的值 进行比较
		//alert( arr[0] );
		//alert( arr[0].cells[1].innerText );
		//alert( arr[1].cells[1].innerText );
		for(var x=0; x<arr.length-1; x++){
			for(var y=x+1; y<arr.length; y++){
				//行中年龄的值 进行比较
				if(arr[x].cells[1].innerText > arr[y].cells[1].innerText){
					//根据年龄比较的结果 进行行的置换
					var temp = arr[x];
					arr[x] = arr[y];
					arr[y] = temp;
				}
			}
		}
		
		//将数组中的行  替换 原有表格中的行
		for(var x=0; x<arr.length; x++){
			alert(x);
			tableNode.appendChild( arr[x] );
		}
	
	}
	
</script>
</head>
<!-- 
	集合:
		rows 获取来自于 table 对象的 tr (表格行)对象的集合。 
		cells 获取表格行或整个表格中所有单元格的集合。 
-->

<body>
<table align="center">
	<tr>
		<th>姓名</th>
		<th><a href="javascript:void(0)" onclick="sortAge()">年龄</a></th>
		<th>地址</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>25</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>23</td>
		<td>天津</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>28</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>赵六</td>
		<td>26</td>
		<td>南京</td>
	</tr>
	<tr>
		<td>周七</td>
		<td>22</td>
		<td>上海</td>
	</tr>
</table>
</body>
</html>
Radio

<!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">
	#result1,#result2,#result3,#result4{
		display:none;
	}
</style>

<script type="text/javascript">
	function show(node){
		//根据点击的单选按钮 得到value属性值
		var value = node.value;
		
		//根据value属性值,找到div,显示DIV
		var id = "result" + value;
		var divNode = document.getElementById( id );
		
		//隐藏所有的DIV
		for(var x=1; x<=4; x++){
			var divNode1 = document.getElementById( "result"+x );
			divNode1.style.display = "none";
		}
		
		//显示当前点击的单选按钮对应的div
		divNode.style.display = "block";
		
	}
</script>
</head>
<!-- 
	点击单选按钮 显示对应的div  其他的div隐藏
-->
<body>
<div>
	<h3>测试你的性格:</h3>
	<div>请选择下列一种水果:</div>
	<input type="radio" name="fruit" value="1" onclick="show(this)" />苹果<br />
	<input type="radio" name="fruit" value="2"  onclick="show(this)" />西瓜<br />
	<input type="radio" name="fruit" value="3"  onclick="show(this)"/>葡萄<br />
	<input type="radio" name="fruit" value="4"  onclick="show(this)"/>芒果<br />
	
	<div id="result1">
		您的性格,很羞涩.
	</div>
	<div id="result2">
		您的性格,很开朗.
	</div>
	<div id="result3">
		您的性格,很内向.
	</div>
	<div id="result4">
		您的性格,很醇香.
	</div>
</div>
</body>
</html>
Checkbox

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

<script type="text/javascript">
	function checkAll(node){
		/*
			通过标签的name属性的值 来获取对应的标签
			getElementsByName(...);		
		*/
		var items = document.getElementsByName("item");
		for(var x=0; x< items.length; x++){
			items[x].checked = node.checked;
		}
		
	}
	
	function check(){
		/*
			通过标签的name属性的值 来获取对应的标签
			getElementsByName(...);	
		*/
		var items = document.getElementsByName("item");
		for(var x=0; x<items.length; x++){
			items[x].checked = !items[x].checked;
		}
	}
	
	function getSum(){
		/*
			将选中的商品金额相加
		*/
		var sum = 0;
		var items = document.getElementsByName("item");
		for(var x=0; x<items.length; x++){
			if(items[x].checked){
				//选中
				var value = items[x].value;
				sum += parseInt(value);
			}
		}
		
		var spanNode = document.getElementById("sumId");
		spanNode.innerText = sum;
		
		
	}
</script>

</head>

<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br />
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选<br />
<input type="checkbox" name="all" onclick="check()"/>反选<br />

<input type="button" value="总金额" onclick="getSum()" />

<span id="sumId"></span>
</body>
</html>
Select

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


<script type="text/javascript">
	function getCountry(){
		//获取下拉框
		var selectNode = document.getElementsByName("country")[0];
		//找到select中所有option
		var options = selectNode.options;
		//找到当前选中的option的位置
		var index = selectNode.selectedIndex;
		//alert( index );
		
		//根据位置 在所有的option中 找到选中的option
		var option = options[index]
		
		//显示option中  国家值
		var value = option.value;
		alert( value );
	
	}
</script>
</head>

<!-- 
	事件:
		onchange 当对象或选中区的内容改变时触发。 
	集合:
		options 获取 select 对象中 option 对象的集合。 
	属性:
		 selectedIndex 设置或获取选中选项位于 select 对象中的位置 
-->

<body>
<select name="country" onchange="getCountry()">
	<option value="none">--选择国家--</option>
	<option value="中国">中国</option>
	<option value="美国">美国</option>
	<option value="日本">日本</option>
</select>
</body>
</html>
SelectCity

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

<script type="text/javascript">
	function selectCity(){
		//城市
		var arr = [
					["海淀区","朝阳区","丰台区"],
					["石家庄","唐山","秦皇岛"],
					["沈阳","大连","鞍山"],
					["青岛","济南","烟台"]
				  ];
	
		//找到省份的下拉框
		var provinceNode = document.getElementById("province");
		//找到所有的省份的option
		var provinceOptions = provinceNode.options;
		//选中省份的位置
		var index = provinceNode.selectedIndex;
		//根据位置 得到选中的省份的值  (演示)
		//var value = provinceOptions[index].innerText;
		//alert( value );
		
		//---------------------------------------
		
		
		//根据选中的省份位置 找到对应的城市
		//["海淀区","朝阳区","丰台区"]
		var citys = arr[index -1];
		
		//找到城市的下拉框
		var cityNode = document.getElementById("city");
		
		//清除原有城市
		cityNode.length = 1;
		
		//向城市的下拉框 添加城市option
		for(var x=0; x<citys.length; x++){
			//	<option>海淀区</option>
			var option = document.createElement("option");
			option.innerText = citys[x];
			//添加到城市下拉框中
			cityNode.appendChild( option );
		}
		
		
	}
</script>

</head>

<!-- 
	"海淀区","朝阳区","丰台区"
    "石家庄","唐山","秦皇岛"
    "沈阳","大连","鞍山"
    "青岛","济南","烟台"
    
	思路:
		找到省份的下拉框
		找到选中的省份值
		根据选中的省份值 找到对应的城市
		
		找到城市的下拉框
		向城市的下拉框 添加城市option
		
-->
<body>
<select id="province" onchange="selectCity()">
	<option>--选择省市--</option>
	<option>北京市</option>
	<option>河北省</option>
	<option>辽宁省</option>
	<option>山东省</option>
</select>


<select id="city">
	<option>--选择城市--</option>
	
</select>
</body>

</html>
ValidateForm(NotNull)

<!-- 
	用户注册
用户名称	张三
用户密码	123465
用户性别	男
技术爱好	java
所在城市	北京
   提交    重置
   
表格居中显示: 
	在<table>中,使用align属性 设置为center, 就可以实现表格在页面居中了
	
	
	事件:
		onsubmit 当表单将要被提交时触发。 
-->
<html>
	<head>
		<title>用户注册</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			table{
				margin-left:50%;
				position:relative ;
				left:-300px;
			}
		</style>
		
		
		<script type="text/javascript">
			function validataForm(){
				//验证表单信息
				//return false;
				
				//验证用户名
				var username = document.getElementsByName("username")[0];
				if(username.value == ""){
					alert("用户名不能为空");
					return false;
				}
				
				//验证用户密码
				var password = document.getElementsByName("password")[0];
				if(password.value == ""){
					alert("用户密码不能为空");
					return false;
				}
				
				//技术爱好
				var flag = false; //是否有选中的技术爱好
				var techs = document.getElementsByName("technology");
				for(var x=0; x<techs.length; x++){
					if(techs[x].checked){
						flag = true;
					}
				}
				
				if(!flag){
					alert("技术爱好不能为空");
					return false;
				}
				
				//所选城市
				var city = document.getElementsByName("city")[0];
				if(city.value == ""){
					alert("所选城市不能为空");
					return false;
				}
				
			}
		</script>
	</head>
	<body>
		<form method="post" action="success.html" onsubmit="return validataForm()" >
			<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
				<tbody>
					<tr>
						<th colspan="2">用户注册</th>
					</tr>
					<tr>
						<td>用户名称</td>
						<td>
							<input type="text" name="username" />
						</td>
					</tr>
					<tr>
						<td>用户密码</td>
						<td>
							<input type="password" name="password" />
						</td>
					</tr>
					<tr>
						<td>用户性别</td>
						<td>
							<input type="radio" name="sex" value="nan" checked="checked"/>男
							<input type="radio" name="sex" value="nv" />女
						</td>
					</tr>
					<tr>
						<td>技术爱好</td>
						<td>
							<input type="checkbox" name="technology" value="java" checked="checked" />JAVA
							<input type="checkbox" name="technology" value="android" />ANDROID
							<input type="checkbox" name="technology" value="HTML" />HTML
							<input type="checkbox" name="technology" value="IOS" />IOS
						</td>
					</tr>
					<tr>
						<td>所在城市</td>
						<td>
							<select name="city">
								<option value="">--选择城市--</option>
								<option value="bj">北京</option>
								<option value="sh">上海</option>
								<option value="gz">广州</option>
							</select>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit"  value="提交" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
	
</html>
ValidateForm(Submit、Reset)

<html>
	<head>
		<title>JS自定义提交、重置功能</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			table{
				margin-left:50%;
				position:relative ;
				left:-300px;
			}
		</style>
		
		
		<script type="text/javascript">
			function validataForm(){
				//验证表单信息
				//return false;
				
				//验证用户名
				var username = document.getElementsByName("username")[0];
				if(username.value == ""){
					alert("用户名不能为空");
					return false;
				}
				
				//验证用户密码
				var password = document.getElementsByName("password")[0];
				if(password.value == ""){
					alert("用户密码不能为空");
					return false;
				}
				
				//技术爱好
				var flag = false; //是否有选中的技术爱好
				var techs = document.getElementsByName("technology");
				for(var x=0; x<techs.length; x++){
					if(techs[x].checked){
						flag = true;
					}
				}
				
				if(!flag){
					alert("技术爱好不能为空");
					return false;
				}
				
				//所选城市
				var city = document.getElementsByName("city")[0];
				if(city.value == ""){
					alert("所选城市不能为空");
					return false;
				}
				
				//-------------------------------------
				
				//实现自定义提交功能
				//指定需要提交的表单
				var formNode = document.getElementsByTagName("form")[0];
				//指定数据提交的服务器地址
				//属性: action 设置或获取表单内容要发送处理的 URL。 
				formNode.action = "success.html";
				
				//提交数据
				//方法 : submit 提交表单。
				formNode.submit();
			}
			
			//自定义重置
			function myReset(){
				document.getElementsByName("username")[0].value = "";
				document.getElementsByName("password")[0].value = "";
				document.getElementsByName("sex")[0].checked = "checked";
				var technologys = document.getElementsByName("technology");
				for(var x=0; x<technologys.length; x++){
					technologys[x].checked = false;
				}
				document.getElementsByName("city")[0].value ="";
			}
		</script>
	</head>
	<body>
		<form method="get" action="" >
			<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
				<tbody>
					<tr>
						<th colspan="2">用户注册</th>
					</tr>
					<tr>
						<td>用户名称</td>
						<td>
							<input type="text" name="username" />
						</td>
					</tr>
					<tr>
						<td>用户密码</td>
						<td>
							<input type="password" name="password" />
						</td>
					</tr>
					<tr>
						<td>用户性别</td>
						<td>
							<input type="radio" name="sex" value="nan" checked="checked"/>男
							<input type="radio" name="sex" value="nv" />女
						</td>
					</tr>
					<tr>
						<td>技术爱好</td>
						<td>
							<input type="checkbox" name="technology" value="java" checked="checked" />JAVA
							<input type="checkbox" name="technology" value="android" />ANDROID
							<input type="checkbox" name="technology" value="HTML" />HTML
							<input type="checkbox" name="technology" value="IOS" />IOS
						</td>
					</tr>
					<tr>
						<td>所在城市</td>
						<td>
							<select name="city">
								<option value="">--选择城市--</option>
								<option value="bj">北京</option>
								<option value="sh">上海</option>
								<option value="gz">广州</option>
							</select>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="button"  value="提交" onclick="validataForm()" />
							<input type="button" value="重置" onclick="myReset()"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
	
</html>
ValidateForm(Span)

<!-- 
	事件:
	focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。
    onblur 在对象失去输入焦点时触发  
-->
<html>
	<head>
		<title>JS通过Span标签提醒</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			table{
				margin-left:50%;
				position:relative ;
				left:-300px;
			}
		</style>
		
		
		<script type="text/javascript">
			function validataForm(){
				//验证表单信息
				//return false;
				
				//验证用户名
				var username = document.getElementsByName("username")[0];
				if(username.value == ""){
					username.focus();
					//alert("用户名不能为空");
					document.getElementById("username_span").innerHTML = "用户名不能为空";
					return false;
				}
				
				//验证用户密码
				var password = document.getElementsByName("password")[0];
				if(password.value == ""){
					password.focus();
					//alert("用户密码不能为空");
					document.getElementById("password_span").innerHTML = "用户密码不能为空";
					return false;
				}
				
			}
			
			//验证用户名
			function checkUserName(node){
				if(node.value == ""){
					document.getElementById("username_span").innerHTML = "用户名不能为空";	
				} else {
					document.getElementById("username_span").innerHTML = "";	
				}
			}
			
			//验证密码
			function checkPassWord(node){
				if(node.value == ""){
					document.getElementById("password_span").innerHTML= "用户密码不能为空";
				} else {
					document.getElementById("password_span").innerHTML= "";
				}
			}
		</script>
	</head>
	<body>
		<form method="post" action="success.html" onSubmit="return validataForm()" >
			<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
				<tbody>
					<tr>
						<th colspan="2">用户注册</th>
					</tr>
					<tr>
						<td width="30%">用户名称</td>
						<td width="70%">
							<input type="text" name="username" onBlur="checkUserName(this)" />
                            <span id="username_span" ></span>
						</td>
					</tr>
					<tr>
						<td>用户密码</td>
						<td>
							<input type="password" name="password" onBlur="checkPassWord(this)" />
                            <span id="password_span" ></span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit"  value="提交" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
	
</html>
ValidateForm(SpanColor)

<html>
	<head>
		<title>JS通过SpanColor标签提醒</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			table{
				margin-left:50%;
				position:relative ;
				left:-300px;
			}
			span{
				color:red;
			}
		</style>
		
		
		<script type="text/javascript">
			function validataForm(){
				//验证表单信息
				//return false;
				
				//验证用户名
				var username = document.getElementsByName("username")[0];
				if(username.value == ""){
					username.focus();
					//alert("用户名不能为空");
					//document.getElementById("username_span").innerHTML = "用户名不能为空";
					return false;
				}
				
				//验证用户密码
				var password = document.getElementsByName("password")[0];
				if(password.value == ""){
					password.focus();
					//alert("用户密码不能为空");
					//document.getElementById("password_span").innerHTML = "用户密码不能为空";
					return false;
				}
				
			}
			
			//验证用户名
			function checkUserName(node){
				if(node.value == ""){
					document.getElementById("username_span").innerHTML = "用户名不能为空";	
				} else {
					document.getElementById("username_span").innerHTML = "";	
				}
			}
			
			//验证密码
			function checkPassWord(node){
				if(node.value == ""){
					document.getElementById("password_span").innerHTML= "用户密码不能为空";
				} else {
					document.getElementById("password_span").innerHTML= "";
				}
			}
		</script>
	</head>
	<body>
		<form method="post" action="success.html" onSubmit="return validataForm()" >
			<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
				<tbody>
					<tr>
						<th colspan="2">用户注册</th>
					</tr>
					<tr>
						<td width="30%">用户名称</td>
						<td width="70%">
							<input type="text" name="username" onBlur="checkUserName(this)" />
                            <span id="username_span" >用户名不能为空</span>
						</td>
					</tr>
					<tr>
						<td>用户密码</td>
						<td>
							<input type="password" name="password" onBlur="checkPassWord(this)" />
                            <span id="password_span" >用户密码不能为空</span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit"  value="提交" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
	
</html>
ValidateForm(SpanDisplay)

<html>
	<head>
		<title>JS通过Span标签提醒 是否显示</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			table{
				margin-left:50%;
				position:relative ;
				left:-300px;
			}
			span{
				color:red;
			}
		</style>
		
		
		<script type="text/javascript">
			function validataForm(){
				//验证表单信息
				//return false;
				
				//验证用户名
				var username = document.getElementsByName("username")[0];
				if(username.value == ""){
					username.focus();
					//alert("用户名不能为空");
					//document.getElementById("username_span").innerHTML = "用户名不能为空";
					return false;
				}
				
				//验证用户密码
				var password = document.getElementsByName("password")[0];
				if(password.value == ""){
					password.focus();
					//alert("用户密码不能为空");
					//document.getElementById("password_span").innerHTML = "用户密码不能为空";
					return false;
				}
				
			}
			
			//验证用户名
			function checkUserName(node){
				if(node.value == ""){
					//显示
					document.getElementById("username_span").style.display = "inline";//"block";
				} else {
					//隐藏
					document.getElementById("username_span").style.display = "none";	
				}
			}
			
			//验证密码
			function checkPassWord(node){
				if(node.value == ""){
					document.getElementById("password_span").style.display = "inline";//"block";
				} else {
					document.getElementById("password_span").style.display = "none";
				}
			}
		</script>
	</head>
	<body>
		<form method="post" action="success.html" onSubmit="return validataForm()" >
			<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
				<tbody>
					<tr>
						<th colspan="2">用户注册</th>
					</tr>
					<tr>
						<td width="30%">用户名称</td>
						<td width="70%">
							<input type="text" name="username" onBlur="checkUserName(this)" />
                            <span id="username_span" >用户名不能为空</span>
						</td>
					</tr>
					<tr>
						<td>用户密码</td>
						<td>
							<input type="password" name="password" onBlur="checkPassWord(this)" />
                            <span id="password_span" >用户密码不能为空</span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit"  value="提交" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
	
</html>
ValidateForm(RegExp)

<html>
	<head>
		<title>通过正则表达式验证表单信息</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			table{
				margin-left:50%;
				position:relative ;
				left:-300px;
			}
			span{
				color:red;
			}
		</style>
		
		
		<script type="text/javascript">
			function validataForm(){
				//验证表单信息
				//return false;
				
				//验证用户名
				var username = document.getElementsByName("username")[0];
				if(username.value == ""){
					username.focus();
					//alert("用户名不能为空");
					//document.getElementById("username_span").innerHTML = "用户名不能为空";
					return false;
				}
				
				//验证用户密码
				var password = document.getElementsByName("password")[0];
				if(password.value == ""){
					password.focus();
					//alert("用户密码不能为空");
					//document.getElementById("password_span").innerHTML = "用户密码不能为空";
					return false;
				}
				
			}
			
			//验证用户名
			function checkUserName(node){
			
				/*	语法1
					用户名必须为4位字母
				*/
				//定义规则
				var reg = /^[a-z]{4}$/i;
				//找到需要验证的数据
				var value = node.value;
				//验证
				var arr = value.match( reg );
			
				if(arr == null){
					//显现
					document.getElementById("username_span").style.display = "inline";
				} else {
					//隐藏
					document.getElementById("username_span").style.display = "none";
				}

			}
			
			//验证密码
			function checkPassWord(node){
				//定义规则
				//var reg = /^\w{6,12}$/;
				//re = new RegExp("规则",["标识"]) 
				var reg = new RegExp("^\\w{6,12}$");
				
				
				
				//找到需要验证的数据
				var value = node.value;
				
				//验证
				var flag = reg.test( value );
				
				if(flag){
					//隐藏
					document.getElementById("password_span").style.display = "none";
				} else {
					//显示
					document.getElementById("password_span").style.display = "inline";
				}
				
			}
		</script>
	</head>
	
	<!-- 
	正则表表达式
		语法 1
		re = /规则/[标识]
		语法 2
		re = new RegExp("规则",["标识"]) 

		标识:
		g (全文查找出现的所有 pattern) 
		i (忽略大小写) 
		m (多行查找) 
		
		验证方法:
			match 方法
				使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。
				如果 match 方法没有找到匹配,返回 null
				stringObj.match(rgExp) 
		
			exec 方法
				用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。
				如果 exec 方法没有找到匹配,则它返回 null
				rgExp.exec(str)
			test 方法
				返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式。
				rgexp.test(str) 
	-->
	
	
	<body>
		<form method="post" action="success.html" onSubmit="return validataForm()" >
			<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
				<tbody>
					<tr>
						<th colspan="2">用户注册</th>
					</tr>
					<tr>
						<td width="30%">用户名称</td>
						<td width="70%">
							<input type="text" name="username" onBlur="checkUserName(this)" />
                            <span id="username_span" >用户名必须为4位字母</span>
						</td>
					</tr>
					<tr>
						<td>用户密码</td>
						<td>
							<input type="password" name="password" onBlur="checkPassWord(this)" />
                            <span id="password_span" >用户密码长度6-12位之间</span>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="submit"  value="提交" />
							<input type="reset" value="重置" />
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</body>
	
</html>

下面是一些网页中常用的重要正则表达式,不懂的同胞们可以参考参考。

正则表达式:regular expression
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。
 
方法 :
compile方法 
编译一个正则表达式对象 
exec方法 
运行正则表达式匹配 
test方法 
测试正则达式匹配 
toSource方法 
返回一个对象的文字描述指定的对象;你可以使用这个值来建立一个新的对象。
toString方法 
返回一个字符串描述指定的对象。
valueOf方法 
返回指定对角的原始值。


正则表达式中的特殊字符:
字符  含意  
\  做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。 
-或- 
对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。 
^  匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"  
$  匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"  
*  匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa  
+  匹配前面元字符1次或多次,/ba+/将匹配ba,baa,baaa  
?  匹配前面元字符0次或1次,/ba?/将匹配b,ba  
(x)  匹配x保存x在名为$1...$9的变量中  
x|y  匹配x或y  
{n}  精确匹配n次  
{n,}  匹配n次以上  
{n,m}  匹配n-m次  
[xyz]  字符集(character set),匹配这个集合中的任一一个字符(或元字符)  
[^xyz]  不匹配这个集合中的任何一个字符  
[\b]  匹配一个退格符  
\b  匹配一个单词的边界  
\B  匹配一个单词的非边界  
\cX  这儿,X是一个控制符,/\cM/匹配Ctrl-M  
\d  匹配一个数字字符,/\d/ = /[0-9]/  
\D  匹配一个非数字字符,/\D/ = /[^0-9]/  
\n  匹配一个换行符  
\r  匹配一个回车符  
\s  匹配一个空白字符,包括\n,\r,\f,\t,\v等  
\S  匹配一个非空白字符,等于/[^\n\f\r\t\v]/  
\t  匹配一个制表符  
\v  匹配一个重直制表符  
\w  匹配一个可以组成单词的字符(alphanumeric,这是我的意译,含数字),包括下划线,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9]  
\W  匹配一个不可以组成单词的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。 
 
创建一个ExgExp对象的两种方式:
1:构造函数 RegExp();
var pattern = new RegExp("s$"); 
2:正则表达式直接量  被定义为包含在一对斜杠(/)之间的字符  隐式构造
var pattern = /s$/; 


举例:
/**
函数名称:isMobile
函数功能:判断输入字符串是不是符合规范的手机号码(包括159 不包括小灵通)
判断规范:以13|159开头
输入参数:需要测试的字符串
返回参数:是手机号码:true 
		   不是手机号码:false
*/
function isMobile(s)
{
    var patrn=/^13[0-9]{9,9}$|159[0-9]{8,8}$/;
    if (!patrn.exec(s))
    {
       return false;
    }
    return true;
}

E-mail地址验证: 
function test_email(strEmail) { 
var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; 
if(myReg.test(strEmail)) return true; 
return false; 
} 

常见匹配的正则表达式
/***********************************************************
//验证模板的正则表达式定义
var telPatten=/(\d{3}-|\d{4}-)?(\d{8}|\d{7})/; //国内电话
var mobilePatten=/^(130|131|132|133|134|135|136|137|138|139|159)\d{8}$/; //国内手机号码
var qqPatten=/^[1-9]*[1-9][0-9]*$/; //腾讯QQ
var emailPatten=/^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; //email地址
var datePatten=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/;  //日期YYYY-MM-DD
var datetimePatten=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2})$/;  //日期时间型YYYY-MM-DD HH:MI
var timePatten=/^(\d{1,2}):(\d{1,2})$/;   //时间型HH:MI
var chinesePatten=/[\u4e00-\u9fa5]/;   //匹配中文串
var dbcharPatten=/[^\x00-\xff]/;       //匹配双字节串
var blanklinePatten=/\n\s*\r/;         //匹配空白项
//var htmlPatten=/<(\S*?)[^>]*>.*?</\1>|<.*? />/; //匹配HTML标记
var twoblankPatten=/^\s*|\s*$/; //匹配首尾空白字符
//var urlPatten=/[a-zA-z]+://[^\s]*/;//匹配网址URL
var postPatten=/[1-9]\d{5}(?!\d)/;//匹配中国邮政编码
var idcardPatten=/\d{15}|\d{18}/;//匹配身份证
var ipPatten=/\d+\.\d+\.\d+\.\d+/;//匹配ip地址:
var numstrPatten=/^[0-9]+$/;        //全部是数字的字符串
var string1Patten=/^[A-Za-z]+$/;  //由26个英文字母组成的字符串
var string2Patten=/^[A-Z]+$/;     //由26个英文字母的大写组成的字符串
var string3Patten=/^[a-z]+$/;     //由26个英文字母的小写组成的字符串
var string4Patten=/^[A-Za-z0-9]+$/; //由数字和26个英文字母组成的字符串 
var string5Patten=/^[A-Za-z0-9_]+$/;//由数字、26个英文字母或者下划线组成的字符串
var string6Patten=/^\w+$/;        //匹配由数字、26个英文字母或者下划线组成的字符串
var int1Patten=/^[1-9]\d*|0$/;  //非负整数
var int2Patten=/^[1-9]\d*$/;  //正整数
var int3Patten=/^-[1-9]\d*|0$/;  //非正整数
var int4Patten=/^-[1-9]\d*$/;  //负整数
var intPatten=/^-?[1-9]\d*$/;  //整数
var float1Patten=/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/;  //非负浮点数
var float2Patten=/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/;  //正浮点数
var float3Patten=/^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/;  //非正浮点数
var float4Patten=/^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/;  //负浮点数
var floatPatten=/^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/;  //浮点数
var float5Patten=/^\d+(\.\d+)?$/; //浮点数或者整数
var float6Patten=/^-?\d+(\.\d+)?$/; //浮点数或者整数负数
*********************************************************************************/


分享到:
评论

相关推荐

    网页制作手册大全 HTML Dhtml CSS DIV JavaScript

    包含网页制作完全手册、CSS2.0操作手册 ,javaSprint参考手册 chm文件

    网站前台参考手册,div、css、js、dhtml等

    css_2.0_中文手册(共有三本) DHTML手册 prototype手册和文件 div+css布局大全.pdf Dom Scripting.pdf mootools_doc_cn_1.chm ppk on javascript.chm 等

    精通JavaScript+jQuery Part1

    第3部分 CSS混合应用技术篇  第13章 CSS与JavaScript的综合应用   13.1 JavaScript概述  13.2 JavaScript语法基础  13.3 实例一:输入时高亮显示的Excel表格   13.4 实例二:由远到近的文字   13.5 ...

    《精通Javascript+jQuery》光盘源码

    第1部分 JavaScript.cCSS与DOM基础篇   第1章 ccJavaScript概述  1.1 JavaScript的起源  1.2 浏览器之争  1.2.1 DHTML  1.2.2 浏览器之间的冲突  1.2.3 标准的制定  1.3 JavaScript的实现  1.3.1...

    Javascript 教程

    本资源包含了网站设计中的基本参考教程,包括HTML、DHTML、CSS、DOM、DIV、JAVASCRIPT等内容

    JavaScript详解(第2版)

    第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 ...

    强悍的Web资料集合

    XMLDOM DOM DHTML HTML XML 正则表达式 XSL XmlHttp WEB开发人员参考大全 AJAX CSS DIV+CSS CSS JAVAScript 基本上罗列Web开发的很多资,里面的XmlDOM、DOM、DHTML、CSS、XmlHttp、AJXA、以及XSL和Xpath重要资料……

    网站网页CHM教程大全(15本)

    以前从网上搜集的,陆陆续续找了这么几个觉得还不错的。 内容包括HTML(DIV+CSS,DHTML),CSS样式表,javascript,网站优化,网站推广,windows脚本技术,网页配色、SQL、WEB标准等 打包下载了。

    IE6升级到IE9兼容性问题和操作手册

    1. 不再支持 CSS 表达式,改为支持增强的 CSS 或 DHTML 逻辑。 14 2. currentStyle 对象的Unset属性现在返回其初始值。 15 3. style 对象的 Unset 属性值现在返回空字符串。 16 第三节:IE8-IE9更新 17 1. 泰语和...

    精通JavaScript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章(\第14章) • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 • 14.3....

    精通javascript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章(\第14章) • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert&#40;&#41;方法与confirm()方法的使用 ...

    全套web开发帮助文档

    HTML手册.CHM、DHTML手册.CHM、html语法教程.chm、 CSS2.0.CHM、 《JavaScript 语言参考》中文版.chm、1500个JavaScript特效.chm、htmldom.chm、DOM手册.CHM、十天学会DIV+CSS(WEB标准).chm、w3schoolWeb全套教程....

    XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解

    (XML取消了所有标识,包括font,color,p等风格样式定义标识,因此XML全部是采用类似DHTML中CSS的方法来定义文档风格样式。),XML中用来设定显示风格样式的文件类型有: 1.XSL XSL全称是Extensible Stylesheet ...

    网站前台常用参考手册

    CSS_2.0_中文手册、DHTML 手册、prototype、Div+CSS 布局大全.pdf、Dom Scripting.pdf、Mastering Regular Expressions, 3rd Edition、mootools_doc_cn_1.chm、ppk on javascript.chm、script56-old-cn.chm

    dreamweaver的各种组件

    它能够保留每次设定的表格尺寸和单元格数 量,还能够让您设定使用“div”标签或“center”标签使表格置中。 Replacement Image Object 和先前那个object一样这个插件完全可以取代Dreamweaver原配的Inset Image ...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    cuteEditor6.0

    &lt;br/&gt; 没有打开较慢的Java或ActiveX组件 &lt;br/&gt;100% DHTML, JavaScript ASP.Net code. There are no slow Java or ActiveX components to worry about and everything is handled in the browser! ...

Global site tag (gtag.js) - Google Analytics