ASP.NET - 演练:验证 Web 窗体页中的用户输入

本演练阐释如何使用 ASP.NET 验证程序控件检查网页中的用户输入。您无需代码就可以使用某些自动执行所有检查的控件。此外,您还将通过编写代码创建一个自定义验证程序,该过程将演示如何将您自己的逻辑添加到页的验证框架中。最后,您将学习如何根据用户在页上所做的选择有条件地验证用户输入。

在本演练中,您将为网站创建一个允许访问者申请预订的页面。由于本演练的目的是为阐释验证,因此预订什么对本演练并不重要(例如,可预订餐厅、社区中心会议室或别的地点),并且该页并不真正处理预订。

您所创建的该页将提示用户输入电子邮件地址、预订人数和预订日期。该页还允许用户申请其预订的电话确认。(如果该页实现该功能,则该功能默认为电子邮件确认。)

安全说明: 默认情况下,Web 窗体页将自动验证是否有恶意用户试图将脚本发送到您的应用程序中。

通过此演练,您将学会如何执行以下任务:

·使用验证程序控件检查 ASP.NET 网页中的用户输入。

·设置显示验证错误消息的格式。

·通过编写代码创建自定义验证。

一、创建网站和网页

在本演练的第一部分,将创建可以使用样式的网站和网页。

如果您已在 Visual Studio 中创建了一个网站(例如,通过主题演练:在 Visual Web Developer 中创建基本网页),则可以使用该网站并跳到本演练后面的“添加控件”部分。否则,按照下面的步骤创建一个新的网站和网页。

1.1、创建文件系统网站

1、打开 Visual Studio

2、在“文件”菜单上单击“新建网站”。 “新建网站”对话框随即出现。

3、在“语言”列表中,单击您想使用的编程语言。 您选择的编程语言将是网站的默认语言,但您可以为每个页面分别设置编程语言。

4、在“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”。

5、在“位置”框中输入要保存网站页面的文件夹的名称。 例如,键入文件夹名“C:\WebSites”。

6、单击“确定”。 Visual Studio 创建该文件夹和一个名为 Default.aspx 的新页。

1.2、添加控件

您将只使用几个控件提示用户输入预订所需的信息。

1.3、添加控件和文本

1、切换到“设计”视图。

2、键入一个页标题,如“Submit a Reservation”(提交预订)。

3、从“工具箱”的“标准”组中,将下列控件拖到该页上并按指示设置其属性。

a. 控件

b. 属性

TextBox

ID“textEmail”

TextBox

ID“textNumberInParty”

TextBox

ID“textPreferredDate”

Button

ID“buttonSubmit”

Text“Submit Request”(提交申请)

ValidationGroup“AllValidators”

Label

ID“labelMessage”

Text:(空白)

说明: 页的具体布局无关紧要。

4、在上述这些文本框之前键入文本作为标题。

5、双击 Submit Request 按钮以为其 Click 事件创建一个处理程序,然后添加以下突出显示的代码:

protected void buttonSubmit_Click(object sender, EventArgs e)

{

if (Page.IsValid) { labelMessage.Text = "Your reservation has been processed."; }

}

该按钮处理程序只显示一条消息;它不执行实际的处理操作。但显示该消息将允许您在本演练的后面部分测试验证结果。

6、切换到“设计”视图,双击该页上的空白区域以创建一个 Page_Load 处理程序,然后添加以下突出显示的代码:

protected void Page_Load(object sender, EventArgs e)

{

labelMessage.Text = "";

}

在通过所有验证后,该代码将清除该页上所显示的消息。该代码对本演练后面部分的测试很有用。

二、添加基本验证

对于您虚构的预订系统,您将希望执行下列验证检查:

·必须填写电子邮件地址,并且该项的格式设置必须正确;例如,someone@example.com。(通常不可能检查某一电子邮件地址是否是某人的真实地址,但可以检查该地址是否符合电子邮件地址的正确格式。)

·必须填写人数,并且该项必须是数字。

·必须填写预订日期。

可以使用验证程序控件添加所有这些验证,这些控件将为您执行所有检查并自动显示错误。

说明: 在本演练后面部分,您将添加另一项检查以确定用户是否输入了有效日期。

2.1、添加基本验证

1、切换到“设计”视图。从“工具箱”的“验证”组中,拖动一个 RequiredFieldValidator 控件并将该控件放在 textEmail 文本框旁边。

2、设置 RequiredFieldValidator 控件的以下属性:

属性

设置

ControlToValidate

textEmail

将该验证程序控件绑定到要验证其内容的文本框。

Display

Dynamic

指定只在显示错误需要时才呈现该控件(并且该控件占用页面上的空间)。

ErrorMessage

必须填写电子邮件地址。

显示摘要错误中的文本,将在本演练后面部分配置该属性。

Text

*

星号是指示某字段必填的简便方法。只在出现错误时,才显示该文本。

