表单验证的高级特效"/>
表单验证的高级特效
一、数组概述
常用属性
length
value
options
selectedIndex 读取或设置被选项的索引号，第一个为0，其他类推常用事件
onChange 选项改变事件
onBlur
onFocus选项数组
1、每个选项Option可以动态创建
new Option(”显示内容”，“值”)
2、动态添加选项
selCity.options.add(newOption1）
3、清除选项
selCity.options.length=01.1、JavaScript中的数组用法
<SCRIPT LANGUAGE = "JavaScript">
var emp = new Array(3); //创建数组对象
new Array(大小)emp[0] = "Ryan Dias"; //为数组赋值。数组中可存放任意数据
emp[1] = "Graham Browne";
emp[2] = "David Greene";emp.sort( ); // 调用数组的方法sort( )进行排序 document.write("排序结果是：<HR>");
for (var i in emp)
{
document.write(emp[i]+"<BR>"); //循环输出，等同：for(var i=0;i<emp.length;i++)}
</SCRIPT>
//排序结果：David Greene Graham Browne Ryan Dias1.2、JavaScript中的数组用法
<SCRIPT LANGUAGE = "JavaScript">
var cityList = new Array( ); //创建数组，可以不指定大小
// 为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组
cityList[0]=['成都', '绵阳', '德阳', '自贡', …, '泸州'];
cityList[1]=['济南', '青岛', … '威海', '日照'];
cityList[2] = ['武汉', '宜昌', … '恩施', '潜江'];document.write("<BR>四川省包括的城市是：<HR>");
//环输出.0-表示四川省的索引号，同理可以换为山东省－索引号1for (var j in cityList[0]) {document.write(cityList[0][j] +"<BR>");
}
</SCRIPT>1.3、用数组优化解决省市级联问题
function changeCity( ) {
//创建数组，存放各省份对应城市 var cityList = new Array( );cityList[0]=['成都', '绵阳', '德阳', '自贡', … '泸州'];cityList[1]=['济南', '青岛', ‘… '日照'];cityList[2] = ['武汉', '宜昌', … '潜江'];
// 根据用户选择的省份索引号，获取对应数组索引号 var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1;document.myform.selCity.options.length=0;
//清空原下拉框内容 for (var j in cityList[pIndex]) {//根据数组内容创建选项，并添加到城市下拉框newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); document.myform.selCity.options.add(newOption1); }
1.4、使用文字下标的数组再次优化
1.使用索引号必须要求省份的排列顺序和数组编号相同。2.JavaScript中的数组下标可以采用标识符代替。
例如： cityList['山东省'] =['济南', '青岛', '淄博', '枣庄', '东营','烟台', '潍坊', '济宁', '泰安', '威海', '日照'];3.可以根据用户选择的value值，与数组下标标识进行比较，从而找出该省包括的城市。function changeCity( ) {var cityList = new Array( );
//数组下标采用文字标识符代替cityList[‘四川省’]=['成都', '绵阳', , … '泸州'];cityList[‘山东省’]=['济南', '青岛', ‘… '日照'];cityList[‘湖北省’] = ['武汉', '宜昌', … '潜江'];
//根据省份下拉框的值，获取对应数组的索引标识var pIndex=document.myform.selProvince.value; var newOption1;document.myform.selCity.options.length=0;for (var j in cityList[pIndex]) {newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]);
//数组的读取和数字索引方式相同document.myform.selCity.options.add(newOption1);}
二、数组练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >function changeCourse( ){var term=document.myform.selTerm.value; var newOption1,newOption2;switch(term){case "第一学期" :var newOption1= new Option("HTML课程","HTML");var newOption2= new Option("Java课程","Java");break;case "第二学期" : var newOption1= new Option("SQLserver高级课程","Sqlserver");var newOption2= new Option(".Net课程",".Net");break;case "第二学年" : var newOption1= new Option("Struts课程","Struts");var newOption2= new Option("Ajax课程","Ajax");break; }document.myform.selCourse.options.length=0;document.myform.selCourse.options.add(newOption1);document.myform.selCourse.options.add(newOption2);}</SCRIPT></HEAD><BODY><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )" ><TABLE border="0" align="center" ><TR><TD colspan="2" align="center">考 试 申 请</TD></TR><TR><TD>学期</TD><TD><SELECT name="selTerm" onChange="changeCourse( )"><OPTION>--请选择学期--</OPTION><OPTION value="第一学期">第一学期</OPTION><OPTION value="第二学期">第二学期</OPTION><OPTION value="第二学年">第二学年</OPTION></SELECT></TD></TR><TR><TD>课程</TD><TD><SELECT name="selCourse" ><OPTION>--请选择对应学期的课程--</OPTION></SELECT></TD></TR></TABLE>
</FORM></BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >function changeTerm( ){var courseList = new Array( );courseList[0] = ['Java', 'SqlServer基础', 'C#', 'HTML'];courseList[1] =['JavaScript', 'SqlServer高级', '.NET', 'JSP'];courseList[2] = ['Struts', 'ASP.NET', 'Ajax','Spring','Hibernate'];//获得学期选项的索引号，如第一学期为1，比对应数组索引号多1var pIndex=document.myform.selTerm.selectedIndex-1; var newOption1;document.myform.selCourse.options.length=0;for (var j in courseList[pIndex]) {newOption1=new Option(courseList[pIndex][j], courseList[pIndex][j]); document.myform.selCourse.options.add(newOption1);}}</SCRIPT></HEAD><BODY><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )" ><TABLE border="0" align="center" ><TR><TD colspan="2" align="center">考 试 申 请</TD></TR><TR><TD>学期</TD><TD><SELECT name="selTerm" onChange="changeTerm( )"><OPTION>--请选择学期--</OPTION><OPTION value="第一学期">第一学期</OPTION><OPTION value="第二学期">第二学期</OPTION><OPTION value="第二学年">第二学年</OPTION></SELECT></TD></TR><TR><TD>课程</TD><TD><SELECT name="selCourse" ><OPTION>--请选择对应学期的课程--</OPTION></SELECT></TD></TR></TABLE>
</FORM></BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >function changeTerm( ){var courseList = new Array( );courseList['第一学期'] = ['Java', 'SqlServer基础', 'C#', 'HTML'];courseList['第二学期'] =['JavaScript', 'SqlServer高级', '.NET', 'JSP'];courseList['第二学年'] = ['Struts', 'ASP.NET', 'Ajax','Spring','Hibernate'];//获得学期选项的索引号，如第一学期为1，比对应数组索引号多1var pIndex=document.myform.selTerm.value; var newOption1;document.myform.selCourse.options.length=0;for (var j in courseList[pIndex]) {newOption1=new Option(courseList[pIndex][j], courseList[pIndex][j]); document.myform.selCourse.options.add(newOption1);}}</SCRIPT></HEAD><BODY><FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )" ><TABLE border="0" align="center" ><TR><TD colspan="2" align="center">考 试 申 请</TD></TR><TR><TD>学期</TD><TD><SELECT name="selTerm" onChange="changeTerm( )"><OPTION>--请选择学期--</OPTION><OPTION value="第一学期">第一学期</OPTION><OPTION value="第二学期">第二学期</OPTION><OPTION value="第二学年">第二学年</OPTION></SELECT></TD></TR><TR><TD>课程</TD><TD><SELECT name="selCourse" ><OPTION>--请选择对应学期的课程--</OPTION></SELECT></TD></TR></TABLE>
</FORM></BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>对数组进行排序</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var emp = new Array(3);
emp[0] = "Ryan Dias";
emp[1] = "Graham Browne";
emp[2] = "David Greene";emp.sort( );document.write("排序结果是：<HR>");
for (var i in emp) //for(var i=0;i<emp.length;i++)
{
document.write(emp[i]+"<BR>");
}var cityList = new Array( );
cityList[0]=['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];
cityList[1]=['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];
cityList[2] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];document.write("<BR>四川省包括的城市是：<HR>");
for (var j in cityList[0]) //0-表示四川省的索引号，同理可以换为山东省－索引号1
{document.write(cityList[0][j] +"<BR>");
}</SCRIPT>
</HEAD>
</HTML><HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >function changeCity( ){var province=document.myform.selProvince.value; var newOption1,newOption2;switch(province){case "四川省" :newOption1= new Option("成都市","chengdu");newOption2= new Option("泸州市","luzhou");break;case "湖北省" : newOption1= new Option("武汉市","wuhan");newOption2= new Option("襄樊市","xiangfan");break;case "山东省" : newOption1= new Option("青岛市","qingdao");newOption2= new Option("烟台市","yantai");break; }document.myform.selCity.options.length=0;document.myform.selCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);}
</SCRIPT></HEAD><BODY>
<FORM name="myform" action="register_success.htm" >
<TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD colspan="2"><IMG src="images/1.gif" width="273" height="59"><IMG src="images/2.gif" width="393" height="59"></TD></TR><TR><TD width="185" align="center"> 姓名 </TD><TD width="287"><INPUT name="txtUserName" type="text" size="25"></TD></TR><TR><TD align="center">省份 </TD><TD><SELECT name="selProvince" onChange="changeCity( )"><OPTION>--请选择开户帐号的省份--</OPTION><OPTION value="四川省">四川省</OPTION><OPTION value="山东省">山东省</OPTION><OPTION value="湖北省">湖北省</OPTION></SELECT></TD></TR><TR><TD align="center" valign="bottom"> 城市 </TD><TD><P><SELECT name="selCity"><OPTION>--请选择开户帐号的城市--</OPTION></SELECT></P></TD></TR><TR><TD> </TD><TD> </TD></TR><TR><TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD></TR><TR><TD> </TD><TD> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >function changeCity( ){var cityList = new Array( );cityList[0]=['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];cityList[1]=['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];cityList[2] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];//获得省份选项的索引号，如四川省为1，比对应数组索引号多1var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1;document.myform.selCity.options.length=0;for (var j in cityList[pIndex]) {newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); document.myform.selCity.options.add(newOption1);}}</SCRIPT></HEAD><BODY>
<FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">
<TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD colspan="2"><IMG src="images/1.gif" width="273" height="59"><IMG src="../example6/2.gif" width="1" height="75"><IMG src="images/2.gif" width="393" height="59"></TD></TR><TR><TD width="185" align="center"> 姓名 </TD><TD width="287"><INPUT name="txtUserName" type="text" id="txtUserName" size="25"></TD></TR><TR><TD align="center">省份 </TD><TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )"><OPTION>--请选择开户帐号的省份--</OPTION><OPTION value="四川省">四川省</OPTION><OPTION value="山东省">山东省</OPTION><OPTION value="湖北省">湖北省</OPTION></SELECT></TD></TR><TR><TD><DIV align="center">城市</DIV></TD><TD><SELECT name="selCity" id="selCity" onChange="myfun1( )"><OPTION>--请选择开户帐号的城市--</OPTION></SELECT></TD></TR><TR><TD> </TD><TD> </TD></TR><TR><TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD></TR><TR><TD colspan="2"> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
".dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>注册</TITLE>
<SCRIPT language="JavaScript" >function changeCity( ){var province=document.myform.selProvince.value; var cityList = new Array( );cityList['山东省'] = ['济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照'];cityList['四川省'] =['成都', '绵阳', '德阳', '自贡', '内江', '乐山', '南充', '雅安', '眉山', '甘孜', '凉山', '泸州'];cityList['湖北省'] = ['武汉', '宜昌', '荆州', '襄樊', '黄石', '荆门', '黄冈', '十堰', '恩施', '潜江'];document.myform.selCity.options.length=0;//获得省份选项的索引，这里使用标识var pIndex=document.myform.selProvince.value; var newOption1;document.myform.selCity.options.length=0;for (var j in cityList[pIndex]) {newOption1=new Option(cityList[pIndex][j], cityList[pIndex][j]); document.myform.selCity.options.add(newOption1);}}</SCRIPT></HEAD><BODY>
<FORM name="myform" id="myform" action="register_success.htm" onSubmit="return checkForm( )">
<TABLE width="472" border="0" align="center" cellpadding="0" cellspacing="0"><TR><TD colspan="2"><IMG src="images/1.gif" width="273" height="59"><IMG src="../example6/2.gif" width="1" height="75"><IMG src="images/2.gif" width="393" height="59"></TD></TR><TR><TD width="185" align="center"> 姓名 </TD><TD width="287"><INPUT name="txtUserName" type="text" id="txtUserName" size="25"></TD></TR><TR><TD align="center">省份 </TD><TD><SELECT name="selProvince" id="selProvince" onChange="changeCity( )"><OPTION>--请选择开户帐号的省份--</OPTION><OPTION value="四川省">四川省</OPTION><OPTION value="山东省">山东省</OPTION><OPTION value="湖北省">湖北省</OPTION></SELECT></TD></TR><TR><TD><DIV align="center">城市</DIV></TD><TD><SELECT name="selCity" id="selCity" onChange="myfun1( )"><OPTION>--请选择开户帐号的城市--</OPTION></SELECT></TD></TR><TR><TD> </TD><TD> </TD></TR><TR><TD colspan="2"><DIV align="center"><IMG src="images/regquick.jpg" width="114" height="27" onClick="checkForm( )"></DIV></TD></TR><TR><TD colspan="2"> </TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
2.1、输出数组元素
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>输出数组中的元素</TITLE><SCRIPT LANGUAGE = "JavaScript">
var emp = new Array(3);
emp[0] = "YaoMing 姚明";
emp[1] = "AnthonyCarmelo 卡梅隆安东尼";
emp[2] = "BillupsChauncey 昌西-比卢普斯 ";
document.write("<H3>没有按姓名排列：</H3><BR>");
for (var i in emp) //for(var i=0;i<emp.length;i++)
{
document.write(emp[i]+"<BR>");
}
document.write("<HR>");
emp.sort( );document.write("<H3>按姓名排列：</H3><BR>");
for (var i in emp) //for(var i=0;i<emp.length;i++)
{
document.write(emp[i]+"<BR>");
}</SCRIPT>
</HEAD><BODY>
</BODY>
</HTML>
2.2、下拉列表框
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>下拉列表框</TITLE>
<script type="text/javascript">
function showPic(num){if(num!=""){for(var i=1;i<9;i++){if(num==i){document.getElementById("pic"+i).style.display="block";}else{document.getElementById("pic"+i).style.display="none";}}}else{for(var i=1;i<9;i++){document.getElementById("pic"+i).style.display="none";}}
}
</SCRIPT></HEAD><BODY>
<FORM action="" method="post" name="myform">
<TABLE width="666" cellpadding="0" cellspacing="0" background="images/bg.jpg" align="center"><TR><TD height="70" align="center"><H3>魔兽世界八大种族(图)</H3></TD></TR><TR><TD height="44" align="center"><SELECT name="artType" onChange="showPic(this.value)"><option value="">--请选择一个种族--</option><OPTION value="1">人类</OPTION><OPTION value="2">暗夜精灵</OPTION><OPTION value="3">矮人</OPTION><OPTION value="4">侏儒</OPTION><OPTION value="5">兽人</OPTION><OPTION value="6">牛头人</OPTION><OPTION value="7">亡灵</OPTION><OPTION value="8">巨魔</OPTION></SELECT></TD></TR><TR><td align="center" height="234"><DIV id="pic1" style="display:none"><IMG src="images/humans-small.jpg"></DIV><DIV id="pic4" style="display:none"><IMG src="images/gnomes-small.jpg"></DIV><DIV id="pic3" style="display:none"><IMG src="images/dwarves-small.jpg"></DIV><DIV id="pic2" style="display:none"><IMG src="images/nightelves-small.jpg"></DIV><DIV id="pic5" style="display:none"><IMG src="images/orcs-small.jpg"></DIV><DIV id="pic6" style="display:none"><IMG src="images/tauren-small.jpg"></DIV><DIV id="pic7" style="display:none"><IMG src="images/undead-small.jpg"></DIV><DIV id="pic8" style="display:none"><IMG src="images/trolls-small.jpg"></DIV></td></TR>
</TABLE></FORM>
</BODY>
</HTML>
2.3、级联显示
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>级联显示</TITLE>
<SCRIPT type="text/javascript">
function showType(party){var arttype = new Array();arttype[0] = ["人类","暗夜精灵","矮人","侏儒"];arttype[1] = ["兽人","牛头人","亡灵","巨魔"];if(party!=0){document.myform.artTarget.options.length=0;for(var i in arttype[party-1]){document.myform.artTarget.options.add(new Option(arttype[party-1][i],parseInt(i)+1))}document.myform.artTarget.options.selectedIndex=0;showPic(1)}
}
function showPic(num){var type=document.myform.artParty.value;if(type==1){for(var i=1;i<5;i++){if(num==i){document.getElementById("lm"+i).style.display="block";}else{document.getElementById("lm"+i).style.display="none";}document.getElementById("bl"+i).style.display="none";}}else if(type==2){for(var i=1;i<5;i++){if(num==i){document.getElementById("bl"+i).style.display="block";}else{document.getElementById("bl"+i).style.display="none";}document.getElementById("lm"+i).style.display="none";}}
}
</SCRIPT>
<STYLE type="text/css">
td{font-size:14px; font-family:"宋体"; font-weight:bold}
</STYLE>
</HEAD><BODY>
<FORM action="" method="post" name="myform">
<TABLE width="666" cellpadding="0" cellspacing="0" background="images/bg.jpg" align="center"><TR><TD height="70" align="center"><H3>魔兽世界八大种族(图)</H3></TD></TR><TR><TD align="center">阵营选择<SELECT name="artParty" onChange="showType(this.selectedIndex)" style="width:140px"><OPTION value="">--请选择你的阵营--</OPTION><OPTION value="1">联盟</OPTION><OPTION value="2">部落</OPTION></SELECT></TD></TR><TR><TD height="44" align="center">角色选择<SELECT name="artTarget" onChange="showPic(this.value)" style="width:140px"><OPTION value="">--请选择一个种族--</OPTION></SELECT></TD></TR><TR><TD align="center" height="234"><DIV id="lm1" style="display:none"><IMG src="images/humans-small.jpg"></DIV><DIV id="lm4" style="display:none"><IMG src="images/gnomes-small.jpg"></DIV><DIV id="lm3" style="display:none"><IMG src="images/dwarves-small.jpg"></DIV><DIV id="lm2" style="display:none"><IMG src="images/nightelves-small.jpg"></DIV><DIV id="bl1" style="display:none"><IMG src="images/orcs-small.jpg"></DIV><DIV id="bl2" style="display:none"><IMG src="images/tauren-small.jpg"></DIV><DIV id="bl3" style="display:none"><IMG src="images/undead-small.jpg"></DIV><DIV id="bl4" style="display:none"><IMG src="images/trolls-small.jpg"></DIV></TD></TR>
</TABLE></FORM>
</BODY>
</HTML>
更多推荐
表单验证的高级特效
发布评论