表单验证高级特效(精品).ppt

《表单验证高级特效(精品).ppt》由会员分享，可在线阅读，更多相关《表单验证高级特效(精品).ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第七章第七章第七章第七章表单验证的高级特效表单验证的高级特效表单验证的高级特效表单验证的高级特效回顾回顾用图片代替提交按钮，应如何实现表单验证？用图片代替提交按钮，应如何实现表单验证？简述制作回车简述制作回车Tab切换特效的大致步骤。切换特效的大致步骤。简述制作即时提示错误特效的大致步骤。简述制作即时提示错误特效的大致步骤。实现内容动态改变有哪两种方法？实现内容动态改变有哪两种方法？预习检查预习检查什么是省市级联特效？什么是省市级联特效？在在JavaScript中，如何定义一维数组中，如何定义一维数组Array？在在JavaScript中，是否支持二维数组？中，是否支持二维数组？本章任务本章任

2、务演示示例演示示例1 1：页面效果页面效果演示示例演示示例2 2：页面效果页面效果 制作通用的省市级联效果制作通用的省市级联效果制作学期、课程级联效果制作学期、课程级联效果会使用下拉列表框控件实现省市级联功能会使用下拉列表框控件实现省市级联功能会使用数组优化省市级联功能会使用数组优化省市级联功能本章目标本章目标实现简单的省市级联功能实现简单的省市级联功能如何实现省市级联的效果？如何实现省市级联的效果？页面效果页面效果1、利用省份下拉框的选项改变事件、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份，动态添加城市下拉框的值、根据用户选择的省份，动态添加城市下拉框的值onChan

3、ge选项选项/内容改变事件内容改变事件动态添加动态添加城市选项城市选项Option实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：1、添加省份、城市下拉框（、添加省份、城市下拉框（演示素材演示素材）省份下拉框名称省份下拉框名称selProvince表单名称表单名称myform省份下拉框选项省份下拉框选项option城市下拉框名称城市下拉框名称selCity实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：2、查看生成的、查看生成的HTML代码代码.-请选择开户帐号的省份请选择开户帐号的省份-四川省四川省 山东省山东省 湖北省湖北省 .-请选择开户帐

4、号的城市请选择开户帐号的城市-.多个选项构成多个选项构成选项数组选项数组options选项选项Option城市下拉框暂城市下拉框暂时没有具体的时没有具体的城市选项城市选项实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：3、添加动态改变城市选项的、添加动态改变城市选项的changeCity()函数函数function changeCity()var province=document.myform.selProvince.value;var newOption1,newOption2;switch(province)case 四川省四川省:newOption1=new O

5、ption(成都市成都市,chengdu);newOption2=new Option(泸州市泸州市,luzhou);break;case 湖北省湖北省:document.myform.selCity.options.length=0;document.myform.selCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);2、根据用户选择的省份，、根据用户选择的省份，动态创建城市下拉框选项动态创建城市下拉框选项1、获取用户选择、获取用户选择的省份的省份3、清除原有的选项、清除原有的选项4、将

6、选项添加到选项数组、将选项添加到选项数组options查看源代码查看源代码实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：4、选择下拉框的、选择下拉框的onChange事件，调用事件函数事件，调用事件函数 -请选择开户帐号的省份请选择开户帐号的省份-四川省四川省 山东省山东省 湖北省湖北省当用户选择不同的省份当用户选择不同的省份时，将调用函数，改变时，将调用函数，改变城市下拉框的选项城市下拉框的选项查看源代码查看源代码实现简单的省市级联功能实现简单的省市级联功能小结下拉框控件小结下拉框控件SELECT：常用属性常用属性lengthvalueoptionsselected

