j14表单验证高级特效练习

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