《表单验证高级特效》由会员分享，可在线阅读，更多相关《表单验证高级特效（25页珍藏版）》请在金锄头文库上搜索。
1、第七章,表单验证的高级特效,回顾,用图片代替提交按钮，应如何实现表单验证？简述制作回车Tab切换特效的大致步骤。简述制作即时提示错误特效的大致步骤。实现内容动态改变有哪两种方法？,预习检查,什么是省市级联特效？在JavaScript中，如何定义一维数组Array？在JavaScript中，是否支持二维数组？,本章任务,演示示例1：页面效果,演示示例2：页面效果,制作通用的省市级联效果,制作学期、课程级联效果,会使用下拉列表框控件实现省市级联功能会使用数组优化省市级联功能,本章目标,实现简单的省市级联功能,如何实现省市级联的效果？,页面效果,1、利用省份下拉框的选项改变事件onChange 2、
2、根据用户选择的省份，动态添加城市下拉框的值,onChange 选项/内容改变事件,动态添加 城市选项Option,实现简单的省市级联功能,演示实现步骤： 1、添加省份、城市下拉框（演示素材）,省份下拉框名称selProvince,表单名称 myform,省份下拉框选项option,城市下拉框名称selCity,实现简单的省市级联功能,演示实现步骤： 2、查看生成的HTML代码,-请选择开户帐号的省份-四川省山东省湖北省-请选择开户帐号的城市-,多个选项构成选项数组 options,选项 Option,城市下拉框暂时没有具体的城市选项,实现简单的省市级联功能,演示实现步骤： 3、添加动态改变城市
3、选项的changeCity( )函数,function changeCity( )var province=document.myform.selProvince.value; var newOption1,newOption2;switch(province)case “四川省“ :newOption1= new Option(“成都市“,“chengdu“);newOption2= new Option(“泸州市“,“luzhou“);break;case “湖北省“ : document.myform.selCity.options.length=0;document.myform.se
4、lCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);,2、根据用户选择的省份，动态创建城市下拉框选项,1、获取用户选择的省份,3、清除原有的选项,4、将选项添加到选项数组options,查看源代码,实现简单的省市级联功能,演示实现步骤： 4、选择下拉框的onChange事件，调用事件函数,-请选择开户帐号的省份-四川省山东省湖北省,当用户选择不同的省份时，将调用函数，改变城市下拉框的选项,查看源代码,实现简单的省市级联功能,小结下拉框控件SELECT： 常用属性 length value o
5、ptions selectedIndex 常用事件 onChange onBlur onFocus,选项数组 1、每个选项Option可以动态创建 new Option(”显示内容”，“值”) 2、动态添加选项 selCity.options.add(newOption1） 3、清除选项 selCity.options.length=0,读取或设置被选项的索引号，第一个为0，其他类推,选项改变事件,小结1,实现学期、课程的级联,学期 第一学期 第二学期 第二学年,各学期对应课程 第一学期：HTML、Java 第二学期：Sqlserver、.Net 第二学年：Struts、Ajax,练习答案,使
6、用数组优化省市级联功能,每个省实际上有很多城市、并且城市数量不等， 有没有更简单、通用的办法？,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 “山东省“ : ne
7、wOption1= new Option(“青岛市“,“qingdao“);newOption2= new Option(“烟台市“,“yantai“); ,如果有很多城市，就需要定义很多变量，编写很多重复的代码,解决办法：使用数组！,使用数组优化省市级联功能,JavaScript中的数组用法：, var emp = new Array(3); emp0 = “Ryan Dias“; emp1 = “Graham Browne“; emp2 = “David Greene“;emp.sort( );document.write(“排序结果是：“); for (var i in emp) doc
8、ument.write(empi+“); ,1、创建数组对象 new Array(大小),2、为数组赋值。数组中可存放任意数据,3、调用数组的方法 sort( )进行排序,4、循环输出，等同： for(var i=0;iemp.length;i+),查看源代码,使用数组优化省市级联功能,JavaScript中的数组用法：, var cityList = new Array( );cityList0=成都, 绵阳, 德阳, 自贡, , 泸州; cityList1=济南, 青岛, 威海, 日照; cityList2 = 武汉, 宜昌, 恩施, 潜江;document.write(“四川省包括的城市
9、是：“); for (var j in cityList0) document.write(cityList0j +“); ,1、创建数组，可以不指定大小,2、为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组,3、循环输出. 0-表示四川省的索引号，同理可以换为山东省索引号1,查看源代码,使用数组优化省市级联功能,用数组优化解决省市级联问题：,一维数组: cityList,数组索引号,1,下拉框索引号selectedIndex,1、用数组存放每个省份包含的城市,2、根据用户选择的省份索引号，找到对应的数组索引号,3、根据对应的数组内容，添加城市选项到城市下拉框中,使用数组优
10、化省市级联功能,用数组优化解决省市级联问题：,function changeCity( ) var cityList = new Array( );cityList0=成都, 绵阳, 德阳, 自贡, 泸州;cityList1=济南, 青岛, 日照;cityList2 = 武汉, 宜昌, 潜江;var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1;document.myform.selCity.options.length=0;for (var j in cityListpIndex) newOption1=
11、new Option(cityListpIndexj, cityListpIndexj); document.myform.selCity.options.add(newOption1); ,1、创建数组，存放各省份对应城市,2、根据用户选择的省份索引号，获取对应数组索引号,4、根据数组内容创建选项，并添加到城市下拉框,3、清空原下拉框内容,查看源代码,小结2,用数组优化学期、选修课程的级联。,各学期对应课程 第一学期：HTML、Java、SqlServer基础、C# 第二学期：JavaScript、SqlServer高级、.Net、JSP 第二学年：Struts、ASP.NET、Ajax、S
12、pring、Hibernate,练习答案,使用文字下标的数组再次优化,使用索引号必须要求省份的排列顺序和数组编号相同。, cityList0=成都, . 泸州; cityList1=济南, 日照; cityList2=武汉, 潜江; cityList3=合肥, 亳州; cityList4=东莞, 珠海; cityList5=桂林, 贺州; cityList6=贵阳, 遵义; ,四川省山东省湖北省安徽省广东省广西省贵州省 ,当30多个省份罗列在一起时容易搞错对应关系，有没有更直观的办法?,使用文字下标的数组再次优化,1、JavaScript中的数组下标可以采用标识符代替。例如： cityList
13、山东省 = 济南, 青岛, 淄博, 枣庄, 东营,烟台, 潍坊, 济宁, 泰安, 威海, 日照;2、可以根据用户选择的value值，与数组下标标识进行比较，从而找出该省包括的城市。,用文字下标的数组优化省市级联菜单：,使用文字下标的数组再次优化,function changeCity( ) var cityList = new Array( );cityList四川省=成都, 绵阳, , 泸州;cityList山东省=济南, 青岛, 日照;cityList湖北省 = 武汉, 宜昌, 潜江;var pIndex=document.myform.selProvince.value; var new
14、Option1;document.myform.selCity.options.length=0;for (var j in cityListpIndex) newOption1=new Option(cityListpIndexj, cityListpIndexj); document.myform.selCity.options.add(newOption1);,数组下标采用文字标识符代替,根据省份下拉框的值，获取对应数组的索引标识,数组的读取和数字索引方式相同,查看源代码,常见错误, var Bookinfo = new Array(2)(4);Bookinfo00= “6-5333-0
15、575-3”; Bookinfo01= “Ajax高级编程” Bookinfo02= “铁手 ” Bookinfo03= “人民邮电出版社 ”Bookinfo10= “6-5333-0575-8”; Bookinfo21= “精通正则表达式” Bookinfo32= “余晟 ” Bookinfo43= “电子工业出版社 ” ,JavaScript中没有二维或二维以上数组,小结3,数组下标采用文字标识的方式，实现学期、课 程的级联。,各学期对应课程 第一学期：HTML、Java、SqlServer基础、C# 第二学期：JavaScript、SqlServer高级、.Net、JSP 第二学年：Struts、ASP.NET、Ajax、Spring、Hibernate,练习答案,总结,省市级联特效的实现思路是什么？ 下拉框常用的属性和事件有哪些？ 使用数组实现省市级联的思路是什么？ 在JavaScript中使用数组应注意哪些问题？,
