表单验证高级特效.ppt

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

1、第第4章章表单验证高级特效表单验证高级特效内容回顾内容回顾u表单验证分为两步：第一步是编写验证函数验证表单数据的合法性，第二步是处理表单onsubmit，即在表单提交事件中调用表单验证函数 uString对象用于处理字符串，如获取字符串的长度、搜索字符串中的字符、转换字符的大小写等 u正则表达式是一种对文字进行模糊匹配的语言，常用方法有test、exec等 本章内容本章内容u动态改变样式属性uclassName属性的用法u数组的创建和使用u下拉列表框的使用本章目标本章目标u制作动态输入提示特效u制作内容的动态显示u制作即错误提示特效u使用数组制作省市级联特效1.1.动态改变样式属性动态改变样式

2、属性1.1 访问样式属性u在程序运行时如何动态改变文本框的背景颜色？获得焦点，改变背景颜色访问样式属性访问样式属性object.style.property;object.style.property;u 使用元素的style属性访问样式规则n 例如：访问字体的颜色color使用obj.style.color 访问字体的大小属性使用obj.style.fontSize样式属性由多个单词组成时，须变换属性的书写格式font-size变换成fontSize访问样式属性访问样式属性u 实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色获得焦点时的状态访问样式属性访问样式属性 用户名 密 

3、; 码 示例演示示例演示onFocus获得焦点事件onBlur失去焦点事件1.2 className属性的用法属性的用法u如何制作淘宝新用户注册页面中的动态输入提示特效？classNameclassName属性的用法属性的用法object.className=className;u className属性可以动态引用样式的类选择器n 在使用className属性须预先定义相应的类选择器（如定义文本框 获得焦点和失去焦点的样式），然后再使用object.className在事件触发 时引用相关样式的类选择符。u 制作步骤n 使用DIVCSS布局制作淘宝注册页面n 为突出显示的背景层定义

4、focusStyle和.blurStyle两个类选择器，在.focusStyle选择器中定义输入项获得焦点时的样式规则，在.blurStyle选 择器中定义输入项失去焦点时的样式规则n 在输入项的onFocus和onBlur事件中通过className属性动态改突出显示 的背景层的样式规则classNameclassName属性的用法属性的用法function hightLight(id)document.getElementById(id).className=focusStyle;function restore(id)document.getElementById(id).classNa

5、me=blurStyle;.focusStyleborder:1px solid#00CCFF;background-color:#99FFCC;.blurStyleborder:0px;background-color:white;电子邮件文本框获得焦点设置背景层的样式文本框失去焦点时恢复原状示例演示示例演示演示素材演示素材获得焦点和失去焦点时的样式规则1.3 1.3 制作内容动态显示特效制作内容动态显示特效u 根据用户的选择动态切换显示内容，如何实现？解决办法：使用display属性实现内容的动态显示和隐藏 制作内容动态显示特效制作内容动态显示特效object.style.display=

6、state;值描述none不显示且不保留内容块所占据的空间inline设置元素同行显示，不允许设置元素的大小block块状显示且独占一行，可以设置元素的大小uvisibility:hide;隐藏页面元素时，不会释放元素原有的位置制作内容动态显示特效制作内容动态显示特效u实现步骤如下：n使用DIVCSS布局制作快速充值页面，并且定义点卡、QQ、网游物品三块内容n设置QQ、网游物品两块内容为隐藏状态n使用JavaScript脚本判断点卡、QQ、网游物品单选按钮的选中状态，根据选中状态显示相应的内容制作内容动态显示特效制作内容动态显示特效#card,#qq,#gamemargin-top:10px;

7、#qq,#gamedisplay:none;示例演示示例演示function showContent()var opts=document.getElementsByName(type);for(var i=0;iopts.length;i+)if(optsi.checked=true)break;switch(optsi.value)case card:document.getElementById(card).style.display=block;document.getElementById(qq).style.display=none;document.getElementById(

8、game).style.display=none;break;点卡 QQ 网游物品使用DIV定义三块分类内容判断单选按钮的选择状态显示选中的内容，隐藏其它内容处理onclick事件演示素材演示素材1.41.4制作即时错误提示特效制作即时错误提示特效u 在表单验证时，发现有不合法的数据信息，该如何提示？解决办法：使用innerHTML属性动态改变DIV的内容制作即时错误提示特效制作即时错误提示特效u实现步骤：n在每个表单元后插入一个div或span，用来显示错误信息n为div或span定义display样式属性，并设置值为inline，保证和前面的元素在同行显示电子邮件电子邮件格式不正确制作即时

