表单验证的高级特效.pptVIP

第七章　 表单验证的高级特效 回顾 用图片代替提交按钮，应如何实现表单验证？ 简述制作回车Tab切换特效的大致步骤。 简述制作即时提示错误特效的大致步骤。 实现内容动态改变有哪两种方法？ 预习检查 什么是省市级联特效？ 在JavaScript中，如何定义一维数组Array？ 在JavaScript中，是否支持二维数组？ 本章任务 本章目标 会使用下拉列表框控件实现省市级联功能 会使用数组优化省市级联功能 实现简单的省市级联功能 实现简单的省市级联功能 实现简单的省市级联功能 实现简单的省市级联功能 实现简单的省市级联功能 实现简单的省市级联功能 小结下拉框控件SELECT： 常用属性 length value options selectedIndex 常用事件 onChange onBlur onFocus 小结1 使用数组优化省市级联功能 使用数组优化省市级联功能 使用数组优化省市级联功能 使用数组优化省市级联功能 使用数组优化省市级联功能 小结2 使用文字下标的数组再次优化 使用文字下标的数组再次优化 使用文字下标的数组再次优化 常见错误 小结3 总结 省市级联特效的实现思路是什么？ 下拉框常用的属性和事件有哪些？ 使用数组实现省市级联的思路是什么？ 在JavaScript中使用数组应注意哪些问题？ 演示示例1：页面效果 演示示例2：页面效果 制作通用的省市级联效果 制作学期、课程级联效果 如何实现省市级联的效果？ 页面效果 1、利用省份下拉框的选项改变事件onChange 2、根据用户选择的省份，动态添加城市下拉框的值 onChange 选项/内容改变事件 动态添加 城市选项Option 演示实现步骤： 1、添加省份、城市下拉框（演示素材） 省份下拉框名称selProvince 表单名称 myform 省份下拉框选项option 城市下拉框名称selCity 演示实现步骤： 2、查看生成的HTML代码 FORM name=myform ...... SELECT name=selProvince OPTION--请选择开户帐号的省份--/OPTION OPTION value=四川省四川省/OPTION OPTION value=山东省山东省/OPTION OPTION value=湖北省湖北省/OPTION /SELECT ...... SELECT name=selCity OPTION--请选择开户帐号的城市--/OPTION /SELECT ...... /FORM 多个选项构成选项数组 options 选项 Option 城市下拉框暂时没有具体的城市选项 演示实现步骤： 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、根据用户选择的省份，动态创建城市下拉框选项 1、获取用户选择的省份 3、清除原有的选项 4、将选项添加到选项数组options 查看源代码 演示实现步骤： 4、选择下拉框的onChange事件，调用事件函数 …… SELECT name=selProvince onChange=changeCity( ) OPTION--请选择开户帐号的省份--/OPTION OPTION value=四川省四川省/OPTION OPTION value=山东省山东省/OPTION OPTION value=湖北省湖北省/OPTION /SELECT …… 当用户选择不同的省份时，将调用函数，改变城市下拉框的选项 查看源