JavaScript程序设计基础教程-第8章-表单课件

JavaScript程序设计JavaScript程序设计1第8章表单8.1表单基础8.2表单验证8.3实战：注册表单验证JavaScript程序设计第8章表单8.1表单基础8.2表单验证8.3实战：2

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

表单常用属性和方法（8）reset()：将所有表单域重置为默认值。（9）submit()：提交表单。（10）target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。

8.1表单基础第8章表单JavaScript程序设计表单常用属性和方法8.1表单基础第8章表单JavaSc4

提交表单<formid="test-form"> <inputtype="text"name="test"> <buttontype="button"onclick="doSubmitForm()">Submit</button></form><script> functiondoSubmitForm(){

varform=document.getElementById('test-form');//可以在此进行表单验证

form.submit();//验证完毕提交form:

}</script>8.1表单基础第8章表单JavaScript程序设计提交表单8.1表单基础第8章表单JavaScript程5

重置表单varform=document.getElementById("myForm");form.reset();//重置表单8.1表单基础第8章表单JavaScript程序设计重置表单8.1表单基础第8章表单JavaScript程6

表单字段访问（1）varform=document.getElementById("form1");（2）varfield1=form.elements[0];//取得表单中的第一个字段

（3）varfield2=form.elements["textbox1"];//取得名为"textbox1"的字段

（4）varfieldCount=form.elements.length;//取得表单中包含的字段的数量8.1表单基础第8章表单JavaScript程序设计表单字段访问8.1表单基础第8章表单JavaScrip7

共有的表单字段属性（1）disabled：布尔值，表示当前字段是否被禁用。（2）form：指向当前字段所属表单的指针；只读。（3）name：当前字段的名称。（4）readOnly：布尔值，表示当前字段是否只读。（5）tabIndex：表示当前字段的切换（tab）序号。（6）type：当前字段的类型，如"checkbox"、"radio"，等等。（7）value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。8.1表单基础第8章表单JavaScript程序设计共有的表单字段属性8.1表单基础第8章表单JavaSc8

共有的表单字段方法（1）focus()方法用于将浏览器的焦点设置到表单字段。（2）blur()方法用于是从元素中移走焦点。8.1表单基础第8章表单JavaScript程序设计共有的表单字段方法8.1表单基础第8章表单JavaSc9

共有的表单字段事件（1）blur：当前字段失去焦点时触发。（2）change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发。（3）focus：当前字段获得焦点时触发。8.1表单基础第8章表单JavaScript程序设计共有的表单字段事件8.1表单基础第8章表单JavaSc10

表单验证处理（1）首先定义一个基础的表单（从标准来讲每一个元素都一定要存在有一个ID属性）。（2）需要对于表单的输入数据进行验证。（3）第二步操作中代码只是取得了最简单的验证处理，但是发现表单还是不能够进行有效的拦截的，因为如果要想拦截表单，需要的是onsubmit事件，这个事件的特点是如果返回了false，那么就不提交表单，如果返回的是true，表示的是提交表单。8.2表单验证第8章表单JavaScript程序设计表单验证处理8.2表单验证第8章表单JavaScrip11

实战

（1）案例描述

用JavaScript实现简单的注册模块表单验证。

（2）实现思路1）首先利用html+css制作简单的注册模块界面；

2）添加JavaScript的class相关处理函数；

3）运用JavaScript验证各个输入框的值；

4）为各个输入框添加监听事件；

5）点击提交注册时触发form表单onsubmit事件从而调用check()函数；8.3实战：注册表单验证第8章表单JavaScript程序设计实战8.3实战：注册表单验证第8章表单JavaScri12

表单基础

表单验证总结第7章表单JavaScript程序设计表单基础总结第7章表单JavaScript程序设计13谢谢观看谢谢观看14JavaScript程序设计JavaScript程序设计15第8章表单8.1表单基础8.2表单验证8.3实战：注册表单验证JavaScript程序设计第8章表单8.1表单基础8.2表单验证8.3实战：16

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

表单常用属性和方法（8）reset()：将所有表单域重置为默认值。（9）submit()：提交表单。（10）target：用于发送请求和接收响应的窗口名称；等价于HTML的target特性。

8.1表单基础第8章表单JavaScript程序设计表单常用属性和方法8.1表单基础第8章表单JavaSc18

提交表单<formid="test-form"> <inputtype="text"name="test"> <buttontype="button"onclick="doSubmitForm()">Submit</button></form><script> functiondoSubmitForm(){

varform=document.getElementById('test-form');//可以在此进行表单验证

form.submit();//验证完毕提交form:

}</script>8.1表单基础第8章表单JavaScript程序设计提交表单8.1表单基础第8章表单JavaScript程19

重置表单varform=document.getElementById("myForm");form.reset();//重置表单8.1表单基础第8章表单JavaScript程序设计重置表单8.1表单基础第8章表单JavaScript程20

表单字段访问（1）varform=document.getElementById("form1");（2）varfield1=form.elements[0];//取得表单中的第一个字段

（3）varfield2=form.elements["textbox1"];//取得名为"textbox1"的字段

（4）varfieldCount=form.elements.length;//取得表单中包含的字段的数量8.1表单基础第8章表单JavaScript程序设计表单字段访问8.1表单基础第8章表单JavaScrip21

共有的表单字段属性（1）disabled：布尔值，表示当前字段是否被禁用。（2）form：指向当前字段所属表单的指针；只读。（3）name：当前字段的名称。（4）readOnly：布尔值，表示当前字段是否只读。（5）tabIndex：表示当前字段的切换（tab）序号。（6）type：当前字段的类型，如"checkbox"、"radio"，等等。（7）value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。8.1表单基础第8章表单JavaScript程序设计共有的表单字段属性8.1表单基础第8章表单JavaSc22

共有的表单字段方法（1）focus()方法用于将浏览器的焦点设置到表单字段。（2）blur()方法用于是从元素中移走焦点。8.1表单基础第8章表单JavaScript程序设计共有的表单字段方法8.1表单基础第8章表单JavaSc23

共有的表单字段事件（1）blur：当前字段失去焦点时触发。（2）change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发。（3）focus：当前字段获得焦点时触发。8.1表单基础第8章表单JavaScript程序设计共有的表单字段事件8.1表单基础第8章表单JavaSc24

表单验证处理（1）首先定义一个基础的表单（从标准来讲每一个元素都一定要存在有一个ID属性）。（2）需要对于表单的输入数据进行验证。（3）第二步操作中代码只是取得了最简