验证 Web 窗体页中的用户输入

演练：验证 Web 窗体页中的用户输入

与任何输入窗体一样，Web 窗体页要求您确保用户输入的信息有效、格式正确等。为了使这个常见的任务简单一些，您可以使用专门为 Web 窗体页创建的验证控件。验证控件允许您仅仅设置属性就可以检查必需的项、数据类型、范围、模式和特定的值。这些控件自动执行检查并包括多种向用户显示错误信息的方式。有关概述，请参见 Web 窗体验证。

安全说明   默认情况下，Web 窗体页将自动验证没有恶意用户试图将脚本发送到您的应用程序中。有关更多信息，请参见脚本利用。

本演练阐释一个简单的 Web 窗体页，您可能将其创建为一个简单的注册页。该页包括文本框，允许用户输入登录名、出生日期、密码及再次输入密码。您将向该页添加验证控件以确保用户向所有的框都输入了值并且这些值的格式都正确。

为了完成本演练，您需要具有充足的权限，以便在您的 Web 服务器所在的计算机上创建 ASP.NET Web 应用程序项目。

演练被分成若干较小的部分：

• 通过创建项目和 Web 窗体页以及添加输入控件和标签来创建基本的窗体。
• 添加验证控件。您将验证是否输入了必需的项、用户是否输入了有效的登录名和日期以及密码是否匹配。
• 进行测试。

在完成演练后，将有一个与下面所示类似的窗体。

 

创建基本的窗体

可以从创建带有输入控件的窗体开始。

创建窗体

第一步是创建窗体，稍后您将向该窗体添加验证控件。首先创建一个新的 Web 应用程序项目和 Web 窗体页。

创建项目和窗体

1. 在“文件”菜单上指向“新建”，然后单击“项目”。
2. 在“新建项目”对话框中，请执行以下操作：
   1. 在“项目类型”窗格中选择“Visual Basic 项目”或“Visual C# 项目”。
   2. 在“模板”窗格中选择“ASP.NET Web 应用程序”。
   3. 在“位置”框中，为您的应用程序输入完整的 URL（包含 http://、服务器名称和项目名称）。Web 服务器上必须安装 IIS 5 版（或更高版本）和 .NET Framework。如果计算机上已安装 IIS，可以为服务器指定 http://localhost。（如果正常使用代理服务器访问 Internet，为了使用本地主机，可能需要配置 Internet Explorer 以绕过代理服务器。）

      当单击“确定”时，将在您指定的 Web 服务器的根处创建新的 Web 窗体项目。此外，名为 WebForm1.aspx 的新 Web 窗体页将显示在“设计”视图中 Web 窗体设计器上。

      提示   如果在创建 Web 应用程序项目时遇到问题，请参见“Web 访问失败”对话框。

3. 如果该页尚未处于网格模式，则使用“属性”窗口将文档对象的 pageLayout 属性设置为 GridLayout。

   该步骤是可选的，但它使对窗体进行布局变得简单。如果愿意，您可以在流模式下工作，但必须对控件在页上出现的位置进行一些小的调整。不管是哪种情况，页都将以相同的方式工作。

添加输入控件

对于本演练，假设您正在创建一个简单的注册页，您将添加控件以允许用户输入名称（电子邮件地址）、出生日期和密码。用户两次输入密码进行确认。

添加控件

1. 从工具箱的“Web 窗体”选项卡，将下面的控件添加到窗体，按指示设置它们的 ID 属性：

   控件	用途	标识
   TextBox	输入用户名	txtName
   TextBox	输入出生日期	txtBirthdate
   TextBox	输入密码	txtPassword
   TextBox	重复输入密码进行确认	txtPasswordAgain
   Button	提交窗体	btnRegister 将按钮的 Text 属性设置为“注册”。

2. 将两个密码框的 TextMode 属性设置为 Password，当用户键入密码时，它们显示星号 (*)。
3. 在文本框前面添加标签以指示其功能。如果 Web 窗体页处于网格模式，则在每个文本框的前面添加 Label 控件并设置它们的 Text 属性。如果该页处于流模式，则只要在每个框之前键入静态文本即可。
4. 根据需要调整字体、大小和控件的布局。有关布局的详细信息，请参见在“设计”视图中定位 HTML 元素。

添加验证控件

既已创建了输入窗体，您可以添加验证了。通过将验证控件（每个要执行的验证测试一个控件）添加到窗体完成该操作。（您总共将添加 7 个验证控件以包括所有应该执行的测试和一个用于显示错误的控件。）将执行的验证测试包括：

