表单验证高级特效

第4章表单验证高级特效内容回顾表单验证分为两步：第一步是编写验证函数验证表单数据的合法性，第二步是处理表单onsubmit，即在表单提交事件中调用表单验证函数String对象用于处理字符串，如获取字符串的长度、搜索字符串中的字符、转换字符的大小写等正则表达式是一种对文字进行模糊匹配的语言，常用方法有test、exec等本章内容动态改变样式属性className属性的用法数组的创建和使用下拉列表框的使用本章目标制作动态输入提示特效制作内容的动态显示制作即错误提示特效使用数组制作省市级联特效1.动态改变样式属性1.1访问样式属性在程序运行时如何动态改变文本框的背景颜色？获得焦点，改变背景颜色访问样式属性object.style.property;使用元素的style属性访问样式规则例如：访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSize样式属性由多个单词组成时，须变换属性的书写格式font-size变换成fontSize访问样式属性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色获得焦点时的状态访问样式属性……trtdwidth=60height=28用户名/tdtdwidth=186inputname=usernametype=textclass=inpid=usernameonFocus=this.style.backgroundColor='#CCFFFF'onblur=this.style.backgroundColor='white'//td/trtrtdheight=32密  码/tdtdinputname=passwordtype=passwordclass=inpid=passwordonFocus=this.style.backgroundColor='#CCFFFF'onblur=this.style.backgroundColor='white'//td/tr……示例演示onFocus获得焦点事件onBlur失去焦点事件1.2className属性的用法如何制作淘宝新用户注册页面中的动态输入提示特效？className属性的用法object.className=className;className属性可以动态引用样式的类选择器在使用className属性须预先定义相应的类选择器（如定义文本框获得焦点和失去焦点的样式），然后再使用object.className在事件触发时引用相关样式的类选择符。制作步骤使用DIV＋CSS布局制作淘宝注册页面为突出显示的背景层定义focusStyle和.blurStyle两个类选择器，在.focusStyle选择器中定义输入项获得焦点时的样式规则，在.blurStyle选择器中定义输入项失去焦点时的样式规则在输入项的onFocus和onBlur事件中通过className属性动态改突出显示的背景层的样式规则className属性的用法scriptlanguage=javascriptfunctionhightLight(id){document.getElementById(id).className=focusStyle;}functionrestore(id){document.getElementById(id).className=blurStyle;}/scriptstyletype=text/css.focusStyle{border:1pxsolid#00CCFF;background-color:#99FFCC;}.blurStyle{border:0px;background-color:white;}/styledivid=bgMaillabel电子邮件/labelinputtype=textonblur=restore('bgMail');onFocus=hightLight('bgMail')name=mailid=mailclass=inp//div文本框获得焦点设置背景层的样式文本框失去焦点时恢复原状示例演示演示素材获得焦点和失去焦点时的样式规则1.3制作内容动态显示特效根据用户的选择动态切换显示内容，如何实现？解决办法：使用display属性实现内容的动态显示和隐藏制作内容动态显示特效object.style.display=state;值描述none不显示且不保留内容块所占据的空间inline设置元素同行显示，不允许设置元素的大小block块状显示且独占一行，可以设置元素的大小visibility:hide;隐藏页面元素时，不会释放元素原有的位置制作内容动态显示特效实现步骤如下：使用DIV＋CSS布局制作快速充值页面，并且定义点卡、QQ、网游物品三块内容设置QQ、网游物品两块内容为隐藏状态使用JavaScript脚本判断点卡、QQ、网游物品单选按钮的选中状态，根据选中状态显示相应的内容制作内容动态显示特效#card,#qq,#game{margin-top:10px;}#qq,#game{display:none;}…divid=“card”…/divdivid=qq…/divdivid=game…/div示例演示functionshowContent(){varopts=document.getElementsByName(type);for(vari=0;iopts.length;i++){if(opts[i].checked==true){break;}}switch(opts[i].value){case'card':document.getElementById(card).style.display=block;document.getElementById(qq).style.display=none;document.getElementById(game).style.display=none;break;…}}divid=menuinputtype=radioname=typevalue=cardonclick=showContent()/点卡inputtype=radiovalue=qqname=typeonclick=showContent()/QQinputtype=radiovalue=gamename=typeonclick=showContent()/网游物品/div使用DIV定义三块分类内容判断单选按钮的选择状态显示选中的内容，隐藏其它内容处理onclick事件演示素材1.4制作即时错误提示特效在表单验证时，发现有不合法的数据信息，该如何提示？解决办法：使用innerHTML属性动态改变DIV的内容制作即时错误提示特效实现步骤：在每个表单元后插入一个div或span，用来显示错误信息为div或span定义display样式属性，并设置值为inline，保证和前面的元素在同行显示divid=bgMaillabel电子邮件/labelinputtype=textname=mailid=mailclass=inp/spanid=“mailError”电子邮件格式不正确/span/div制作即时错误提示特效编写表单验证处理函数，当数据验证失败时，通过div或者span的innerHTML属性设置需要给出的错误提示信息/*验证电子邮件格式*/functioncheckMail(){……if(!mailPattern.test(mail)){$(mailError).innerHTML=电子邮件格式不正确;$(mailError).style.color=red;returnfalse;}……returntrue;}2.数组的定义和使用数组通常用来存储列表信息，每一个列表元素都可以通过一个索引值来访问Array是JavaScript的内置对象完成数组的创建、排序、删除、合并等2.1数组的创建及使用创建数组vararray=newArray();vararray=newArray(3);vararray=newArray(10,30,25);访问数组元素array[0]=10;array[1]=jack;array[4]=“andy;索引越界，会出错吗？数组的创建及使用常用属性length表示的是数组所占内存空间的数目常用方法名称描述join()将数组转换为使用符号连接的字符串concat()将多个数组合并为一个reverse()将数组进行反向排序sort()对数组进行排序数组的创建及使用varnames=newArray(jack,andy,mike,lucy);//使用－号将数组中的元素连接成一个字符串document.write(names.join(-));//将数组中的元数倒置names.reverse();document.write(br/-----反转数组中的元素----------br/);for(vari=0;inames.length;i++){document.write(names[i]+br/);}……names.sort();……示例演示2.2使用for-in语句遍历数组for-in语句的功能用于对某个对象的所有属性进行循环操作，它将一个对象的所有属性名称逐一地赋值到一个变量，不需要事先知道对象中属性的个数for(变量in对象){执行语句;}使用for-in语句遍历数组varnames=newArray(jack,andy,mike,lucy);for(varindexinnames){document.write(names[index]+br/);}index中的值是names数组元素的索引，从0开始2.3数组的应用－省市级联特效如何实现省市级联？数组的应用－省市级联特效下拉列表框的常用属性、方法和事件属性value下拉列表框中已选择的选项的值options存放下拉列表框中所有选项的数组selectedIndex返回已选择的选项在options中的索引length返回下拉菜单中选项的个数方法add(new,old)将option的新对象new添加至对象old之前，old参数不存在时，新对象将直接被添加到options数组的末尾事件onChange当选项发生改变时产生教员演示如何动态添加下拉列表框中的选项数组的应用－省市级联特效下拉列表框的级联特效，具体实现步骤如下：在示例1.4的基础上制作省市级联特效定义两个数组，分别用来存放四川和湖北的所有服务器varsc=newArray(富乐山,李白故里,泸定桥);varhb=newArray(武当山,襄阳城,昭君台);varsc=[富乐山,李白故里,泸定桥“];varhb=[武当山,襄阳城,昭君台“];也可以定义为：数组的应用－省市级联特效获取选择的服务器省份并进行判断，根据判断结果决定遍历哪个服务器数组varprovince=document.getElementById(province).value;if(province==四川){//清空下拉列表框中的选项document.getElementById(server).options.length=0;for(variinsc){......}}数组的应用－省市级联特效使用document.createElement方法为服务器数组中的每个元素创建option对象,并将option对象添加到下拉列表的options数组中varop=document.createElement(option);op.text=sc[i];op.value=sc[i];document.getElementById(serve