HTML控件和验证控件

周次：第四周

课时：４课时

课题：HTML控件和验证控件

教学目标及要求：

●使用各种HTML控件

●理解HTML控件和Web控件的区别

●使用各种验证控件

●使用HTML控件、验证控件

重点：

●理解HTML控件和Web控件的区别

●使用各种验证控件

难点：

●使用各种验证控件

●使用HTML控件、验证控件

教学方法：采用3W1H方法讲授

教学内容及步骤：

一、引入新课：

●在中，控件分成HTML服务控件和Web服务控件两种

●所有的 Web服务器控件都派生自 System.Web.UI.WebControls 命名空间

●使用Web服务器控件需要注意AutoPostBack的使用

●Web 服务器控件可以分为：

●文本输入控件

●控制权转移控件

●选择控件

●容器控件

●其它专用控件

二、新课：

(一) HTML 控件简介

1、HTML 服务器控件是由 更新的标准 HTML 标签，通过添加

runat=“server” 属性将其用作服务器控件

2、HTML 服务器控件属于 System.Web.UI.HTMLControls 命名空间，派生自HTMLControl 基类

（二）HTML 控件与 Web 控件的区别

１、功能比较：

HTML 控件：

（1）、比较灵活

（2）、功能较少

（3)、在客户端运行窗体且不需用户结合多种功能时使用

（4）、可用来将ASP应用程序导入Web 控件：

（1）、具备多种控件编程功能

（2）、包含大量控件

（3）、在服务器端运行窗体时使用

（4）、具备更加完善的功能来处理存储在数据库中的数据

（5）、可在可视化设计环境中使用

2、往返过程浏览器向用户显示一个窗体，用户与该窗体进行交互，这导致该窗体回发

到服务器。但是，因为与服务器组件进行交互的所有处理必须在服务器上发生，这意味着对

于要求处理的每一操作而言，必须将该窗体发送到服务器、进行处理、然后返回到浏览器

3、无状态性：客户端向服务器发送一个请求（譬如你在IE栏输入网址，回车），服务

器接到请求，响应请求（处理事件），服务器完成处理后将生成的web页发送回浏览器，然

后就清除该页的信息，释放服务器资源。服务再等待下一次请求，即使下一次是请求同一页，

服务器重新开始创建和处理该页。服务器就是这样不停的重复这一过程。服务器不记录页面

的状态或信息的特性我们就称之为“无状态性”。

（三）HTML 服务器控件的类型

HtmlAnchor、HtmlButton、HtmlForm、HtmlImage、HtmlInputButton、HtmlInputFile、HtmlInputImage、HtmlInputRadioButton、HtmlInputText、HtmlTable

1、HtmlForm 控件

1）此控件是一种服务器控件，用于表示可作为容器容纳 Web页面中各种元素的窗体

2）所有 HTML 控件和 Web 控件均置于 HTMLForm 控件内

3)HtmlForm 控件由以下标签表示：

2、HtmlImage 控件

1)此控件是用于显示图像的一种服务器端控件

2)它可以动态设置并获取来源、宽度、高度、边框宽度、备用文本和对齐方式等各种图

像属性

3)HtmlImage 控件由以下标签表示：

runat="server"align="left/right/top/middle/bottom"border="边框宽度"height="

图像高度"src="图像 URL"width="图像宽度">3、HtmlInputFile 控件1）、此控件用于

将文件从 页面上载到服务器中

2）此控件将显示一个文本框和一个浏览按钮，以便上载文件

3）HtmlInputFile 控件由以下标签表示：

postedfile="将要上载的文件" runat="server" >

（四）验证控件

1、为使用户更正输入错误或无效的数据，始终需要对用户输入的数据进行检查并显示

错误消息

2、验证将由在客户端或服务器中运行的验证代码执行

3、 提供了许多验证控件，用以检查输入并使验证数据更加简单方便

4、与其他服务器控件一样，验证控件也被添加在 页面中

5、可以自动验证客户输入的内容是否符合要求

6、RequiredFieldValidator控件（必填验证）

1）、此控件用于检查任何窗体控件中是否包含值

2）、如果控件中不含任何值，则会生成错误消息

•

•ControlToValidate="被验证的控件的名称"

•ErrorMessage="错误发生时提示信息，可以包含HTML标记"

•Display="Dynamic | Static | None"

•runat="server" />CompareValidator 控件（比较验证）将一个窗体字段中输入的值与一个固定值或另一个控件中输入的值进行比较，并检查值的类型

•

•ControlToValidate="第一个被验证的控件的名称"

•ControlToCompare="第二个被验证的控件的名称"

•ValueToCompare="指定的数据值"

•Type="String | Integer | Date |…，表示按哪一种数据类型比较"

•Operator="Equal | NotEqual | GreaterThan |GreaterThanEqual | LessThan | LessThanEqual，分别表示=、<>、>、>=、<、<="

•ErrorMessage="错误发生时提示信息，可以包含HTML标记"

•Display="Dynamic | Static | None"

•runat="server" />RangeValidator 控件（范围验证）

1）、检查窗体字段的值是否介于最小值与最大值之间

2）、最小值和最大值可以为日期、号码、币值或字符串•

•ControlToValidate="被验证的控件的名称"

•MinimumValue="最小值"

•MaximumValue="最大值"

•Type="String | Integer | Date |…，表示按哪一种数据类型比较"

•ErrorMessage="错误发生时提示信息，可以包含HTML标记"

•Display="Dynamic | Static | None"

•runat="server" />RegularExpressionValidator控件（正则验证）

1）、用于将在窗体字段中输入的值与正则表达式进行匹配

2）、此控件通常与文本框控件一起使用，以检查电话号码、信用卡号码、电子邮件 ID、用户名和密码等是否有效•

•ControlToValidate="被验证的控件的名称"

•ValidationExpression="正则表达式"

•ErrorMessage="错误发生时提示信息，可以包含HTML标记"

•Display="Dynamic | Static | None"

•runat="server" />CustomValidator 控件（自定义验证）

1)、按照用户指定的标准进行验证

2）、可在特定情况下无法使用任何标准验证控件时使用

3）、通常用来验证存储在特定数据库中的数据

ValidationSummary 控件

1）、显示窗体中生成的所有错误的摘要

2）、摘要可以按多种模式显示：列表、项目列表或单独一段•