• 必需的字段。要确保用户向所有四个框都输入了值。
• 名称格式。对于本演练，您将检查用户的登录名是否符合典型的电子邮件名的模式：name@domain.xxx。在本演练中，将不对用户提供的电子邮件名是否是有效的电子邮件帐户进行验证。
• 日期格式。将验证用户输入的出生日期是否是有效的日期。（在本演练中，您将不验证该日期是否在特定的范围内。）
• 密码匹配。将验证用户在两个密码框中提供的密码是否匹配。

检查是否输入了必需的字段

您要确保用户在所有四个文本框中都输入了值，也就是说，所有四个文本框都是必需输入的字段。

检查是否输入了必需的字段

1. 从工具箱的“Web 窗体”选项卡，将一个 RequiredFieldValidator 控件拖到窗体上，放在“txtName”文本框旁边。
2. 选择验证控件，并在“属性”窗口中设置下列属性。

   属性	设置
   ControlToValidate	txtName 这指示验证程序将检查名称字段的内容。
   Text	*（星号） 这是将显示在验证程序控件当前所在位置的文本。（通常在包含错误的输入框旁边放置一个红色的星号。）
   ErrorMessage	Email name is required. 该文本将显示在页上的摘要中。

3. 如果愿意，您可以设置验证控件的字体、颜色和格式设置属性。这些属性影响错误的显示方式。
4. 为其他三个文本框重复第一步到第三步，再创建三个具有以下设置的 RequiredFieldValidation 控件。

   控件	设置
   RequiredFieldValidator2	ControlToValidate：设置为 txtBirthdate Text：* ErrorMessage：You must enter a birth date.
   RequiredFieldValidator3	ControlToValidate：设置为 txtPassword Text：* ErrorMessage：You must enter a password.
   RequiredFieldValidator4	ControlToValidate：设置为 txtPasswordAgain Text：* ErrorMessage：Re-enter the password to confirm it.

检查名称格式

对于本演练，假定用户应该输入电子邮件地址作为注册名。虽然您不能检查该名称是否表示一个有效的电子邮件帐户，但可以检查该名称是否符合典型的电子邮件地址格式（例如 name@domain.com）。这将捕捉用户常犯的输入错误，例如忘记输入电子邮件地址的“.com”部分。

若要检查诸如此类的模式，请使用集成有正则表达式的验证程序控件。如果您了解正则表达式语法，则可以创建自己的模式匹配表达式。但是，您还可以从一组预定义的正则表达式中进行选择，这其中包括那些检查电子邮件地址、电话号码和邮政编码的正则表达式。

当添加此验证控件后，该名称框将具有两个控件；框中的内容必须通过两项检查才能被认为是有效的。当单个控件有多个验证程序时，您通常想要它们在大致相同的位置显示其文本（通常是一个星号），而不管哪项验证检查失败。您可以通过设置验证程序控件的 Display 属性对此进行指定。有关更多信息，请参见 ASP.NET 服务器控件的验证错误信息布局。

检查名称格式

1. 从工具箱的“Web 窗体”选项卡，将一个 RegularExpressionValidator 控件拖到“txtName”框旁边。
2. 选择验证控件，并在“属性”窗口中设置下列属性。

   属性	设置
   ControlToValidate	TxtName
   Text	*（星号）
   ErrorMessage	Name must be in the format name@domain.xxx.
   ValidationExpression	从列表中选择“Internet 电子邮件地址”。请注意，这会将属性值设置为正则表达式。

检查日期格式

您要确保用户为出生日期字段输入了有效的日期。可以通过同时执行两种功能的验证控件完成此操作：它（按数据类型）检查用户是否输入了日期并且比较该日期是否晚于指定的最小日期。

检查日期格式

1. 从工具箱的“Web 窗体”选项卡，将一个 CompareValidator 控件拖到“txtBirthdate”框旁边。
2. 选择验证控件，并在“属性”窗口中设置下列属性。

   属性	设置
   ControlToValidate	TxtBirthdate
   Text	*（星号）
   ErrorMessage	Birth date is not a valid date.
   ValueToCompare	1900/01/01 （或任何其他最小日期。） 注意   以格式 yyyy/mm/dd 输入要进行比较的日期；这样可确保对于所有区域性设置都将正确地解释它。用户输入日期时，对于月份必须仅使用数字。
   Operator	Greater Than
   Type	Date
   Display	Dynamic

检查密码是否匹配

像经常所做的一样，您的注册窗体要求用户键入他们的密码两次以确认这是他们所要输入的密码。您可以使用与检查日期相同的验证控件（比较控件）对此进行检查，但这里不是依据特定的值进行检查，而是根据在第一个密码框中键入的内容比较一个字段（第二个密码框）的值。

