1、第十一章第十一章学习目标学习目标掌握表单事件和脚本函数实现表单验证掌握String对象和文本框控件常用属性和方法实现客户端验证了解JavaScript和CSS的交互 11.1 11.1 表单验证表单验证使用 JavaScript 进行表单验证，不但能检查用户输入的无效或错误数据，还能检查用户遗漏的必须项，从而减轻服务器端的压力，避免服务器端的信息出现错误，保证输入的数据符合要求11.1.111.1.1表单验证的内容表单验证的内容需要验证的内容通常包括日期是否有效或日期格式是否正确表单元素是否为空用户名和密码E-mail地址是否正确身份证号码等是否是数字11.1.2 11.1.2 表单验证表单验
2、证当输入的表单数据不符合要求时，通常会进行提示获得表单元素值，该值一般为string类型；使用JavaScript的一些方法对数据进行判断；当表单提示时，触发 onsubmit事件，对获取的数据进行验证。11.1.3 string11.1.3 string对象对象String对象通常用于操作和处理字符串，可以在程序中获得字符串长度，对一个字符串按指定的样式显示，提取子字符串，求一个字符串中指定位置的字符以及将字符串转换为大写或小写字符。1.字符串对象的属性 length属性，它表示字符串的长度（包括空格等），语法如下 字符串对象.length;2.字符串对象的方法在JavaScript中，字符
3、串对象的使用方法语法字符串对象.方法名();indexOf()方法 indexOf(“查找的字符串”,index)，如果找到了则返回找到的位置，否则返回-1.采用JavaScript中indexOf()等方法实现电子邮件格式的验证。当在如图11.4所示的Email文本框中没有输入任何内容时单击“登录”按钮，将会弹出如图11.5左边所示的提示框，提示“Email不能为空”,当输入“test”再单击“登录”按钮时，将会弹出如图11.5中间所示的提示框，提示“Email格式不正确，必须包含”，当输入”test“时，再单击”登录“按钮，将会弹出如图11.5右边所示的对话框，提示”Email格式不正确，
4、必须包含.“，只有在Email地址中包含”和”.”符号时，其才是有效的Email地址。思路分析先获取表单元素（Email文本框）的值（String类型），然后进行判断使用getElementById()获取表单元素Email的值使用字符串方法indexOf()判断Email的值是否包含“”和“.”符号。根据函数返回值是true还是flase来决定是否提交表单在函数check()中需要验证Email是否为空验证Email中是否包含符号”“和”.“，var mail=document.getElementById(“email”),value;if(mail=”)alert(“Email不能为空不
5、能为空”);return false;if(mail.indexOf(“”)=-1)alert(“Email格式不正确格式不正确n必须包含必须包含”)；return false;if(mail.indexOf(“.”)=-1)alert(“Email格式不正确格式不正确n必须包含必须包含.”);return false;如果Email文本框中输入的内容不合要求，将弹出如图11.5所示的提示框。如果用户在Email文本框中输入了正确的电子邮件地址，那么单击“登录”按钮之后，将显示success.html网页。如图11.6所示。实例实例11-1：电子邮件格式的验证：电子邮件格式的验证11.2 11
6、.2 文本框特效文本框特效在网上注册或填写各种表单时，经常会有某些文本框中显示自动提示信息，如图11.7所示的Email自动提示文本，当单击此文本框时提示文本自动被清除，文本框的效果发生变化，如图11.8所示。使用文本框对象的相关属性、事件和方法可以实现此效果。11.2.1 11.2.1 文本框对象文本框对象在HTML DOM中，文本框作为一个对象，每个文本框都有自己的方法和事件，通过这些方法和事件可改变文本框的效果11.2.2 11.2.2 制作文本输入提示特效制作文本输入提示特效应用文本框事件来动态地改变文本框的效果以登录页面中的邮箱文本输入框为例 文本框自动显示提示输入正确电子邮箱的信息
7、。单击文本框时，清除自动提示的文本，并且文本框的边框变为红色。单击登录按钮时，验证Email文本框不能为空，并且必须包含字符和.。当用户输入无效的电子邮件地址，单击登录按钮将弹出错误的提示信息框。单击提示信息框上的“确定”按钮之后，Email文本框中的内容将被自动选中并且高亮显示，提示用户重新输入，如图11.9所示。当鼠标单击文本框时清楚自动提示的文本信息，使用onfoucs事件，通过光标移入文本框，然后调用自定义函数clearText，把文本框的值（value）设为空即可 当Email文本框没有输入任何内容时，弹出的Email不能为空的信息，单击“确定”按钮后，Email文本框获得焦点，使用
8、focus()方法 自动选中Email文本框中的内容并且高亮显示，要使用文本框的select()方法，var mail=document.getElementById(“email”);if(mail.value=”请输入正确的电子邮箱请输入正确的电子邮箱”)mail.value=”;mail.style.borderColor=”#ff0000”;document.getElementById(“email”).focus();document.getElementById(“email”).select();如果Email文本框中输入的内容不合要求，将弹出如图11.5所示的提示框。如果用户
9、在Email文本框中输入了正确的电子邮件地址，那么单击“登录”按钮之后，将显示success.html网页。如图11.6所示。function check()var mail=document.getElementById(email).value;if(mail=)/检测检测Email是否为空是否为空alert(Email不能为空不能为空);document.getElementById(email).focus();return false;if(mail.indexOf()=-1|mail.indexOf(.)=-1)alert(Email格式不正确格式不正确n必须包含符号必须包含符号和
10、和.);document.getElementById(email).focus();document.getElementById(email).select();return false;return true;function clearText()var mail=document.getElementById(email);if(mail.value=请输入正确的电子邮箱请输入正确的电子邮箱)mail.value=;mail.style.borderColor=#ff0000;实例实例11-2：文本输入提示特效：文本输入提示特效11.3 JavaScript11.3 JavaScri
11、pt访问样式的应用访问样式的应用在浏览网站时，一些网页上经常会显示各种随滚动条同步滚动的广告图片，该效果可以美化网页并且可以进行宣传以提高知名度和实现盈利。思路分析：把广告图片放在一个div中，并且div总是显示在页面的上方 使用getElementById()方法获取层对象，并且获取层在页面上的初始位置 根据鼠标滚动事件，获取滚动条滚动的距离 随着滚动条的移动改变层在页面上的位置11.3.1 11.3.1 获取样式属性值获取样式属性值在css中可以使用样式为每个元素设置位置，在DOM的style对象中也有对应的元素定位属性，在style对象中的positioning属性如表11.3所示。在页
12、面中有一个层，使用style属性获取层在页面中的位置。function place()var divObj=document.getElementById(test);alert(上：上：+divObj.style.top+n左左：+divObj.style.left);测试测试实例实例11-3：获取样式属性值：获取样式属性值 如果要获取内部样式表或外部样式表中的属性值，可以使用currentStyle对象 使用方式如下var objTop=divObj.currentStyle.top;function place()var divObj=document.getElementById(te
13、st);alert(上：上：+divObj.currentStyle.top+n左左：+divObj.currentStyle.left);测试测试实例实例11-4：获取层位置：获取层位置11.3.211.3.2制作随鼠标滚动的广告图片制作随鼠标滚动的广告图片使用currentStyle或getComputedStyle()可以获得层在网页中的位置，如果要获取滚动条滚动的距离，需要使用scrollTop、scrollLeft属性在页面中有很多事件可以用来触发浏览器的行为，如表11.5所示的事件是制作该效果的常用事件。（1）图片放在一个层中，使用CSS样式设置层的初始位置（2）页面加载时，获取图
14、片所在层的具体位置，即页面的left和top位置。（3）获取页面初始位置时，要判断当前浏览器的类型，本例只判断是IE还是fireFox（4）当滚动条滚动时，获取滚动条距离页面顶端和左侧的距离，同时改变层距离顶端和左侧的位置。dverObject=document.getElementById(adver);/获得层对象获得层对象 if(adverObject.currentStyle)adverTop=parseInt(adverObject.currentStyle.top);adverLeft=parseInt(adverObject.currentStyle.left);elseadve
15、rTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+px;adverObject.style.left=adverLeft+parseInt(document.documentElemen
16、t.scrollLeft)+px;在页面中有一个层，使用style属性获取层在页面中的位置。function inix()adverObject=document.getElementById(adver);/获得层对象获得层对象function move()adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+px;adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+px;window.on
17、load=inix;window.onscroll=move;实例实例11-5：制作随鼠标滚动的广告图片：制作随鼠标滚动的广告图片11.411.4使用下拉列表框实现级联效果使用下拉列表框实现级联效果下拉框联动效果用于在两个或多个内容相关联的下拉框中选取数据，比如地址填写时，需要先选择省份再根据省份选择城市下拉列表框使用和两个标签共同创建。Select对象代表HTML表单中的一个下拉列表框，option对象代表HTML表单中下拉列表框中的一个选项。11.4.111.4.1下拉列表框对象下拉列表框对象1、select对象常用事件、方法和属性2、Option对象常用属性text：设置或返回某个选项的
18、纯文本值value：设置或返回被送往服务器的值 Select对象的属性应用function get()var index=document.getElementById(fruit).selectedIndex;var len=document.getElementById(fruit).length;var show=document.getElementById(show);show.innerHTML=被选选项的索引号为：被选选项的索引号为：+index+下拉列下拉列表选项数目为：表选项数目为：+len;实例实例11-6：select对象的属性值对象的属性值 3、add()方法 Add方
19、法用于向中添加一个标签，语法如下。下拉列表框对象.add(new,old)new表示新添加到old之前的option对象，如果old为null，则new直接添加到select的末尾。也可以采用简单的添加下拉菜单方法。var newoption=document.createElement(“option”);newoption.text=”南昌市南昌市”;/列表中显示的值列表中显示的值newoption.value=”0791”;/送到服务器的值送到服务器的值document.getElementById(“city”).add(newoption,null);var newoption=ne
20、w Option(“南昌市南昌市”,”0791”);document.getElementById(“city”).add(newoption,null);根据onchange事件来判断选择了哪个省，然后显示对应的城市列表。var province=document.getElementById(selProvince).value;var city=document.getElementById(selCity);city.options.length=0;switch(province)case 江西省江西省:city.add(new Option(南昌市南昌市,南昌市南昌市),null)
21、;city.add(new Option(九江市九江市,九江市九江市),null);break;实例实例11-7：省市级联效果：省市级联效果11.4.2 11.4.2 数组数组1、数组创建数组 var 数组名称=new Array(size);为数组元素赋值 var fruit=new Array(apple,orange,peach,bananer);访问数组 数组名下标2、数组的常用属性和方法 3、数组方法的应用 使用sort（）方法对数组元素进行排序，然后使用join（）方法把数组元素放入一个字符串中，并使用“-”分隔数组元素，最后显示在页面中。var fruit=new Array(4
22、);fruit 0=apple;fruit 1=orange;fruit 2=peach;fruit 3=bananer;fruit.sort();var str=fruit.join(-);document.write(str);实例实例11-8：数组应用：数组应用 1、采用数组的文字下标 2、读取数组中的元素值var cityList=new Array();cityList江西省江西省=南昌市南昌市,九江市九江市;cityList河南省河南省=郑州市郑州市,洛阳市洛阳市;cityList湖北省湖北省=武汉市武汉市,宜昌市宜昌市;for(var i in cityList)document
23、.getElementById(show).innerHTML+=i+;for(var j in cityList)for(var k in cityListj)document.getElementById(show).innerHTML+=cityListjk+ document.getElementById(show).innerHTML+=“;11.4.3 11.4.3 数组方式实现省市级联效果数组方式实现省市级联效果 3、实现思路 创建两个下拉列表框，分别显示省份和城市，选择某一个省份时，使用onchange事件调用函数（changeCity()）使城市下拉列表
24、框中显示对应的城市，创建一个表示省份和城市对应的数组cityList -选择省份选择省份-选择城市选择城市-var cityList=new Array();cityList北京市北京市=朝阳区朝阳区,东城区东城区,西城区西城区,海淀区海淀区,宣武区宣武区,丰台区丰台区,怀柔怀柔,延庆延庆,房山房山;cityList其他其他=其他其他;11.4.3 11.4.3 数组方式实现省市级联效果数组方式实现省市级联效果 在函数changeCity（）中获取省份名称，然后与数组中的省份名称对比，把对应的城市名称添加到城市下拉列表框中，每次显示不同省份的城市名称前，要先把当前城市列表中的option选项清
25、除 页面加载时把省份名称添加到表示省份的下拉列表框中。function changeCity()var province=document.getElementById(selProvince).value;var city=document.getElementById(selCity);city.options.length=0;/清除当前清除当前city中的选项中的选项for(var i in cityList)if(i=province)for(var j in cityListi)city.add(new Option(cityListij,cityListij),null);11.
26、4.3 11.4.3 数组方式实现省市级联效果数组方式实现省市级联效果function allCity()var province=document.getElementById(selProvince);for(var i in cityList)province.add(new Option(i,i),null);window.onload=allCity;实例实例11-9：数组方式实现省市级联效果：数组方式实现省市级联效果小结小结客户端验证 使用javascript验证 使用正则表达式验证页面特效 页面广告、窗口特效、时钟特效 菜单特效、CSS样式特效、表单特效动态创建元素 表格行的动态添加和修改 动态创建或改变div的内容