ValidationGroup

AllValidators

与单选按钮一样,可以将验证程序分组成视为单元的各个组。您将在本演练后面部分学习有关对验证程序进行分组的更多内容。

您现在已完成的任务是添加一个测试以确定用户是否输入了电子邮件地址。该验证程序控件将执行所有检查并在需要时显示错误,这需要您向该页添加代码。

3、从“工具箱”的“验证”组中,拖动一个 RegularExpressionValidator 控件并将该控件放在刚添加的 RequiredFieldValidator 旁边。

4、设置 RegularExpressionValidator 控件的以下属性:

a. 属性

b. 设置

ControlToValidate

textEmail

您要再次对电子邮件框中的用户输入进行验证。

Display

Dynamic

ErrorMessage

电子邮件地址必须采用 name@domain.xyz 格式。

一个较长的错误消息。

Text

无效格式!

一个较短的错误消息。

ValidationGroup

AllValidators

与单选按钮一样,可以将验证程序分组成视为单元的各个组。您将在本演练后面部分学习有关对验证程序进行分组的更多内容。

5、在 RegularExpressionValidator 控件仍处于选定状态时,在“属性”窗口中单击 ValidationExpression 框中的省略号按钮。

正则表达式构成了可用于在字符串中查找精确定义格式的语言。在 RegularExpressionValidator 控件中,为有效格式定义一个正则表达式;在本例中,是有效电子邮件地址的格式。

“正则表达式编辑器”包含一个常用正则表达式列表,这样您无需了解正则表达式语法就可以使用验证程序控件。

6、在“标准表达式”列表中,单击“Internet 电子邮件地址”。 电子邮件地址的正则表达式随即将放入“验证表达式”框中。

7、单击“确定”关闭对话框。

8、按照步骤 1 3 中的说明添加另一个 RequiredFieldValidator 控件。但这一次将该控件绑定到 textNumberInParty 文本框并将其 ErrorMessage 属性设置为“Please indicate how many people are in your party”(请指出团队人数)。

9、从“工具箱”的“验证”组中,拖动一个 RangeValidator 控件并将该控件放在刚添加的 RequiredFieldValidator 旁边。

10、设置 RangeValidator 控件的以下属性:

a. 属性

b. 设置

ControlToValidate

textNumberInParty

Display

Dynamic

ErrorMessage

为团队人数输入一个介于 1 20 之间的数字。

MaximumValue

20

在本例中,为任意较大的值。

MinimumValue

1

在此申请中,至少需要预订一人。

Text

输入一个介于 1 20 之间的数字。

Type

Integer

ValidationGroup

AllValidators

RangeValidator 控件执行下面两个功能:首先确保用户所输入的数据是数字,然后检查该数字是否在指定的最小值和最大值之间。

2.2、测试该页

现在可以测试到目前为止所创建的验证程序控件。

2.3、测试基本验证

1、按 Ctrl+F5 运行该页。

2、当在浏览器中显示该页时,单击 Submit Request 按钮。

由于您尚未填写某些必填字段,因此显示了几个验证错误。您会立即看到这些验证错误,并且未能提交该页。默认情况下,验证程序控件将客户端 ECMAScript (JavaScript) 插入该页中以在浏览器中执行验证检查。这为用户提供了有关验证错误的即时反馈;在不使用客户端脚本的情况下,对验证错误的检查将需要执行一个到服务器的往返过程,该过程有时可能会很慢。实际上,直到所有客户端验证检查都通过后,才能提交该页。(在提交该页时,作为一项安全预防措施将再次执行相同的验证检查。)

检查对 textEmail 文本框的验证,方法是键入一个无效的电子邮件地址,然后再输入一个有效的电子邮件地址(如您自己的地址)。

3、检查是否只能在“Number of people in party”(团队人数)文本框中输入介于 1 20 之间的数值。

4、在输入有效值后,单击“Submit Request”(提交申请)按钮。如果所有控件都通过了验证,您将会看到消息“Your reservation has been processed”(您的预订已得到处理)。

5、在确认验证正常工作后,关闭浏览器。

6、如果验证未正常工作,则复查上面列出的所有属性设置,然后再次运行该页。

三、显示错误信息的其他方法

默认情况下,验证程序控件就地显示错误文本;也就是说,这些控件在其所在页上的位置显示其 Text 属性值。有时,您可能希望用不同的方法显示错误信息。ASP.NET 验证程序控件为您提供了这些附加选项:

·将所有验证错误汇总在一个位置。可以另外执行此选项或用此选项代替就地显示错误。显示错误摘要还使您可以显示较长的错误消息。

·在浏览器中显示一个包含错误信息的弹出消息。该选项只适用于启用脚本的浏览器。

可以使用 ValidationSummary 控件添加这两个显示选项。在本部分演练中,您将为该页添加这两个显示功能。

用其他方法显示验证信息

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值