安全说明   使用为密码设置的 TextBox 控件有助于确保其他人员观察用户输入密码时无法确知该密码。但是，输入的密码文本没有以任何方式进行加密，您应像保护任何其他机密数据那样对它进行保护。例如，为了获得最大程度的安全性，在发送其中带有密码的窗体时，可以使用安全套接字层 (SSL) 和加密。有关更多信息，请参见运行时的 Web 应用程序安全性。

检查密码是否匹配

1. 从工具箱的“Web 窗体”选项卡将一个 CompareValidator 控件拖到“txtPasswordAgain”框的旁边。
2. 选择验证控件，并在“属性”窗口中设置下列属性。

   属性	设置
   ControlToValidate	TxtPasswordAgain
   Text	*（星号）
   ErrorMessage	The passwords do not match.
   ControlToCompare	TxtPassword
   Operator	Equal
   Display	Dynamic

显示验证错误

还剩一步。您已配置了验证控件，它们将在包含错误的输入框旁边显示一个红色的星号。但是，这可能并没有给用户足够的信息。例如，他们可能意识到输入了错误的注册名，但却不能指出具体错在哪里。

若要显示有关验证错误的详细信息，您可以使用摘要控件。该控件显示任何检测到错误的验证控件 ErrorMessage 属性的值。如果超过一个错误，则摘要控件可以全部显示它们，或者以简单列表中带项目符号项的形式，或者以文本段的形式。

显示验证错误

1. 从工具箱的“Web 窗体”选项卡中，将一个 ValidationSummary 控件拖到窗体上。将该控件放置在某个位置上，在该位置，该控件具有空间来显示几行文本。
2. 如果要以带项目符号的项以外的格式显示错误，则为 DisplayMode 属性选择其他显示选项。
3. 设置 Font 和 ForeColor 属性对错误信息文本进行格式设置。
4. 添加验证控件的操作已完成。现在可以测试它们的运行情况。

测试验证

您要用不同的值测试 Web 窗体页以查看验证控件的效果。

测试验证控件

1. 在解决方案资源管理器中，右击您的窗体名称并选择“在浏览器中查看”。
2. 当显示页时，将不同的值输入框中。若要检查出生日期，请输入一个对 Web 服务器的区域设置无效的日期。

   每次输入错误，都应该在包含错误的框旁边显示一个星号。

3. 单击“注册”。

   如果有任何错误，错误信息文本就会显示在摘要控件中。（随着您对字段进行操作，红色的星号会随时出现和消失。）

   注意   只有当您提交窗体时，才第一次检查必需的字段，因此不强制用户以特定的顺序在窗体中输入数据。但是，第一次提交窗体之后，填写字段后就将报告错误。

如果您未看到预期要看到的错误，则检查每个验证控件的设置，然后重试。

后续步骤

在本演练中添加到 Web 窗体页的验证阐释了 Web 验证控件的基本概念。您可以使用验证控件的更多功能，这既包括它们的基本功能，也包括使用代码实现的功能。您可以通过以下方式扩展本演练：

• 通过再添加一个 CompareValidator 控件，将其运算符设置为 LessThan 并将其比较值设置为今天，检查用户是否输入了一个早于今天的出生日期。您可以使用数据绑定表达式设置该值。虽然您未将验证程序控件绑定到数据，但是却利用了这样一个事实：在呈现控件之前将对数据绑定表达式进行计算。控件的 ASP.NET 语法如下所示：

  <asp:CompareValidator id=c1
      ValueToCompare='<%# DateTime.Today.ToShortDateString() %>'
      ControlToValidate="txtBirthDate" Operator="LessThan" Type="Date" Text="*" runat="server" />

  注意   您必须调用验证程序控件的 DataBind 方法来解析该表达式。

• 检查密码的长度以确保它符合某最小字符数。您可以使用 RegularExpressionValidator 控件完成该操作。没有预定义的表达式检查是否符合最小字符数。您可以使用如下的表达式，该表达式要求 5 个或 5 个以上字符：

  ^[\w]{5,}

• 通过代码测试验证。每个验证控件都设置一个可以以编程方式测试的标志。这补充了控件提供的可视反馈；通过以代码方式测试有效输入，您可以确定在应用程序中如何继续（或不继续）。有关详细信息，请参见通过编程验证 ASP.NET 服务器控件。
• 了解与 Web 窗体相关的安全问题。有关详细信息，请参见 Web 应用程序安全威胁概述。