基于ASPNET的Web应用开发单元2网页设计与制作基础(html+css+js)(6)课件.ppt

1、WEB 应 用 开 发单元单元2 2：网站的规划与设计：网站的规划与设计任务2：网页设计与制作基础（html+css+js）(5)主 要 内 容事件1 1访问表单2 2提交、重置表单3 3表单常用方法与事件4 4学习目标学习目标知识目标：知识目标：掌握使用JavaScript进行表单验证的方法能力目标：能力目标：能够使用JavaScript访问表单与表单域能够使用JavaScript对注册表单的内容进行验证技术应用的背景技术应用的背景表单是网页的重要组成部分，通过表单可以使用户向服务器发送数据。表单由form、input、textarea和select等HTML元素构成，form元素指定发送数

2、据时使用的HTTP请求方法以及用于处理表单的服务器端程序或动态网页的URL地址等，用户利用表单输入信息并提交给服务器进行处理，在提交之前可以通过JavaScript脚本对表单信息进行检查和处理。一、事件概述1.1.事件事件事件是指可以被浏览器识别的、发生在页面上的用户动作或状态变化。许多HTML元素可以激发事件，通过响应特定元素的特定事件，可以大大地提升网页的交互性。其中：用户动作：用户对页面的鼠标或键盘操作。例如，click、keypress 等 状态变化：页面的状态发生变化。例如，load、resize、change 等一、事件概述2.2.编写事件响应代码编写事件响应代码在元素的属性声明中

3、直接写JavaScript代码。例如：响应函数：function Button1_onclick()/.事件名称响应函数名一、事件概述3.3.事件驱动编程事件驱动编程事件驱动编程：是指为需要处理的事件编写相应的事件处理程序事件驱动编程的一般步骤：第1步，确定响应事件的元素 第2步，为指定元素确定需要响应的事件类型 第3步，为指定元素的指定事件编写相应的事件处理程序 第4步，将事件处理程序绑定到指定元素的指定事件一、事件概述4.4.事件绑定事件绑定将一个函数与某个 HTML 元素的事件属性关联起来，使得当相应事件发生时就会触发该函数的执行，事件处理程序为被绑定的函数。事件绑定的两种方法 静态绑定

4、：是指将处理事件的程序代码直接指定为 HTML 元素的事件属性值。动态绑定：是指通过语句建立事件绑定。对象.事件属性=函数引用;一、事件概述5.5.事件属性事件属性使用事件属性可以为元素的指定事件绑定事件处理程序事件属性名：在事件名的基础上，加上前缀“on”，如 onclick在HTML标记中设置事件属性时，还可以把事件处理函数属性值设置为一个返回布尔值的return语句。如果这个return语句返回ture，则执行该事件的默认行为；如果返回false，则取消该事件的默认行为。对于HTML元素的不同事件，当相应的事件处理函数返回false值时效果是有所不同的。一、事件概述6.6.事件分类事件分

5、类页面事件：是指因页面状态发生变化而产生的事件，包括 onload、onunload、onresize、onabort、onerror等鼠标事件：是指用户操作鼠标（点击或移动）而触发的事件，包括 onclick、ondblclick、onmousedown等键盘事件：是指用户在键盘上敲击、输入时触发的事件，包括 onkeypress、onkeydown、onkeyup等表单事件：是指与表单或表单控件相关的事件，包括 onsubmit、onreset、onchange、onselect、onblur和 onfocus 等一、事件概述7.7.事件流事件流事件流是指事件的冒泡传递过程源元素父元素根对

6、象（即 Document 对象）由于存在事件流，因此当一个事件发生时，不仅可以由产生事件的元素响应，也可以由其他元素响应。有些事件（如 load、unload、blur、focus 等事件）不会传递二、访问表单1.访问表单方式：访问表单方式：假如某表单的ID为form1，则可以使用DOM方法来获取该表单对象：假如某表单是网页中的第一个表单，且其名称（name属性）为form1，则可以通过document的forms集合来获取该表单：oForm=document.getElementById(form1);oForm=document.forms0;oForm=document.formsfor

7、m1;oForm=document.form1;二、访问表单2.表单对象的常用属性表单对象的常用属性 acceptCharset：设置或获取一个逗号分隔的列表，内容是服务器可接受的字符集。action：设置或获取表单内容要发送到并进行处理的URL。enctype：设置或检索表单的MIME编码方式。默认设置为application/x-www-form-urlencoded，若要上传文件，则应设置为multipart/form-data。id：设置或检索表单的id。二、访问表单2.表单对象的常用属性（续）表单对象的常用属性（续）length：检索表单中的表单域的数目。method：设置或检索如何

8、将表单数据发送到服务器。若设置为GET，则把表单数据附加到action属性指定的URL上发送；若设置为POST，则通过HTTP发布事务发送数据。name：设置或检索表单的名称。target：设置或检索表单提交结果的框架或窗口名称。二、访问表单3.表单的集合表单的集合 elements：包含表单中除外的所有表单域。elements集合的length属性与表单的length属性值相等。4.表单的方法表单的方法 reset()：把表单中的表单域重置为它们的默认值，但不会触发表单的onreset事件。submit()：用于提交表单，但不会触发表单的onsubmit事件。表单对象的常用事件 onrese

