JavaScript程序设计基础教程-第8章-表单.pptx

1、JavaScript程序设计程序设计第第8章章 表单表单8.1 表单基础8.2 表单验证8.3 实战：注册表单验证JavaScript程序设计程序设计 表单常用属性和方法 （1）acceptCharset：服务器能够处理的字符集；等价于HTML中的accept-charset特性。（2）action：接收请求的URL；等价于HTML中的action特性。（3）elements：表单中所有控件的集合。（4）enctype：请求的编码类型；等价于HTML中的enctype特性。（5）length：表单中控件的数量。（6）method：要发送的HTTP请求，通常是get或post；等价于HTML的m

2、ethod特性。（7）name：表单的名称；等价于HTML的name特性。8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 表单常用属性和方法 （8）reset()：将所有表单域重置为默认值。（9）submit()：提交表单。（10）target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 提交表单Submitfunction doSubmitForm()var form=document.getElementById(test-form);/可以在此进行表

3、单验证 form.submit();/验证完毕提交form:8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 重置表单var form=document.getElementById(myForm);form.reset();/重置表单 8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 表单字段访问 （1）var form=document.getElementById(form1);（2）var field1=form.elements0;/取得表单中的第一个字段 （3）var field2=form.elementstextb

4、ox1;/取得名为textbox1的字段 （4）var fieldCount=form.elements.length;/取得表单中包含的字段的数量8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 共有的表单字段属性 （1）disabled：布尔值，表示当前字段是否被禁用。（2）form：指向当前字段所属表单的指针；只读。（3）name：当前字段的名称。（4）readOnly：布尔值，表示当前字段是否只读。（5）tabIndex：表示当前字段的切换（tab）序号。（6）type：当前字段的类型，如checkbox、radio，等等。（7）value：当前字段将被

5、提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件 在计算机中的路径。8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 共有的表单字段方法 （1）focus()方法用于将浏览器的焦点设置到表单字段。（2）blur()方法用于是从元素中移走焦点。8.1 8.1 表单基础表单基础第8章 表单JavaScript程序设计程序设计 共有的表单字段事件 （1）blur：当前字段失去焦点时触发。（2）change：对于和元素，在它们失去焦点且 value 值改变时触发；对于 元素，在其选项改变时触发。（3）focus：当前字段获得焦点时触发。8.1 8.1 表单

6、基础表单基础第8章 表单JavaScript程序设计程序设计 表单验证处理 （1）首先定义一个基础的表单（从标准来讲每一个元素都一定要存在有一个ID属性）。（2）需要对于表单的输入数据进行验证。（3）第二步操作中代码只是取得了最简单的验证处理，但是发现表单还是不能够进行有效的拦截的，因为如果要想拦截表单，需要的是onsubmit事件，这个事件的特点是如果返回了false，那么就不提交表单，如果返回的是true，表示的是提交表单。8.2 8.2 表单验证表单验证第8章 表单JavaScript程序设计程序设计 实战 （1）案例）案例描述描述 用JavaScript实现简单的注册模块表单验证。（2）实现思路）实现思路 1）首先利用html+css制作简单的注册模块界面；2）添加JavaScript的class相关处理函数；3）运用JavaScript验证各个输入框的值；4）为各个输入框添加监听事件；5）点击提交注册时触发form表单onsubmit事件从而调用check()函数；8.3 8.3 实战：注册表单验证实战：注册表单验证第8章 表单JavaScript程序设计程序设计 表单基础 表单验证总结总结第7章 表单JavaScript程序设计程序设计