Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1047285
  • 博文数量: 254
  • 博客积分: 10185
  • 博客等级: 上将
  • 技术积分: 2722
  • 用 户 组: 普通用户
  • 注册时间: 2007-07-25 15:04
文章存档

2011年(8)

2009年(1)

2008年(31)

2007年(214)

分类: 系统运维

2007-08-27 10:24:09

      ValidatorCalloutExtender该控件用于扩展验证控件,对验证控件的错误提示进行样式化及强调化。

下面来看一个示例:

1)在VS2005中新建一个ASP.NET AJAX-Enabled Web Project项目工程,命名为ValidatorCalloutExtender1。

2)在页面上拖放2个TextBox,用于输入用户名和电话号码。同时对输入用户名的TextBox,加一个RequiredFieldValidator;对输入电话号码的TextBox,加一个RequiredFieldValidator和RegularExpressionValidator。同时对每个Validator扩展一个ValidatorCalloutExtender。

代码如下:
 1    <div>
 2        Name:  
 3        <asp:TextBox ID="txtName" runat="server">asp:TextBox>
 4        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName"
 5            Display="None" ErrorMessage="Name is required">asp:RequiredFieldValidator>
 6        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RequiredFieldValidator1">
 7        cc1:ValidatorCalloutExtender>
 8        <br />
 9        <br />
10        phone:  
11        <asp:TextBox ID="txtPhone" runat="server" OnTextChanged="TextBox2_TextChanged">asp:TextBox>
12        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPhone"
13            Display="None" ErrorMessage="phone is required">asp:RequiredFieldValidator>
14        <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtPhone"
15            Display="None" ErrorMessage="RegularExpressionValidator" ValidationExpression="(\(\d{3}\)|\d{3}-)?\d{8}">asp:RegularExpressionValidator>
16        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" TargetControlID="RequiredFieldValidator2">
17        cc1:ValidatorCalloutExtender>
18        <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" TargetControlID="RegularExpressionValidator1">
19        cc1:ValidatorCalloutExtender>
20        <br />
21        <br />
22        <asp:Button ID="Button1" runat="server" Text="Button" />div>

3)按下CTRL+F5,在浏览器里查看效果。

效果图如下:

阅读(2305) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~