浏览器对象.pptx

第8章浏览器对象第8章 浏览器对象【学习目标学习目标】本章主要介绍常用的浏览器对象，通过本章的学习，读者可以达到以下学习目的：本章主要介绍常用的浏览器对象，通过本章的学习，读者可以达到以下学习目的：熟悉窗口对象（熟悉窗口对象（WindowWindow）熟悉文档对象（熟悉文档对象（documentdocument）熟悉表单对象（熟悉表单对象（formform）8.1 窗口（窗口（WindowWindow）对象）对象 n Window对象概述 n Window对象的属性和方法 n 打开和关闭窗口 n 定时打开窗口 在在HTML中中打打开开对对话话框框应应用用极极为为普普遍遍，但但也也有有一一些些缺缺陷陷。用用户户浏浏览览器器决决定定对对话话框框的的样样式式，设设计计者者左左右右不不了了其其对对话话框框的的大大小小及及样样式式，但但JavaScript给给了了程程序序这这种种控控制制权权。在在JavaScript中可以使用中可以使用Window对象来实现对对话框的控制。对象来实现对对话框的控制。Window对象概述Window对对象象代代表表的的是是打打开开的的浏浏览览器器窗窗口口。通通过过Window 对对象象可可以以控控制制窗窗口口的的大大小小和和位位置置、由由窗窗口口弹弹出出的的对对话话框框、打打开开窗窗口口与与关关闭闭窗窗口口，还还可可以以控控制制窗窗口口上上是是否否显显示示地地址址栏栏、工工具具栏栏和和状状态态栏栏等等栏栏目目。对对于于窗窗口口中中的的内内容容，Window对对象象可可以以控控制制是是否否重重载载网网页页、返返回回上上一一个个文档或前进到下一个文档。文档或前进到下一个文档。在在框框架架方方面面，Window对对象象可可以以处处理理框框架架与与框框架架之之间间的的关关系系，并并通通过过这这种种关关系系在在一一个个框框架架处处理理另另一一个个框框架架中中的的文文档档。Window对对象象还还是是所所有有其其他他对对象象的的顶顶级级对对象象，通通过过对对Window对对象象的的子子对对象象进进行行操操作作，可可以以实实现现更更多多的的运运态态效效果果。Window对对象象作作为为对对象象的的一一种种，也也有有着着其自己的方法和属性。其自己的方法和属性。Window对象的属性和方法1Window对象的属性对象的属性顶顶层层WindowWindow对对象象是是所所有有其其他他子子对对象象的的父父对对象象，它它出出现现在在每每一一个个页页面面上上，并并且且可可以以在在单单个个JavaScriptJavaScript应用程序中被多次使用。应用程序中被多次使用。为为了了便便于于读读者者的的学学习习，本本节节将将WindowWindow对对象象中中的的属属性性以以表表格格的的形形式式进进行行详详细细说说明明。WindowWindow对对象象的的属性以及说明如表属性以及说明如表8.18.1所示。所示。Window对象的属性和方法2Window对象的方法对象的方法除了属性之外，除了属性之外，WindowWindow对象还拥有很多方法。对象还拥有很多方法。WindowWindow对象的方法以及说明如表对象的方法以及说明如表8.28.2所示。所示。打开和关闭窗口通通过过JavaScriptJavaScript脚脚本本的的open()open()方方法法和和close()close()方方法法可可以以打打开开和和关关闭闭新新窗窗口口。下下面面主主要要介介绍绍open()open()方法，其语法格式如下。方法，其语法格式如下。WindowVar=window.open(url,windowname,location);WindowVar=window.open(url,windowname,location);WindowVarWindowVar：当当前前打打开开窗窗口口的的句句柄柄。如如果果open()open()方方法法成成功功，则则WindowVarWindowVar的的值值为为一一个个WindowWindow对对象象的句柄，否则的句柄，否则WindowVarWindowVar的值是一个空值。的值是一个空值。urlurl：目目标标窗窗口口的的URLURL。如如果果URLURL是是一一个个空空字字符符串串，则则浏浏览览器器将将打打开开一一个个空空白白窗窗口口，允允许许用用writewrite()()方法创建动态方法创建动态HTMLHTML。windownamewindowname：windowwindow对象的名称。对象的名称。locationlocation：对窗口属性进行设置，其可选参数如表：对窗口属性进行设置，其可选参数如表8.38.3所示。所示。打开和关闭窗口例例8.1 8.1 下下面面设设计计一一个个有有三三个个超超链链接接的的页页面面，单单击击这这些些链链接接时时可可以以打打开开、关关闭闭新新窗窗口口，以以及及关关闭闭本本身身窗窗口口，程序代码如下。程序代码如下。打开和关闭窗口var mywindow;function openmywindow()mywindow=open(mywindow.html,myWindow,height=80,width=300,top=10,left=0);function closemywindow()mywindow.close();打开新窗口关闭新窗口关闭本窗口（1 1）在在上上述述代代码码中中，的的hrefhref属属性性指指定定的的是是JavaScriptJavaScript语语句句，意意思思是是单单击击这这个个超超链链接接时时就就执执行行其其指定的指定的JavasSriptJavasSript脚本。脚本。（2 2）函数）函数openmywindow()openmywindow()调用调用windowwindow对象的对象的openopen方法打开一个大小为方法打开一个大小为80*30080*300的新窗口。的新窗口。（3 3）由由于于变变量量mywindowmywindow是是全全局局变变量量，因因此此mywindow.close();mywindow.close();这这行行代代码码的的就就是是关关闭闭函函数数openmywindow()openmywindow()所所打开的新窗口。打开的新窗口。课堂练习1v首先弹出输入对话框提示用户输入姓名，然后弹出确认对话框确认是否已经成年，如果成年弹出“欢迎光临”警告对话框，进入页面后，状态栏显示“欢迎*”；否则弹出“未成年人请先离开！”警告对话框。定时打开窗口定时打开窗口主要使用定时打开窗口主要使用windowwindow对象对象setTimeout()setTimeout()方法，其语法格式如下。方法，其语法格式如下。setTimeout（function,milliseconds）functionfunction：要调用的：要调用的JavaScriptJavaScript自定义函数名称。自定义函数名称。millisecondsmilliseconds：设置超时时间（以毫秒为单位）。：设置超时时间（以毫秒为单位）。例例8.2 下面设计一个页面，下面设计一个页面，5秒钟后自动打开另一个窗口，程序代码如下。秒钟后自动打开另一个窗口，程序代码如下。定时打开窗口课堂练习2v熟练掌握Window对象属性和方法的使用（1）网页中有“开始滚动”按钮、“停止滚动”按钮和“滚动状态栏”按钮。按钮下方为一定篇幅的文字。（2）编写函数，实现页面每隔500毫秒向下滚动10像素，并设置当单击“开始滚动”按钮时调用此函数（3）当单击“停止滚动”按钮时页面停止滚动（4）编写函数实现状态栏文字“JavaScript&Ajax网页开发技术”从左向右滚动，单击“滚动状态栏”按钮时调用该函数Navigator对象vNavigator对象通常用于检测浏览器和操作系统的类型v属性：appName：浏览器的名字userAgent：浏览器用于HTTP请求的user-agent值v方法：javaEnabled()：检测当前的浏览器是否支持并启用了JavaHistory对象vHistory对象保存浏览器的网页历史记录信息v属性：Length：浏览器历史记录中的URL个数v方法：Back()：后退到上一页面Forward()：前进到下一个页面Location对象v定位到某一个URL：Window.location=“http:/”课堂练习3v打开网页时会同时出现一个广告窗口，8秒后该广告窗口自动关闭课堂练习4v当打开网页时，浏览器的窗口自动由小变大，当单击页面中的“打开”窗口链接时，会弹出一个由小变大的新窗口。新窗口中有一个可用于关闭该窗口的链接，当关闭新窗口时会弹出一个警告对话框，显示欢送用户信息课堂练习5v熟练掌握各种浏览器对象属性和方法的使用（1）弹出输入对话框，提示用户输入年龄，并将获取的值保存到一个变量中（2）判断年龄的大小，如果大于等于18岁则打开新的窗口，新窗口的宽为400px，高为200px，有状态栏，并设置状态栏的文字为“欢迎光临”在打开新窗口后自动关闭原来窗口如果年龄小于18岁，则弹出警告对话框，显示“对不起，禁止访问！”8.2 文档文档(document)(document)对象对象 n Window对象概述 n document对象概述 n document对象的常用属性、方法和事件 n 文档对象的应用 document对象概述文文档档对对象象（documentdocument）代代表表浏浏览览器器窗窗口口中中的的文文档档，该该对对象象是是windowwindow对对象象的的子子对对象象，由由于于windowwindow对对象象是是DOMDOM对对象象模模型型中中的的默默认认对对象象，因因此此windowwindow对对象象中中的的方方法法和和子子对对象象不不需需要要使使用用windowwindow来来引引用用。通通过过documentdocument对对象象可可以以访访问问HTMLHTML文文档档中中包包含含的的任任何何HTMLHTML标标记记并并可可以以动动态态的的改改变变HTMLHTML标标记记中中的的内内容容。例例如如表表单单、图图像像、表表格格和和超超链链接接等等。该该对对象象在在JavaScript JavaScript 1.01.0版版本本中中就就已已经经存存在在，在在随随后后的的版版本本中又增加了几个属性和方法。中又增加了几个属性和方法。documentdocument对象层次结构如图对象层次结构如图8.38.3所示。所示。document对象的常用属性、方法和事件1document对象的属性对象的属性document对象常用的属性及说明如表对象常用的属性及说明如表8.4所示。所示。document对象的常用属性、方法和事件2document对象的方法对象的方法document对象的常用方法和说明如表对象的常用方法和说明如表8.5所示。所示。3document对象的事件对象的事件文文档档对对象象有有onload事事件件和和onunload事事件件。onload事事件件发发生生于于装装载载网网页页后后，onunload事事件件发发生生于于离开网页前。离开网页前。文档对象的应用例例8.3 单击页面中的按钮后打开一个新窗口，并在窗口中输出新的内容如图单击页面中的按钮后打开一个新窗口，并在窗口中输出新的内容如图8.4所示。所示。程序代码如下：程序代码如下：打开新窗口并输出内容!-function oc()var dw;dw=window.open();dw.document.open();dw.document.write(一个新的窗口);dw.document.write();dw.document.write()dw.document.write(富贵牡丹);dw.document.write();dw.document.close();-课堂练习6v设置若干超链接（百度、Google、新浪、网易、雅虎、CSDN）和一个按钮，单击按钮弹出新窗口，在新窗口中显示原文档的链接个数（document.links.length），并将原文档中的链接地址输出到新文档课堂练习7v页面上有图片区域和6个按钮：第一张、上一张、下一张、最后一张、幻灯片播放、停止播放。要求单击这些按钮时可以实现相应的功能。使用JavaScript完成多媒体控制v音频v视频vFlash动画课堂练习8v为课堂练习7添加声音，在幻灯片切换时加入声音使用JavaScript操作CookievCookie写入vCookie读取v删除CookievCookie对象的有效期限课堂练习9v页面运行时判断浏览器端是否存在已有的用户名，如果没有，则创建，如果有，则输出“你好，*，欢迎光临”。8.3 表单表单(form)(form)对象对象 n 认识表单对象 n form对象的属性、方法和事件 认识表单对象表表单单对对象象是是文文档档对对象象的的一一个个元元素素，它它含含有有多多种种格格式式的的对对象象储储存存信信息息，使使用用它它可可以以在在JavaScript脚脚本本中中编编写写程程序序进进行行文文字字输输入入，并并可可以以用用来来动动态态改改变变文文档档的的行行为为。在在页页面面中中定定义义表表单单后后，通通常常需需要要使使用用JavaScript语语言验证表单数据，在言验证表单数据，在JavaScript中验证表单数据需要使用窗体对象的属性、方法和事件。中验证表单数据需要使用窗体对象的属性、方法和事件。JavaScript语语言言的的最最大大优优点点在在于于可可以以处处理理页页面面中中的的表表单单，可可以以在在表表单单数数据据提提交交服服务务器器之之前前对对用用户户输输入入的的数数据据进进行行有有效效的的检检查查，如如果果不不符符合合规规则则，则则弹弹出出错错误误提提示示对对话话框框，告告知知用用户户错错误误信信息息。由由于于这这些些验验证证工工作作都都是是在在客客户户端端完完成成，当当用用户户输输入入正正确确信信息息后后浏浏览览器器才才会会将将这这些些信信息息提提交交到到服服务务器器端端，这这样样处处理理可可以以降降低低系系统统的复杂性，提高了页面加载速度。的复杂性，提高了页面加载速度。form对对象象包包含含一一个个elements数数组组，elements数数组组中中的的每每个个元元素素用用于于表表示示表表单单元元素素的的值值。form对对象象及及其其子对象的关系如图子对象的关系如图8.5所示。所示。从从上上图图可可以以看看出出，一一个个Document对对象象可可以以包包含含多多个个Form对对象象，一一个个Form对对象象也也可可以以包包含含多多个个Elements对象，可以相应使用数组下标访问这些表单元素。对象，可以相应使用数组下标访问这些表单元素。form对象的属性、方法和事件当当用用户户在在网网页页中中添添加加了了标标签签后后，就就创创建建了了一一个个form对对象象，这这时时可可以以在在JavaScript代代码码中中根根据据form对象的属性、方法和事件来实现各种功能。对象的属性、方法和事件来实现各种功能。1窗体对象属性窗体对象属性窗体对象的属性对应于页面中表单的属性，窗体对象的具体属性如表窗体对象的属性对应于页面中表单的属性，窗体对象的具体属性如表8.6所示。所示。form对象的属性、方法和事件例例8.4 在在页页面面表表单单中中的的应应用用窗窗体体对对象象属属性性，在在JavaScript代代码码中中根根据据窗窗体体对对象象的的属属性性将将两两个个表表单单中的元素名称输出到页面中，程序代码如下。中的元素名称输出到页面中，程序代码如下。  用户名：性  别：男 女 电  话：E-mail:form对象的属性、方法和事件 联系地址：  for(var j=0;jdocument.forms.length;j+)document.write(第+(j+1)+个表单,其中包括的元素名称为：);for(var i=0;i0)document.write(,);document.write(element.name);form对象的属性、方法和事件在在上上述述代代码码中中可可以以看看出出，使使用用“document.forms1.length”语语句句可可以以取取得得页页面面中中表表单单的的个个数数，根根据据 此此 个个 数数 循循 环环，在在 该该 循循 环环 中中 嵌嵌 套套 循循 环环，以以 表表 单单 中中 元元 素素 个个 数数 为为 终终 止止 条条 件件，最最 后后 使使 用用“document.formsj.elementsi.name”语语句句获获取取每每个个表表单单中中的的元元素素名名称称。运运行行结结果果如如图图8.6所所示。示。form对象的属性、方法和事件2窗体对象方法窗体对象方法窗窗体体对对象象有有两两个个方方法法，分分别别为为submit()与与reset()方方法法，submit()方方法法用用于于提提交交一一个个表表单单，不不需需要要使使用用提提交交按按钮钮（即即使使用用标标记记定定义义的的按按钮钮）来来提提交交表表单单，reset()方方法法用用于于清清除除一一个个表表单单的的数数据据，不不需需要要使使用用重重置置按按钮钮（即即使使用用input type=reset标标记记定定义义的的按按钮钮）来来重重置置表表单单。这这两两个个方方法法的的功功能能与与提提交交按按钮钮和和重重置置按按钮钮是是完完全全相相同同的的，当当表表单单使使用用这这两两个个方方法法时时，不不会会触触发发onSubmit和和onReset事件。事件。document.forms0.submit();document.forms0.reset();document.forms0.submit()：将页面中第一个表单进行提交。：将页面中第一个表单进行提交。document.forms0.reset()：将也面中第一个表单进行重置。：将也面中第一个表单进行重置。事实上，也可以在一般按钮上使用事实上，也可以在一般按钮上使用onClick事件处理表单提交或表单重置，语法如下。事件处理表单提交或表单重置，语法如下。onClick：触发单击事件关键字。：触发单击事件关键字。表表单单提提交交通通常常有有一一个个问问题题，如如果果用用户户多多次次提提交交，将将会会引引起起创创建建多多次次用用户户请请求求的的错错误误，为为了了避避免免这这样的错误，可以在表单提交后将表单提交按钮设置为禁用。样的错误，可以在表单提交后将表单提交按钮设置为禁用。form对象的属性、方法和事件例例8.5 限限制制页页面面中中的的表表单单只只提提交交一一次次的的功功能能。当当用用户户单单击击提提交交按按钮钮后后，提提交交按按钮钮就就被被禁禁用用，这这样样就实现用户不可以进行重复提交表单的功能。程序代码如下：就实现用户不可以进行重复提交表单的功能。程序代码如下：function submitone()trydocument.form1.elements0.disabled=true;document.form1.submit();catch(exception)alert(exception.message);从从上上述述代代码码中中使使用用一一般般按按钮钮的的onClick事事件件调调用用submitone()函函数数，在在submitone()函函数数中中设设置置表表单提交按钮禁用，然后进行表单提交。运行结果如图单提交按钮禁用，然后进行表单提交。运行结果如图8.7所示。所示。form对象的属性、方法和事件3窗体对象事件窗体对象事件JavaScript中中窗窗体体对对象象事事件件有有两两个个，分分别别为为onSubmit和和onReset，onSubmit事事件件是是当当用用户户单单击击“提提交交”按按钮钮时时触触发发，onReset事事件件是是当当用用户户单单击击“重重置置”按按钮钮时时触触发发。onSubmit事事件件和和onReset事事件件与与标标记记一一起起使使用用，并并且且必必须须放放在在标标记记之之前前。在在表表单单数数据据传传给给服服务务器器之之前前，通通常常使使用用onSubmit事事件件来来验验证证表表单单数数据据，当当用用户户单单击击表表单单“重重置置”按按钮钮时时会会触触发发一一个个onReset事件，可以使用这个事件来判断用户是否真的想要重置表单内容。事件，可以使用这个事件来判断用户是否真的想要重置表单内容。onSubmit：提交表单事件。：提交表单事件。onReset：重置表单事件。：重置表单事件。当使用当使用onSubmit和和onReset事件处理器时，需要返回事件处理器时，需要返回true和和false，下面举例说明。，下面举例说明。form对象的属性、方法和事件例例8.6 使使用用窗窗体体对对象象事事件件来来验验证证表表单单提提交交时时名名字字、地地址址文文本本框框是是否否为为空空，以以及及使使用用重重置置按按钮钮将将名名字与地址文本框设置为空，程序代码如下。字与地址文本框设置为空，程序代码如下。function submittest()tryif(document.forms0.name.value.length=0)alert(姓名不能为空);return false;if(document.forms0.tel.value.length=0)alert(电话为空);return false;catch(exception)alert(exception.message);return true;function resettest()alert(您确定要重置这个按钮);return true;form对象的属性、方法和事件姓名：电话：从从上上述述代代码码可可以以看看出出，在在表表单单中中使使用用了了onSubmit和和onReset事事件件，分分别别在在这这两两个个事事件件中中调调用用submittest()与与resettest()函函数数，在在submittest()函函数数中中，主主要要实实现现判判断断名名字字、地地址址文文本本框框是是否否为为空空的的功功能能，如如果果为为空空，弹弹出出相相应应的的提提示示对对话话框框，并并且且使使用用return false语语句句结结束束函函数数调调用用，在在resettest()函函数数中，将表单中的文本框内容重置。运行结果如图中，将表单中的文本框内容重置。运行结果如图8.8所示。所示。课堂练习10v制作手机使用意见调查表要求收集用户姓名、Email以及对手机使用的意见，单击“提交”按钮时可以打开另一个页面，在其中显示用户提交的资料；单击“重新输入”按钮时可以重置所有文本框。课堂练习11v在课堂练习10的基础上增加调查用户的年龄，分为：未满20岁，2029岁，3039岁，4049岁，50岁以上；以及用户曾经使用过的手机品牌，包括：诺基亚、摩托罗拉、爱立信、西门子。课堂练习12v在课堂练习11的基础上增加收集用户使用的移动运营商的信息，运营商列表包括：中国电信、中国联通、铁通、网通，可多选课堂练习13v网页中有一个选择框，选择框中列出网站名称，数量不限，每次从选择框中选择一个网站后，浏览器就会在新窗口中打开所选的网站。正则表达式基本语法v建立正则表达式：var expression=/expression/;var objExp=new RegExp(expression);v测试正则表达式是否匹配var bo=objExp.test(str);参数str表示要测试的字符串，bo为布尔类型，测试成功返回true，否则返回false正则表达式常用字符v特殊字符：s：匹配单个空格符，包括Tab键和换行符S：匹配除单个空格符之外的所有字符d：匹配从0到9的数字w：匹配字母、数字或下划线字符W：匹配所有与w不匹配的字符cx：匹配由x指明的控制字符。例如，cM匹配一个Ctrl+M的字符f：匹配一个换页符n：匹配一个换行符r：匹配一个回车符t：匹配一个制表符v：匹配一个垂直制表符.：用于匹配除换行符之外的所有字符正则表达式常用字符v特殊字符：*：匹配前导字符出现零次或多次+：匹配前导字符出现一次或多次？：匹配前导字符出现零次或一次n：匹配前导字符出现n次n,：匹配前导字符至少出现n次n,m：匹配前导字符最少出现n次且最多出现m次正则表达式常用字符v特殊字符：匹配模式必须出现在目标字符串的开头$：匹配模式必须出现在目标对象的结尾b：匹配模式必须出现在目标字符串的开头或结尾的两个边界之一B：匹配对象必须位于目标字符串的开头和结尾两个边界之内，即匹配对象既不能作为目标字符串的开头，也不能作为目标字符串的结尾正则表达式常用字符v特殊字符：指定范围v如：/A-Z/匹配从A到Z范围中的任何一个大写字母()：其中包含的内容必须同时出现在目标对象中v如：/(abc)0-9/，正确的是abc2，不正确的是ab2|：允许在多个不同的模式中任选一个进行匹配v如：/pt|ptt|2/表达式中，pt，ptt，2都是正确的：否定符，规定目标对象中不能存在模式中所规定的字符串v如：/D-F/表达式表示不能包含字母D、E、F：转义符，在特殊字符前使用，将特殊字符看作是普通字符v如：/12*/表示与12*匹配，不能与123匹配正则表达式常用字符v优先级顺序：()、*、+、?、n、n,、n,m、$|正则表达式实例v验证电子邮件地址：电子邮件地址由“用户名”+“”+“域名”组成用户名为一个字符串，可以包含数字和字母域名为一个字符串，必须包含一个“.”且“.”不得位于域名字符串的头部和末尾v电子邮件的正则表达式：/S+S+.S+$/正则表达式实例v验证信用卡号：必须由16位数字组成前两位数字必须是51-55之间的数可以将卡号数字分为4个组，每4个数字为一组，每组之间使用空格或短横线连接，如5133 3333 3333 3333或5233-3333-3333-3333v信用卡号的正则表达式：/51-5d2s|-?d4 s|-?d4 s|-?d4$/正则表达式实例v验证身份证号码：身份证号码的排列顺序是：6位数字地址码，8位数字出生日期码，3位数字顺序码，1位数字校验码地址码（前6位）：表示编码对象常住户口所在县（市、旗、区）的行政区域代码出生日期码（第7位至第14位）：表示编码对象出生的年、月、日，年、月、日之间不用分隔符顺序码（第15位至第17位）：表示在同一地址码所标识的区域范围内，对同年、同月和同日出生的人编定的顺序号，顺序码的奇数分配给男性，偶数分配给女性校验码（第18位）：作为尾号的校验码，是由号码编制单位按统一的公式计算出来的，如果某人的尾号是0-9，都不会出现X，但如果尾号是10，那么就得用X代替。v身份证号码的正则表达式：/d17(d|X)$/form对象的属性、方法和事件例例8.7 在在设设计计网网页页时时，经经常常会会遇遇到到注注册册页页面面，涉涉及及用用户户名名的的验验证证、密密码码框框的的验验证证、电电子子邮邮件件的的验验证证、网址的验证、电话的验证、日期的验证、电话号码的验证、网址的验证、电话的验证、日期的验证、电话号码的验证、Email验证等。验证等。（1）创创建建表表单单，在在表表单单中中设设置置表表单单元元素素。在在用用于于表表单单提提交交的的按按钮钮onClick事事件件中中调调用用设设置置表表单单提提交函数，在用于表单重置按钮的交函数，在用于表单重置按钮的onClick事件设调用设置表单重置的函数，关键代码如下。事件设调用设置表单重置的函数，关键代码如下。（2）在在提提交交函函数数中中验验证证表表单单元元素素的的必必填填项项是是否否为为空空，如如果果为为空空，弹弹出出相相应应的的提提示示对对话话框框。程程序序代代码如下。码如下。function submit1()if(document.all.username.value.length=0)alert(请填写用户名!);return false;if(document.all.realname.value.length=0)alert(请填写真实姓名!);return false;if(document.all.password1.value.length=0)alert(请填写密码!);return false;if(document.all.password2.value.length=0)alert(请填写密码!);return false;form对象的属性、方法和事件if(document.all.tel.value.length=0)alert(请填写联系电话!);return false;if(document.all.mail.value.length=0)alert(请填写电子邮件!);return false;if(document.all.lxdz.value.length=0)alert(请填写联系地址!);return false;if(document.all.password1.value!=document.all.password2.value)alert(两次密码输入不相符！);return false;（3）创创建建“检检查查用用户户名名”按按钮钮，在在该该按按钮钮的的onClick事事件件中中调调用用检检验验用用户户名名的的函函数数，要要求求用用户户名名由由3-10位位的的字字母母、数数字字和和下下划划线线组组成成，并并且且首首字字符符为为字字母母，如如果果不不合合法法将将弹弹出出提提示示对对话话框框。实实现现验验证证用用户户名名是是否否由由3-10位的字母、数字和下划线组成的正则表达式如下：位的字母、数字和下划线组成的正则表达式如下：/(w)3,10$/验证用户名的函数代码如下。验证用户名的函数代码如下。function checkeusername(username)var str=username;/在JavaScript中，正则表达式只能使用/开头和结束，不能使用双引号var Expression=/(w)3,10$/;var objExp=new RegExp(Expression);if(objExp.test(str)=true)return true;elsereturn false;form对象的属性、方法和事件（4）为为了了使使密密码码文文本本框框更更为为安安全全，笔笔者者对对密密码码文文本本框框做做了了设设置置，使使密密码码文文本本框框不不可可复复制制、剪剪切切，同时使用同时使用CSS改变了密码文本框的遮掩符号。关键代码如下。改变了密码文本框的遮掩符号。关键代码如下。上上述述代代码码中中使使用用密密码码文文本本框框的的oncopy、oncut、onpaste事事件件来来实实现现密密码码文文本本框框的的内内容容禁禁止止复复制制、剪剪切。切。（5）这这时时需需要要对对输输入入的的电电话话号号码码进进行行判判断断，需需要要定定义义电电话话号号码码文文本本框框验验证证函函数数，使使电电话话号号码码文文本本框输入值为数字。关键代码如下：框输入值为数字。关键代码如下：function checktel(tel)var str=tel;/在JavaScript中，正则表达式只能使用/开头和结束，不能使用双引号var Expression=/(d3-)?d8|(d4-)(d7)/;var objExp=new RegExp(Expression);if(objExp.test(str)=true)return true;elsereturn false;然后在提交按钮事件的函数中调用上述函数。关键代码如下：然后在提交按钮事件的函数中调用上述函数。关键代码如下：if(!checktel(document.all.tel.value)alert(电话输入不合法!电话为8位以上数字);return false;form对象的属性、方法和事件（6）在在数数据据录录入入页页面面中中，经经常常需需要要对对输输入入的的Email地地址址进进行行判判断断，可可以以通通过过正正则则表表达达式式实实现现。验验证证Email地址的正则表达式如下。地址的正则表达式如下。/w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/笔者定义一个验证笔者定义一个验证Email地址的函数，关键代码如下。地址的函数，关键代码如下。function checkemail(email)var str=email;var Expression=/w+(-+.w+)*w+(-.w+)*.w+(-.w+)*/;var objExp=new RegExp(Expression);if(objExp.test(str)=true)return true;elsereturn false;可以在提交按钮事件的处理函数中调用上述函数进行判断，关键代码如下。可以在提交按钮事件的处理函数中调用上述函数进行判断，关键代码如下。if(!checkemail(registerForm.mail.value)alert(您输入Email地址不正确!);registerForm.mail.focus();return false;form对象的属性、方法和事件（7）可以使用正则表达式对网址进行验证，实现验证网址是否合法的正则表达式如下：）可以使用正则表达式对网址进行验证，实现验证网址是否合法的正则表达式如下：http(s)?:/(w-+.)+w-+(/w-./?%&=*)?然然后后使使用用JavaScript编编写写一一个个用用于于验验证证网网址址是是否否合合法法的的checkeurl()函函数数，该该函函数数只只有有一一个个参参数数，用用于获取输入的网址，函数的返回值为于获取输入的网址，函数的返回值为true或或false。代码如下。代码如下。function checkeurl(url)var str=url;/在JavaScript中，正则表达式只能使用/开头和结束，不能使用双引号/判断url地址的正则表达式为:http(s)?:/(w-+.)+w-+(/w-./?%&=*)?/下面的代码中应用了转义字符输出一个字符/var Expression=/http(s)?:/(w-+.)+w-+(/w-./?%&=*)?/;var objExp=new RegExp(Expression);if(objExp.test(str)=true)return true;elsereturn false;可以在提交按钮事件的处理函数中调用上述函数进行判断，关键代码如下。可以在提交按钮事件的处理函数中调用上述函数进行判断，关键代码如下。if(!checkeurl(document.all.grzy.value)alert(个人主页地址输入不正确!);return false;form对象的属性、方法和事件（8）最最后后编编写写一一个个限限制制文文本本区区域域输输入入字字符符数数的的函函数数，在在页页面面中中文文本本区区域域的的onkeypress事事件件中中调调用用，关键代码如下。关键代码如下。function testTextArea(textArea)if(textArea.value.lengthtextArea.getAttribute(maxlength)alert(超出最大字数);运行结果如图运行结果如图8.9所示。所示。课堂练习14v完成用户注册表单的验证，验证规则如下：姓名、密码、确认密码必须填写姓名最小长度为4，只能由数字、字母、下划线组成密码不能含有空白字符，最小长度为6密码与确认密码要一致Email格式正确QQ需为数字形式至少选择一种编程语言v如果验证不通过，能够向用户提出警告习题1 1（）发生于装载网页后，（）发生于装载网页后，（）发生于离开网页前。）发生于离开网页前。A Aonloadonload事件事件B Bonunl