JavaScript入门之二：Js基本事件，表单控制_基本事件发生表-优快云博客

本文介绍了一个包含多种JavaScript事件处理示例的网页，包括页面加载、单击事件、文本框内容显示、电子邮件验证、单选及复选框内容读取、下拉菜单选择等常见表单操作案例。
<html>
	<head>
		<title>标题-eventDemo</title>
	</head>
	
	<script language="Javascript">
		/* 页面加载和卸载，对应的body： <body onLoad="welcome()" onUnload="byebye()">
		function welcome()
		{
			alert("加载页面");	
		} 
		function byebye()
		{
			alert("退出页面");	
		}*/
		
		/***************************************
		* script函数全都写在这就行
		* 下边body中分开些，是为了看着清楚一点
		****************************************/
		
	</script>
	
	
	<body>
		
		
		<!-- 1.单击事件 -->	
		<script language="Javascript">
			function clickFun() //单击事件函数
			{
				alert("Click ed");
			}
		</script>
		<a href="#" onClick="clickFun()">单击事件</a> <!-- 被单击超链接 -->
		<br>
		
		
		<!-- 2.显示文本框内，已输入的内容 -->
		<script language="Javascript">
			function showText() 
			{
				var textValue = document.fromDemo01.text01.value;
				alert("text中的文本："+textValue);
			}
		</script>
		<form action="" method="post" name="fromDemo01">
			文本框内输出内容:<input type="text" name="text01">
			<!-- 显示按钮 -->
			<input type="button" value="显示按钮" onClick="showText()">
		</form>
		
		
		<!-- 3.验证email -->
		<script language="Javascript">
			function checkEmail(o) 
			{
				var emailValue = o.email01.value;
				if(!(/^\w+@\w+.\w+$/.test(emailValue)))// 正则表达式（不要多余的空格）： /^内容$/.test(传值)
				{
					alert("email格式不正确："+emailValue);
					o.email01.focus();// 如果格式不对，则选中错误文字
					o.email01.select();
					return false;
				}
				return ture;
			}
		</script>
		<form action="imp.js" method="post" name="fromDemo02" onSubmit="return checkEmail(this)"><!-- onSubmit事件专门用于提交表单 -->
			验证Email地址:<input type="text" name="email01">
			<!-- 提交按钮 -->
			<input type="submit" value="提交按钮"><!-- "submit"里用onClick="fun()"不好-->
		</form>
		
		
		<!-- 4.提取单选按钮(radio)内容 -->
		<script language="Javascript">
			function showRadio() 
			{
				var textValue = document.fromDemo04.text04.value;
				alert(" 姓名："+textValue);
				var sex ;  
				// ！！！ js里由多个选项复用的对象，必须用数组表示
				if(true == document.fromDemo04.sex[0].checked)
				{
					sex = document.fromDemo04.sex[0].value;
				}
				else
				{
					sex = document.fromDemo04.sex[1].value;
				}
				alert(" 性别: "+sex);
			}
		</script>
		<form action="" method="post" name="fromDemo04">
			姓名:<input type="text" name="text04">
			性别:<input type="radio" name="sex" value="男" checked>男
					 <input type="radio" name="sex" value="女">女	
					 <br>		
			<!-- 显示按钮 -->
			<input type="button" value="显示按钮" onClick="showRadio()">
		</form>
		
		
		<!-- 5.提取复选框(checkbox)内容 -->
		<script language="Javascript">
			function showCheckBox() 
			{
				var intst = "";
				for(i=0;i<document.fromDemo05.interest.length;i++)
				{
					if(true == document.fromDemo05.interest[i].checked)
					{
						intst += document.fromDemo05.interest[i].value;
						intst += " ";
					}
				}
				alert(" 兴趣: "+intst);
			}
		</script>
		<form action="" method="post" name="fromDemo05">
			兴趣:<input type="checkbox" name="interest" value="唱歌">唱歌
					<input type="checkbox" name="interest" value="跳舞">跳舞
					<input type="checkbox" name="interest" value="XX" checked>XX
					<input type="checkbox" name="interest" value="OO">OO
					<br>		
			<!-- 显示按钮 -->
			<input type="button" value="显示按钮" onClick="showCheckBox()">
		</form>
		
		
		<!-- 6.提取下拉菜单(select)内容 -->
		<script language="Javascript">
			/* 不带参的笨办法
			function showSelect() 
			{
				var dept = "";
				for(i=0;i<document.fromDemo06.dept06.length;i++)
				{
					if(true == document.fromDemo06.dept06[i].selected)
					{
						dept += document.fromDemo06.dept06[i].value;
						dept += " ";
					}
				}
				alert(" 部门: "+dept);
			}
			*/
			function showSelectP(val) //带参的方法
			{
				alert(val);	
				document.fromDemo06.resText06.value = val;
			}
		</script>
		<form action="" method="post" name="fromDemo06">
			部门:<select name="dept06" onChange="showSelectP(this.value)"> <!--下拉菜单变化则触发onChange事件 -->
					<option value="技术部">技术部 </option>
					<option value="A部">A部 </option>
					<option value="B部">B部 </option>
					<option value="C部" selected>C部 </option>
					</select>
					<br>	
			<!-- 不用显示按钮，改用onChange事件 -->
			<!-- <input type="button" value="显示按钮" onClick="showSelect()"> -->		
					
			<!-- 修改结果文本 -->
			选择结果:<input type="text" name="resText06" value="尚未选择">	
			
		</form>
		
		
		
	</body>	
	
	
	
	
</html>