7、Index常用事件常用事件onChangeonBluronFocus选项数组选项数组1、每个选项、每个选项Option可以动态创建可以动态创建new Option(”显示内容显示内容”，“值值”)2、动态添加选项、动态添加选项selCity.options.add(newOption1）3、清除选项、清除选项selCity.options.length=0读取或设置被选项的索引号，读取或设置被选项的索引号，第一个为第一个为0，其他类推，其他类推选项改变事件选项改变事件小结小结1实现学期、课程的级联实现学期、课程的级联学期学期第一学期第一学期第二学期第二学期第二学年第二学年 各学期对应课程各学期

8、对应课程第一学期：第一学期：HTML、Java第二学期：第二学期：Sqlserver、.Net第二学年：第二学年：Struts、Ajax练习答案练习答案使用数组优化省市级联功能使用数组优化省市级联功能每个省实际上有很多城市、并且城市数量不等，每个省实际上有很多城市、并且城市数量不等，有没有更简单、通用的办法？有没有更简单、通用的办法？var newOption1,newOption2;switch(province)case 四川省四川省:newOption1=new Option(成都市成都市,chengdu);newOption2=new Option(泸州市泸州市,luzhou);bre

9、ak;case 湖北省湖北省:newOption1=new Option(武汉市武汉市,wuhan);newOption2=new Option(襄樊市襄樊市,xiangfan);break;case 山东省山东省:newOption1=new Option(青岛市青岛市,qingdao);newOption2=new Option(烟台市烟台市,yantai);如果有很多城市，就需要如果有很多城市，就需要定义很多变量，编写很多定义很多变量，编写很多重复的代码重复的代码解决办法：解决办法：使用数组！使用数组！使用数组优化省市级联功能使用数组优化省市级联功能JavaScript中的数组用法：中的

10、数组用法：var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;emp.sort();document.write(排序结果是：排序结果是：);for(var i in emp)document.write(empi+);1、创建数组对象、创建数组对象new Array(大小大小)2、为数组赋值。数组中、为数组赋值。数组中可存放任意数据可存放任意数据 3、调用数组的方法、调用数组的方法sort()进行排序进行排序 4、循环输出，等同：、循环输出，等同：for(var i=0;iemp.length;i+

11、)查看源代码查看源代码使用数组优化省市级联功能使用数组优化省市级联功能JavaScript中的数组用法：中的数组用法：var cityList=new Array();cityList0=成都成都,绵阳绵阳,德阳德阳,自贡自贡,泸州泸州;cityList1=济南济南,青岛青岛,威海威海,日照日照;cityList2=武汉武汉,宜昌宜昌,恩施恩施,潜江潜江;document.write(四川省包括的城市是：四川省包括的城市是：);for(var j in cityList0)document.write(cityList0j+);1、创建数组，可、创建数组，可以不指定大小以不指定大小 2、为数组

12、赋值。每、为数组赋值。每个单元格可以是数个单元格可以是数组。组。JavaScript不不支持二维数组支持二维数组 3、循环输出、循环输出.0-表示四川省的索引号，同理可表示四川省的索引号，同理可以换为山东省索引号以换为山东省索引号1查看源代码查看源代码使用数组优化省市级联功能使用数组优化省市级联功能用数组优化解决省市级联问题：用数组优化解决省市级联问题：012一维数组一维数组:cityList数组索引号数组索引号1下拉框索引号下拉框索引号selectedIndex01231、用数组存放每个用数组存放每个省省份份包含的城市包含的城市 2、根据用户选择根据用户选择的的省份索引号，省份索引号，找到对

13、应的找到对应的数组索引号数组索引号3、根据对应的数组内、根据对应的数组内容，容，添加城市选项到城添加城市选项到城市下拉框中市下拉框中cityList0cityList1cityList2使用数组优化省市级联功能使用数组优化省市级联功能用数组优化解决省市级联问题：用数组优化解决省市级联问题：function changeCity()var cityList=new Array();cityList0=成都成都,绵阳绵阳,德阳德阳,自贡自贡,泸州泸州;cityList1=济南济南,青岛青岛,日照日照;cityList2=武汉武汉,宜昌宜昌,潜江潜江;var pIndex=document.myfo

14、rm.selProvince.selectedIndex-1;var newOption1;document.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityListpIndexj,cityListpIndexj);document.myform.selCity.options.add(newOption1);1、创建数组，存放各、创建数组，存放各省份对应城市省份对应城市 2、根据用户选择的省份索引号，、根据用户选择的省份索引号，获取对应数组索引号获取对应数组索引号 4、

