本文通过实例展示了HTML表单的基本验证方法及如何使用JavaScript实现表单元素的交互效果，包括用户注册信息验证、复选框的全选与反选功能以及下拉菜单的动态加载。
6．表单验证
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户注册信息</title>
<style type="text/css">
<!--
.bg{
width:100px;
height:33px;
border:0;
background-image:url(注册.gif);
background-color:#FFFFFF;
cursor:hand;
color:#006600;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<!--弹出成功页面,显示注册信息-->
<script language="javascript">
<!--
function reg()
{
//todo:验证
var username=document.regFrm.username.value;
var age=document.regFrm.age.value;
var sexGroup=document.regFrm.sex;
var sex;
//关于性别
for(var i=0;i<sexGroup.length;i++)
{
if(sexGroup[i].checked)
{
sex=sexGroup[i].value;
break;
}
}
//关于爱好
var fg=document.regFrm.fav;
var aihao="";
for(var i=0;i<fg.length;i++)
{
if(fg[i].checked)
{
aihao=aihao+" "+fg[i].value+" ";
}
}
//民族
var mz=document.regFrm.mz.value;
var sw=window.open("success.htm","成功","width=500,height=600");
sw.document.write(" <div style='background-color:#006666'>");
sw.document.write("<center>恭喜你,注册成功</center>");
sw.document.write("<br>您的姓名:"+username);
sw.document.write("<br>您的年龄:"+age);
sw.document.write("<br>您的性别:"+sex);
sw.document.write("<br>您的爱好:"+aihao);
sw.document.write("<br>您的民族:"+mz+"</div>");
}
-->
</script>
</head>
<body>
<form name="regFrm" method="post" action="">
<table width="403" height="261" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000CC">
<tr>
<td align="left" valign="middle">用户名:
<input name="username" type="text" id="username"></td>
</tr>
<tr>
<td> 年龄:
<input name="age" type="text" id="age"></td>
</tr>
<tr>
<td>性别:
<input name="sex" type="radio" value="1" checked>
男
<input type="radio" name="sex" value="0">
女</td>
</tr>
<tr>
<td>爱好:
<input name="fav" type="checkbox" id="fav" value="eat">
吃饭
<input name="fav" type="checkbox" id="fav" value="sleep">
睡觉
<input name="fav" type="checkbox" id="fav" value="beat">
打豆豆</td>
</tr>
<tr>
<td>民族:
<select name="mz" size="1" id="mz">
<option value="hanzu">汉族</option>
<option value="zangzu">藏族</option>
<option value="shirenzu">食人族</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="注册" class="bg" onClick="javaScript:reg();"></button>
</tr>
</table>
</form>
</body>
</html>
7．复选框（全选和反选）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选例子</title>
<script language="javascript">
<!--
//全选的方法,注意让那些全选的复选框的name同名
function sa()
{
var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框
//首先我们应该判断全选那个复选框是否被选中
if(document.getElementById("cbxall").checked)//选中的时候,单击的话,应该让所有的iwant复选框选中
{
for(var i=0;i<cg.length;i++)
{
cg[i].checked=true;
}
}
else//不选中
{
for(var i=0;i<cg.length;i++)
{
cg[i].checked=false;
}
}
}
//反选的
function rs()
{
var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框
for(var i=0;i<cg.length;i++)
{
cg[i].checked=!cg[i].checked;//注意这句话,让所有选中的成为非选中的
}
}
-->
</script>
</head>
<body>
<h3 align="center">复选框的一些操作</h3>
<form action="" method="post" name="sf" id="sf">
<p>
<input type="checkbox" value="house" name="iwant">
房子 </p>
<p> <input type="checkbox" name="iwant" value="car">
车子 </p>
<p>
<input type="checkbox" name="iwant" value="money">
票子 </p>
<p> <input type="checkbox" name="iwant" value="gold">
金子 </p>
<p> <input name="iwant" type="checkbox" id="iwant" value="girl">
女人 </p>
<hr>
<p> <input name="cbxall" type="checkbox" id="cbxall" value="checkbox" onClick="javaScript:sa();">
全选
<input type="checkbox" name="cbxReverse" value="checkbox" onClick="javaScript:rs()">
反选
</p>
</form>
</body>
</html>
8．菜单互动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>级联菜单例子</title>
<script language="javascript">
<!--
function hd()
{
//比如我们有3个帅哥(刘德华,李连杰,bobo组合),五个美女(石榴,秋香,芙蓉,天仙妹妹,杨二)
var p=new Array();//定义一个数组
//8行3列的数组
p[0]=new Array("刘德华","ldh","boy");
p[1]=new Array("李连杰","llj","boy");
p[2]=new Array("bobo组合","bb","boy");
p[3]=new Array("石榴","sl","girl");
p[4]=new Array("秋香","qx","girl");
p[5]=new Array("芙蓉","fr","girl");
p[6]=new Array("天仙妹妹","txmm","girl");
p[7]=new Array("杨二","yr","girl");
var first=document.sf.personType;
var second=document.sf.person;
second.length=0;
for(var i=0;i<p.length;i++)
{
if(p[i][2]==(first.options[first.selectedIndex].value))
{
second.add(new Option(p[i][0],p[i][1]));//其中的new Option(参数1,参数2),参数1代表的是显示值,参数2代表的传递值
}
}
}
-->
</script>
</head>
<body>
<form name="sf">
<select name="personType" onChange="hd();">
<option value="boy">帅哥</option>
<option value="girl">美女</option>
</select>
<select name="person">
</select>
</form>
<script language="javascript">
hd();//页面加载完成后调用的函数
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户注册信息</title>
<style type="text/css">
<!--
.bg{
width:100px;
height:33px;
border:0;
background-image:url(注册.gif);
background-color:#FFFFFF;
cursor:hand;
color:#006600;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<!--弹出成功页面,显示注册信息-->
<script language="javascript">
<!--
function reg()
{
//todo:验证
var username=document.regFrm.username.value;
var age=document.regFrm.age.value;
var sexGroup=document.regFrm.sex;
var sex;
//关于性别
for(var i=0;i<sexGroup.length;i++)
{
if(sexGroup[i].checked)
{
sex=sexGroup[i].value;
break;
}
}
//关于爱好
var fg=document.regFrm.fav;
var aihao="";
for(var i=0;i<fg.length;i++)
{
if(fg[i].checked)
{
aihao=aihao+" "+fg[i].value+" ";
}
}
//民族
var mz=document.regFrm.mz.value;
var sw=window.open("success.htm","成功","width=500,height=600");
sw.document.write(" <div style='background-color:#006666'>");
sw.document.write("<center>恭喜你,注册成功</center>");
sw.document.write("<br>您的姓名:"+username);
sw.document.write("<br>您的年龄:"+age);
sw.document.write("<br>您的性别:"+sex);
sw.document.write("<br>您的爱好:"+aihao);
sw.document.write("<br>您的民族:"+mz+"</div>");
}
-->
</script>
</head>
<body>
<form name="regFrm" method="post" action="">
<table width="403" height="261" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#0000CC">
<tr>
<td align="left" valign="middle">用户名:
<input name="username" type="text" id="username"></td>
</tr>
<tr>
<td> 年龄:
<input name="age" type="text" id="age"></td>
</tr>
<tr>
<td>性别:
<input name="sex" type="radio" value="1" checked>
男
<input type="radio" name="sex" value="0">
女</td>
</tr>
<tr>
<td>爱好:
<input name="fav" type="checkbox" id="fav" value="eat">
吃饭
<input name="fav" type="checkbox" id="fav" value="sleep">
睡觉
<input name="fav" type="checkbox" id="fav" value="beat">
打豆豆</td>
</tr>
<tr>
<td>民族:
<select name="mz" size="1" id="mz">
<option value="hanzu">汉族</option>
<option value="zangzu">藏族</option>
<option value="shirenzu">食人族</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="注册" class="bg" onClick="javaScript:reg();"></button>
</tr>
</table>
</form>
</body>
</html>
7．复选框（全选和反选）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>全选例子</title>
<script language="javascript">
<!--
//全选的方法,注意让那些全选的复选框的name同名
function sa()
{
var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框
//首先我们应该判断全选那个复选框是否被选中
if(document.getElementById("cbxall").checked)//选中的时候,单击的话,应该让所有的iwant复选框选中
{
for(var i=0;i<cg.length;i++)
{
cg[i].checked=true;
}
}
else//不选中
{
for(var i=0;i<cg.length;i++)
{
cg[i].checked=false;
}
}
}
//反选的
function rs()
{
var cg=document.getElementsByName("iwant");//得到所有的名字是iwant的复选框
for(var i=0;i<cg.length;i++)
{
cg[i].checked=!cg[i].checked;//注意这句话,让所有选中的成为非选中的
}
}
-->
</script>
</head>
<body>
<h3 align="center">复选框的一些操作</h3>
<form action="" method="post" name="sf" id="sf">
<p>
<input type="checkbox" value="house" name="iwant">
房子 </p>
<p> <input type="checkbox" name="iwant" value="car">
车子 </p>
<p>
<input type="checkbox" name="iwant" value="money">
票子 </p>
<p> <input type="checkbox" name="iwant" value="gold">
金子 </p>
<p> <input name="iwant" type="checkbox" id="iwant" value="girl">
女人 </p>
<hr>
<p> <input name="cbxall" type="checkbox" id="cbxall" value="checkbox" onClick="javaScript:sa();">
全选
<input type="checkbox" name="cbxReverse" value="checkbox" onClick="javaScript:rs()">
反选
</p>
</form>
</body>
</html>
8．菜单互动
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>级联菜单例子</title>
<script language="javascript">
<!--
function hd()
{
//比如我们有3个帅哥(刘德华,李连杰,bobo组合),五个美女(石榴,秋香,芙蓉,天仙妹妹,杨二)
var p=new Array();//定义一个数组
//8行3列的数组
p[0]=new Array("刘德华","ldh","boy");
p[1]=new Array("李连杰","llj","boy");
p[2]=new Array("bobo组合","bb","boy");
p[3]=new Array("石榴","sl","girl");
p[4]=new Array("秋香","qx","girl");
p[5]=new Array("芙蓉","fr","girl");
p[6]=new Array("天仙妹妹","txmm","girl");
p[7]=new Array("杨二","yr","girl");
var first=document.sf.personType;
var second=document.sf.person;
second.length=0;
for(var i=0;i<p.length;i++)
{
if(p[i][2]==(first.options[first.selectedIndex].value))
{
second.add(new Option(p[i][0],p[i][1]));//其中的new Option(参数1,参数2),参数1代表的是显示值,参数2代表的传递值
}
}
}
-->
</script>
</head>
<body>
<form name="sf">
<select name="personType" onChange="hd();">
<option value="boy">帅哥</option>
<option value="girl">美女</option>
</select>
<select name="person">
</select>
</form>
<script language="javascript">
hd();//页面加载完成后调用的函数
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