9、t：当重置表单时触发。onsubmit：当提交表单时触发。三、访问表单域在一个表单内可以添加一些表单域，例如按钮、文本框以及列表框等，这些表单域都包含表单的elements集合中。在JavaScript脚本中，既可以用document.getElementById方法和表单域的ID来获取该表单域，也可以通过表单域的name属性或表单域在elements集合中的索引来访问不同的表单域。用elements集合的length属性可获取表单中包含的表单域数目。三、访问表单域通过通过IDID访问表单域访问表单域通过索引访问表单域通过索引访问表单域通过通过namename访问表单域访问表单域直接通过直接通

10、过namename属性来访问表单域：属性来访问表单域：假如表单域的名称中包含空格，则需要使用方括号标记：假如表单域的名称中包含空格，则需要使用方括号标记：var oTextBox=document.getElementById(txtUsername);var oTextBox=document.form1.elements0;var oTextBox=document.form1.elementstxtUsername;var oTextBox=document.form1.txtUsername;var oTextBox=document.form1.elementsUser name;三

11、、访问表单域表单域的属性、方法和事件表单域的属性、方法和事件 disabled属性：获取或设置表单域是否被禁用。form属性：获取包含表单域所在的表单。blur()方法：使表单域失去焦点，并将焦点移到别处。focus()方法：使表单域获得焦点。onblur事件：当表单域失去焦点时发生，将执行onblur事件处理程序。onfocus事件：当表单域获得焦点时发生，将执行onfocus事件处理程序。四、提交表单1.表单提交方式表单提交方式 通过单击提交按钮提交表单：通过单击图像按钮提交表单：通过调用表单的submit()方法提交表单：四、提交表单2.表单提交目的地表单提交目的地 提交给服务器端处理程

12、序：提交给JavaScript函数：通过电子邮件形式提交表单数据：五、重置表单 使用重置按钮重置表单：使用重置按钮重置表单：通过调用表单的通过调用表单的reset()方法重置表单：方法重置表单：六、表单域常用方法与事件1.文本框文本框文本框对象的常用方法文本框对象的常用方法 blur()：使文本框失去焦点并触发onblur事件。focus()：使文本框得到焦点并执行由onfocus事件指定的代码。select()：选取文本框中的所有文本。文本框的事件文本框的事件 onblur和onfocus onchange：当用户更改文本框的内容并使其失去焦点时触发。如果通过在脚本中设置value属性来更改

13、文本框的内容，则不会触发onchange事件。onselect：当选取文本框中的一个或多个字符时触发。六、表单域常用方法与事件2.2.文本区域文本区域与文本框一样，文本区域具有blur()、focus()和select()方法，而且支持onchange和onselect事件。六、表单域常用方法与事件3.单选按钮单选按钮单选按钮的常用方法单选按钮的常用方法 blur()：使单选按钮失去焦点并触发onblur事件。click()：模拟鼠标单击操作并触发onclick事件。focus()：使单选按钮获得焦点并执行由onfocus事件指定的代码。单选按钮的常用事件单选按钮的常用事件 onblur：当单

14、选按钮失去输入焦点时触发。onclick：当用户用鼠标左键单击单选按钮时触发。onfocus：当单选按钮获得焦点时触发。六、表单域常用方法与事件4.复选框复选框复选框对象的常用方法复选框对象的常用方法 blur()：使复选框失去焦点并触发onblur事件。click()：模拟鼠标单击操作并触发onclick事件。focus()：使复选框获得焦点并执行由onfocus事件指定的代码。复选框对象的常用事件复选框对象的常用事件 onblur：当复选框失去输入焦点时触发。onclick：当用户用鼠标左键单击复选框时触发。onfocus：当复选框获得焦点时触发。六、表单域常用方法与事件5.列表框列表框s

15、elect对象的常用方法对象的常用方法 add：向select对象的options集合中添加一个option元素。remove：从select对象的options集合中移除一个option元素。select对象的常用事件是onchange，该事件在用户从列表框中选择不同选项时发生。访问列表项访问列表项 select对象有一个options集合，该集合由列表框中的所有option对象组成。通过options集合可以对列表框中的选项进行访问。如果某个选项在options集合中的索引为i，则可以通过optionsi形式来获取该选项，并对其以下属性进行访问。六、表单域常用方法与事件5.列表框（续）列表

16、框（续）optionsi.defaultSelected：返回一个Boolean值，表明该选项初始化时是否被选中。optionsi.length：返回一个整数，表示options集合包含的选项个数。该属性值等于select对象的length属性值。optionsi.selected：返回一个Boolean值，表明该选项是否被选中。optionsi.text：该选项显示在列表框中的文本。optionsi.value：该选项的值。当用户提交表单时，select对象的name属性值和选中项的value属性值将一起被发送到服务器端。六、表单域常用方法与事件5.列表框（续）列表框（续）若要获取列表框中的列表项的文本和值，可以通过select对象的options集合来实现。假如某个列表项在options集合中的索引为iIndex，则该列表项的文本和值分别为：oListBox.optionsiIndex.text oListBox.optionsiIndex.value七、小结 本节主要介绍JavaScript事件，以及访问、提交、重置表单的方法，能够在理解相关知识的基础上掌握表单验证的常用方法。