ASP.NET 客户端验证标注扩展器

• 下载演示 - 171 KB
• 下载库 - 76 KB

引言

创建此 ASP.NET AJAX 扩展器控件的目的是丰富基于 .NET 客户端验证机制的客户端验证行为。此实践还向您展示了使用“轻量级” JavaScript 库 jQuery 创建淡入淡出行为是多么容易。

背景

可能你们中的许多人知道 ASP.NET AJAX Control Toolkit 中的 ValidatorCallout 控件。 我创建的这个扩展器是基于它的，带有一些变化。 虽然标注行为比标准验证输出更好、更令人愉快，但可以通过一些帮助来改进它。 每个验证器控件都需要 ValidatorCallout，并且它无法更改要验证的相关标签或控件的字体颜色。 总是令人沮丧的是，当将验证摘要放置在表单的顶部或底部时，很难找到出错的地方，尤其是在表单有很多输入时。 最好是使标签无效（这意味着变成红色或黑色以外的任何颜色）并弹出错误消息，因为无效控件获得了焦点。

ValidatorCallout 向我们展示了如何“黑入” .NET 客户端验证，有了这些关键信息，我们可以通过一些限制来实现我们想要的验证行为

• 所有输入控件都必须包含在 Panel 控件中。 此扩展器是 Panel 控件的扩展器。
• 必须使用此库中的 Label 控件，而不是 .NET 框架中的标准 Label，因为标准 Label 被呈现为 SPAN 元素。
• UI 设计器必须将 Label 与至少一个或多个输入控件 ID 链接，如果超过一个，则用“,”分隔，并在“for”属性中指定它。
• 页面上需要 ScriptManager 控件。

使用代码

使用此库的方法非常简单。 此控件创建为 ASP.NET AJAX 扩展器，Visual Studio 2008 为我们提供了一个非常友好的用户界面，可以将扩展器添加到控件。

首先，您需要在页面上放置一个 ScriptManager 和一个 Panel。 在 VS2008 中，将页面的视图从源代码切换到设计模式。 单击 Panel 控件，您将看到 Panel 控件的右上角出现一个箭头按钮。 单击该按钮，将弹出一个窗口，其中包含允许您将扩展器添加到 Panel 控件的命令。

像这样

其次，您需要创建输入控件以及与输入关联的标签，并通过指定 Label 控件的“for”属性将它们链接起来。 像这样

第三，在页面上放置一个按钮以及您需要的验证器。 就这么简单。

这是一个例子。

<asp:panel id="pnlTest" runat="server" cssclass="form">
<library:label id="Label1" runat="server" 
    for="tbxFirstName,tbxLastname" text="Name:" />
<asp:textbox id="tbxFirstName" runat="server" validationgroup="test"></asp:textbox> 
<asp:textbox id="tbxLastname" runat="server" validationgroup="test"></asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" 
   controltovalidate="tbxFirstName" display="Dynamic" 
   errormessage="First name is required." 
   validationgroup="test"></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" 
   controltovalidate="tbxLastname" display="Dynamic" 
   errormessage="Last name is required." 
   validationgroup="test"></asp:requiredfieldvalidator>
<br />
<library:label id="Label2" runat="server" for="tbxEmail" text="Email:" />
<asp:textbox id="tbxEmail" runat="server" 
   validationgroup="test"></asp:textbox><asp:regularexpressionvalidator
   id="RegularExpressionValidator1" runat="server" 
   errormessage="Email is invalid." 
   controltovalidate="tbxEmail" display="Dynamic" 
   validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 
   validationgroup="test"></asp:regularexpressionvalidator>
<br />
<asp:linkbutton id="lbnSubmit" runat="server" 
   validationgroup="test">Submit</asp:linkbutton>
</asp:panel>
<library:clientvalidationbehavior id="pnlTest_ClientValidationBehavior" 
   runat="server" invalidcolor="Red" targetcontrolid="pnlTest" 
   validationgroup="test" validcolor="Black" />

结论

如果您想了解更多关于它是如何完成的，请访问我的博客 这里。 如果您喜欢这篇文章，请记住投票。 如果您有任何建议、错误或增强功能，请与我分享！ 谢谢！

历史

• 2008年5月2日 - 第一版。