15、根据数组内容创建选项，、根据数组内容创建选项，并添加到城市下拉框并添加到城市下拉框3、清空原下拉框内容、清空原下拉框内容 查看源代码查看源代码小结小结2用数组优化学期、选修课程的级联。用数组优化学期、选修课程的级联。各学期对应课程各学期对应课程第一学期：第一学期：HTML、Java、SqlServer基础、基础、C#第二学期：第二学期：JavaScript、SqlServer高级、高级、.Net、JSP第二学年：第二学年：Struts、ASP.NET、Ajax、Spring、Hibernate练习答案练习答案使用文字下标的数组再次优化使用文字下标的数组再次优化使用索引号必须要求省份的排列顺序和

16、数组编号相同。使用索引号必须要求省份的排列顺序和数组编号相同。cityList0=成都成都,.泸州泸州;cityList1=济南济南,日照日照;cityList2=武汉武汉,潜江潜江;cityList3=合肥合肥,亳州亳州;cityList4=东莞东莞,珠海珠海;cityList5=桂林桂林,贺州贺州;cityList6=贵阳贵阳,遵义遵义;四川省四川省 山东省山东省 湖北省湖北省 安徽省安徽省 广东省广东省 广西省广西省 贵州省贵州省 当当30多个省份罗列在一起时容易搞错多个省份罗列在一起时容易搞错对应关系对应关系，有没有更直观的办法，有没有更直观的办法?使用文字下标的数组再次优化使用文字下

17、标的数组再次优化1、JavaScript中的数组中的数组下标可以采用标识符下标可以采用标识符代替。代替。例如：例如：cityList山东省山东省=济南济南,青岛青岛,淄博淄博,枣庄枣庄,东营东营,烟台烟台,潍坊潍坊,济宁济宁,泰安泰安,威海威海,日照日照;2、可以根据用户选择的、可以根据用户选择的value值值，与数组下标标识，与数组下标标识 进行比较，从而找出该省包括的城市。进行比较，从而找出该省包括的城市。用文字下标的数组优化省市级联菜单：用文字下标的数组优化省市级联菜单：使用文字下标的数组再次优化使用文字下标的数组再次优化function changeCity()var cityList

18、=new Array();cityList四川省四川省=成都成都,绵阳绵阳,泸州泸州;cityList山东省山东省=济南济南,青岛青岛,日照日照;cityList湖北省湖北省=武汉武汉,宜昌宜昌,潜江潜江;var pIndex=document.myform.selProvince.value;var newOption1;document.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityListpIndexj,cityListpIndexj);document.myfo

19、rm.selCity.options.add(newOption1);数组下标采用文字标数组下标采用文字标识符代替识符代替根据省份下拉框的值，根据省份下拉框的值，获取对应数组的索引获取对应数组的索引标识标识数组的读取和数字索数组的读取和数字索引方式相同引方式相同查看源代码查看源代码常见错误常见错误var Bookinfo=new Array(2)(4);Bookinfo00=“6-5333-0575-3”;Bookinfo01=“Ajax高高级编级编程程”Bookinfo02=“铁铁手手”Bookinfo03=“人民人民邮电邮电出版社出版社”Bookinfo10=“6-5333-0575-8”

20、;Bookinfo21=“精通正精通正则则表达式表达式”Bookinfo32=“余晟余晟”Bookinfo43=“电电子工子工业业出版社出版社”JavaScript中没有二维或中没有二维或二维以上数组二维以上数组小结小结3数组下标采用文字标识的方式，实现学期、课数组下标采用文字标识的方式，实现学期、课程的级联。程的级联。各学期对应课程各学期对应课程第一学期：第一学期：HTML、Java、SqlServer基础、基础、C#第二学期：第二学期：JavaScript、SqlServer高级、高级、.Net、JSP第二学年：第二学年：Struts、ASP.NET、Ajax、Spring、Hibernate练习答案练习答案总结总结省市级联特效的实现思路是什么？省市级联特效的实现思路是什么？下拉框常用的属性和事件有哪些？下拉框常用的属性和事件有哪些？使用数组实现省市级联的思路是什么？使用数组实现省市级联的思路是什么？在在JavaScript中使用数组应注意哪些问题？中使用数组应注意哪些问题？