下面来看一个示例:
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 >
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,在浏览器里查看效果。
效果图如下: