AJAX ControlToolkit學習日誌-ValidatorCalloutExtender(31)

         ValidatorCalloutExtender該控制項用於擴充驗證控制項，對驗證控制項的錯誤提示進行樣式化及強調化。

下面來看一個樣本：

1)在VS2005中建立一個ASP.NET AJAX-Enabled Web Project項目工程，命名為ValidatorCalloutExtender1。

2)在頁面上拖放2個TextBox,用於輸入使用者名稱和電話號碼。同時對輸入使用者名稱的TextBox，加一個RequiredFieldValidator；對輸入電話號碼的TextBox，加一個RequiredFieldValidator和RegularExpressionValidator。同時對每個Validator擴充一個ValidatorCalloutExtender。

代碼如下： 1    <div>
 2        Name: &nbsp;
 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: &nbsp;
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，在瀏覽器裡查看效果。

如下：