JavaScript程序设计教程 第8章 表单.pdf

第8章表单I 8.1表单基础OO 8.2表单验证OO8.3 实战OO8.4 小结O1 8.1表单基础在H TML中，表单是由form元素来表示的，而在JavaScript中,表单对应的则是H TMLFormElement类型。H TMLFormEleiiient继 承了H TMLElement,因而与其他H TML元素具有相同的默认属性。不 过，H TMLFormElement也有它自己下列独有的属性和方法。acceptCharset：服务器能够处理的字符集，等价于H TML中的A accept-char set 特性。action：接收请求的URL,等价于H TML中的act ion特性。q elements：装举由所有控件的集合。1 enctype：请求的编码类型，等价于H TML中的enctype特性。OoO length：表单中控件的数量。method：要发送的H TTP请求，通常是“get”或“post”,等价于H TML的method特性。name：表单的名称，等价于H TML的name特性。resetO：将所有表单域重置为默认值。submit()：提交表单。target：用于发送请求和接收响应的窗口名称，等价于 H TML 的 target 特性。og.”提委表单Q用户单击提交按钮或图像按钮或者用户在最后一个输入框 按回车键时，就会提交表单。这是浏览器默认的表单提交方式oOOOOQ使用1.叩成或1311此011都可以定义提交按钮，只要将其 type特性的值设置为“submit”即可，而图像按钮则是通过将 input的type特性值设置为“image”来定义的。因此，只要单击以下代码生成的按钮，就可以提交表跖input type=submit value=Submit Form）/通用提交按钮Submit Form/自定义提交按钮 p /图像按钮1 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可以提交该表单。（o textarea是一个例外，在文本区中回车会换行。）如果表单里 没有提交按钮，按回车键不会提交表单。用提交按钮或者图像按钮的方式提交表单可以在表单提交 到服务器之前响应form本身的onsubmit事件，对表单做控制 Oo oQo/7.2W及表单T 在用户单击重置按钮时，表单会被重置。使用type特性值为“reset”的input）或button都可以创建重置按钮，如下 面的例子所示。input type=reset value=Reset Form/通用重置按钮；Reset Form/自定义重置按钮 这两个按钮都可以用来重置表单。在重置表单时，所有表C单字段都会恢复到页面刚加载完毕时的初始值。oo如果某个字段的初始值为空，就会恢复为空；而带有默 认值的字段，也会恢复为默认值。即表单重置的时候依靠的 是defaultvalue属性。那么如果想更改单击重置时输入框的 默认值就可以这样做，先修改输入框的defaultvalue属性，再触发表单的reset事件。用户单击重置按钮重置表单时，会触发reset事件。也?可以在必要时取消重置操作。例如，下面展示了阻止重置表 A单的代码。Ovar form=document.getElementById(myForm);EventUtil.addHandler(form,“reset”,function(event)o event=EventUtil.getEvent(event);取得事件对象；EventUtil.preventDefault(event);阻止表单重置A 一与提交表单一样，也可以通过JavaScript来重置表单，如 下面的例子所示。var form=document.getElementBylcKmyForm);form,reset();重置表单?与调用submit()方法不同，调用reset()方法会像单击重置1按钮一样触发reset事件。表单庄段 可以像访问页面中的其他元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有elements属性，该属性是表单中?所有表单元素(字段)的集合。这个elements集合是一个有序列A表，其中包含着表单中的所有字段，例如input、textarea、1)111:1：011和豆31(1$31:。每个表单字段在elements集合中的顺!序，都与它们出现在标记中的顺序相同，可以按照位置和name特1性来访问它们。下面来看一个例子。var form=document.getElementById(/zforml/z);var fieldl=form,elements0;取得表单中的第一个字?段o var field2=form,elements z，textboxl，z;取得名为textboxl”的 字段var fieldCount=form,elements,length;取得表单中包含的字段?的数量。1.共有的表单字段属性除了fieldset元素之外，所有表单字段都拥有相同的 一组属性。由于input类型可以表示多种表单字段，因此有 T 些属性只适用于某些字段，但还有一些属性是所有字段所共L 有的。表单字段共有的属性如下。disabled：布尔值，表示当前字段是否被禁用。form：指向当前字段所属表单的指针；只读。力 name：当前字段的名称。readonly：布尔值，表示当前字段是否只读。9 tabindex：表示当前字段的切换（tab）序号。!type：当前字段的类型，如“checkbox”“radio”等。value：当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的，包含着文件在计算机中的路径。OoV 不能通过onclick事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：有的浏览器会在触发表单的 submit事件之前触发click事件，而有的浏览器则相反。对于 先触发click事件的浏览器，意味着会在提交发生之前禁用按 钮，结果永远都不会提交表单。因此，最好是通过submit事件 来禁用提交按钮。不过，这种方式不适合表单中不包含提交按 钮的情况；如前所述，只有在包含提交按钮的情况下，才有可 T能触发表单的submit事件。除了fieldset之外，所有表单字“段都有type属性。对于input元素，这个值等于H TML特性 type的值。对于其他元素，这个type属性的值如表8.1所列。Oo表8.1 type属性的值说明HTML示例type属性的值单选列表.*select-one n多选列表.“select-multiple”自定义按钮.“submit”自定义非提交按钮.“button自定义重置按钮.“reset”自定义提交按钮.SubmitnOo 2.共有的表单字段方法每个表单字段都有两个方法：focus()和blur()。其中，focus()方法用于将浏览器的焦点设置到表单字段，即激活表 上单字段，使其可以响应键盘事件。例如，接收到焦点的文本框 会显示插入符号，随时可以接收输入。使用focus()方法，可 以将用户的注意力吸引到页面中的某个部位。例如，在页面加3 载完毕后，将焦点转移到表单中的第一个字段。为此，可以侦听页面的load事件，并在该事件发生时在表单的第一个字段上?调用focus()方法，如下面的例子所示。J EventUtil.addHandler(window,load”,function(event)document,forms0.elements0.focus(););o 3.共有的表单字段事件除了支持鼠标、键盘、更改和H TML事件之外，所有表单字?段都支持下列3个事件。blur：当前字段失去焦点时触发。_ 口 change：对于1叩成和13*18血8元素，在它们失去焦点 且value值改变时触发；对于select）元素，在其选项改 i 变时触发。focus：当前字段获得焦点时触发。ooOo当用户改变了当前字段的焦点，或者我们调用了blur()或?focus()方法时，都可以触发blur和focus事件。这两个事件 工 在所有表单字段中都是相同的。但是，change事件在不同表 单控件中触发的次数会有所不同。对于input)和 o 元素，当它们从获得焦点到失去焦点且value值改变时，才会；触发change事件。对于select)元素，只要用户选择了不同 的选项，就会触发change事件；换句话说，不失去焦点也会 o 触发change事件。OO通常，可以使用focus和blur事件来以某种方式改变用户 界面，要么是向用户给出视觉提示，要么是向界面中添加额 外的功能（例如，为文本框显示一个下拉选项菜单）。而 change事件则经常用于验证用户在字段中输入的数据。例如，假设有一个文本框，我们只允许用户输入数值。此时，可 以利用focus事件修改文本框的背景颜色，以便更清楚地表明 这个字段获得了焦点。可以利用blur事件恢复文本框的背景 颜色，利用change事件在用户输入了非数值字符时再次修改 背景颜色。oQ8.2表单验证OJavaScript可用来在数据被送往服务器前对H TML表单中OO的输入数据进行验证。表单验证用于发生在服务器，客户端已经输入所有必要 的数据，然后按下提交按钮之后进行的一系列操作。如果一 些已被输入的客户端的数据已处在错误形式或者被简单地丢 失，则服务器必须将所有数据发送回客户端，并请求填写正 Q确的信息重新提交。这是一个漫长的过程，会增加服务器负 O担。熟练运用表单验证即可解决这一问题。Qo 在用户填写表单的过程中，往往需要编写一堆的验证操作,这样就可以保证提交的数据是正确的。那么下面用一个示例 来详细讲解表单验证的处理。(1)首先定义一个基础的表单(从标准来讲每一个元素都一定要存在有一个ID属性)如下。0；登录邮箱：登录/button0 o其中表单提交跳转的页面脚本pass,html定义如下。vh1表单验证通过！v/h1Q脚本 pass.html完整代码如脚本8-2所示。vtitleJavaScript的程序开发的表单提交事件处理v/title 登录邮箱:button type=submit“id=subBtn”登录v/button脚本82.html加载页面时显示如图8.2所示。不做任何操作直接单击“登录”按钮显示如图8.3所示。这里没有做任何校验即显示表单验证通过，显然是有问题的。登杲邮箱:登录表单验证通过!图8.2表单验证显示结果1图8.3表单验证显示结果2o(2)这样就需要对表单的输入数据进行验证。这个过程应该 T用JavaScript完成。习惯性的做法是直接找到“登录”按钮进 JL行验证。改进脚本8-3如下所示。OOOOvtitlejavascript的程序开发的表单提交事 件处理v/Mtle脚本83.htmlo登录邮箱:input type=text name=email id=email window.onload=function()document.getElementByld(,loginForm,).addEventListener(submit,function()var emailObj=document.getEleinentByld(emair);alert(emailObj.value);if(emailObj.value=)alert(“您还未输入登录邮箱，无法登录！”)；elsethis.submit();),false);)o在页面完成加载后进行动态事件绑定，首先通过表单id 找到表单对象并绑定一个提交表单事件；再通过邮箱元素id 找到邮箱元素对象；最后判断邮箱的值是否为空，如果是空T 则弹出警告框，如果不是空再提交表单。当不输入内容直接单击“登录”按钮时显示如图&4所示。一 当输入内容21221后单击“登录”按钮时显示如图8.5所 3 z5o此网页显示9 您还未输入登录邮箱,无法登录!禁皿页再显示对话框。确定Q图8.4表单验证显示结果3o此网页显示：21221确定X图8.5表单验证显示结果4Oo这里不管是否输入内容，只要单击了“确定”按钮，表O单就通过了，如图8.6所示。然而，这也是不对的:表单验证通过!OOO图8.6表单验证显示结果5Oo(3)第2步操作中代码只是取得了最简单的验证处理，但是?发现表单还是不能够进行有效拦截的，因为如果要想拦截表单 A，需要的是onsubmit事件，这个事件的特点是如果返回了 false,那么就不提交表单，如果返回的是true,表示的是提 o交表单。ooo8.3实战【案例8-111.案例描述注册表单验证oo用JavaScript实现简单的注册模块表单验证。2.实现思路ooo(1)(2)(3)(4)(5)首先利用html+css制作简单的注册模块界面。添加JavaScript的class相关处理函数。运用JavaScript验证各个输入框的值。为各个输入框添加监听事件。最后就是单击提交注册时触发form表单onsubmit事件从而调用check。函数。3.实现代码页面加载完成显示如图8.14所示。表单内容为空单击“Register”按钮显示如图8.15所表单内容填写正确后显示如图8.16所示。图8J4案例81运行结果1oQRegisterRegisterUserName:V/angPassword:Password Again:.Email：252468 Register图8.15案例81运行结果2 图8.16案例81运行结果3o 8.4小结?本章介绍了JavaScript表单基础知识、表单提交重置以及i表单的验证等相关操作。在Web应用开发中，使用JavaScript大 大提升了表单的易用性。尤其是JavaScript十分便捷的表单验o证功能，在客户端进行验证，响应速度异常之快，也减轻了服!务器端的压力，避免服务器端的信息出现错误。从而给Web开发!带来了很大的便利。O