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程序设计程序设计