9、错误提示特效制作即时错误提示特效u编写表单验证处理函数，当数据验证失败时，通过div或者span的innerHTML属性设置需要给出的错误提示信息/*验证电子邮件格式*/function checkMail()if(!mailPattern.test(mail)$(mailError).innerHTML=电子邮件格式不正确电子邮件格式不正确;$(mailError).style.color=red;return false;return true;2.2.数组的定义和使用数组的定义和使用u数组通常用来存储列表信息，每一个列表元素都可以通过一个索引值来访问 uArray是JavaScript的

10、内置对象u完成数组的创建、排序、删除、合并等2.1 2.1 数组的创建及使用u创建数组var array=new Array();var array=new Array(3);var array=new Array(10,30,25);u访问数组元素array0=10;array1=jack;array4=“andy;索引越界，会出错吗？数组的创建及使用u常用属性length表示的是数组所占内存空间的数目u常用方法名称名称描述描述join()将数组转换为使用符号连接的字符串concat()将多个数组合并为一个reverse()将数组进行反向排序sort()对数组进行排序数组的创建及使用数组的创

11、建及使用var names=new Array(jack,andy,mike,lucy);/使用号将数组中的元素连接成一个字符串document.write(names.join(-);/将数组中的元数倒置names.reverse();document.write(-反转数组中的元素-);for(var i=0;inames.length;i+)document.write(namesi+);names.sort();示例演示示例演示2.2 2.2 使用for-in语句遍历数组ufor-in语句的功能用于对某个对象的所有属性进行循环操作，它将一个对象的所有属性名称逐一地赋值到一个变量，不需要

12、事先知道对象中属性的个数 for(变量 in 对象)执行语句;使用for-in语句遍历数组var names=new Array(jack,andy,mike,lucy);for(var index in names)document.write(namesindex+);index中的值是names数组元素的索引，从0开始 2.3 2.3 数组的应用省市级联特效数组的应用省市级联特效 u 如何实现省市级联？数组的应用省市级联特效数组的应用省市级联特效 u下拉列表框的常用属性、方法和事件 属性value下拉列表框中已选择的选项的值options存放下拉列表框中所有选项的数组selectedIn

13、dex返回已选择的选项在options中的索引length返回下拉菜单中选项的个数方法add(new,old)将option的新对象new添加至对象old之前，old参数不存在时，新对象将直接被添加到options数组的末尾 事件onChange当选项发生改变时产生教员演示如何动态添加下拉列表框中的选项数组的应用省市级联特效数组的应用省市级联特效 u下拉列表框的级联特效，具体实现步骤如下：n在示例1.4的基础上制作省市级联特效n定义两个数组，分别用来存放四川和湖北的所有服务器var sc=new Array(富乐山,李白故里,泸定桥);var hb=new Array(武当山,襄阳城,昭君台)

14、;var sc=富乐山,李白故里,泸定桥“;var hb=武当山,襄阳城,昭君台“;n 也可以定义为：数组的应用省市级联特效数组的应用省市级联特效 u获取选择的服务器省份并进行判断，根据判断结果决定遍历哪个服务器数组 var province=document.getElementById(province).value;if(province=四川)/清空下拉列表框中的选项document.getElementById(server).options.length=0;for(var i in sc).数组的应用省市级联特效数组的应用省市级联特效 u使用document.createElem

15、ent方法为服务器数组中的每个元素创建option对象,并将option对象添加到下拉列表的options数组中var op=document.createElement(option);op.text=sci;op.value=sci;document.getElementById(server).options.add(op);var op=new Option();/var op=new Option(sci,sci);op.text=sci;op.value=sci;document.getElementById(server).options.add(op);或者 2.42.4使用文

16、字下标优化省市级联var province=document.getElementById(province).value;if(province=四川)/清空下拉列表框中的选项document.getElementById(server).options.length=0;for(var i in sc)./访问湖北地区的服务器数组 u使用数组的整数下标访访问数组元素，需将数组中的内容取出进行判断，有没有更简单的办法访问对应的地区的服务器？使用文字作为数组的下标！使用文字下标优化省市级联var servers=new Array();servers四川四川=富乐山富乐山,李白故里李白故里,泸

17、定桥泸定桥;servers湖北湖北=武当山武当山,襄阳城襄阳城,昭君台昭君台;var province=document.getElementById(province).value;document.getElementById(server).options.length=0;for(var i in serversprovince)var op=document.createElement(option);op.text=serversprovincei;op.value=serversprovincei;document.getElementById(server).options.a

18、dd(op);u在访问数组时使用文字下标，类似于java中的HashMap集合存储元素的方式 使用文字作为数组下标总结总结u通过JavaScript脚本可以动态改变样式属性的值，语法如下：object.style.property;u使用className属性可以动态改变页面元素上应用的类选择器u样式属性display的作用是设置页面元素的显示方式，其值包括：none、inline、blockuArray对象是用来创建数组的JavaScript内置对象，常用的方法有：join、sort、reverse等uFor-in语句可以遍历对象的所有属性，还可以遍历数组中的元素uJavaScript中的创建数组的方式有两种：一种是使用Array构造函数的方式，另一种是使用数据集合的方式 u下拉列表框中由和两个标签共同创建的u使用document.createElement(option)可以创建option对象