AJAX ControlToolkit

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

下面来看一个示例:

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

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

代码如下:
1<div>
2Name:&nbsp;
3<asp:TextBoxID="txtName"runat="server"></asp:TextBox>
4<asp:requiredFieldValidatorID="requiredFieldValidator1"runat="server"ControlToValidate="txtName"
5Display="None"ErrorMessage="Nameisrequired"></asp:requiredFieldValidator>
6<cc1:ValidatorCalloutExtenderID="ValidatorCalloutExtender1"runat="server"TargetControlID="requiredFieldValidator1">
7</cc1:ValidatorCalloutExtender>
8<br/>
9<br/>
10phone:&nbsp;
11<asp:TextBoxID="txtPhone"runat="server"OnTextChanged="TextBox2_TextChanged"></asp:TextBox>
12<asp:requiredFieldValidatorID="requiredFieldValidator2"runat="server"ControlToValidate="txtPhone"
13Display="None"ErrorMessage="phoneisrequired"></asp:requiredFieldValidator>
14<asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"ControlToValidate="txtPhone"
15Display="None"ErrorMessage="RegularExpressionValidator"ValidationExpression="(\(\d{3}\)|\d{3}-)?\d{8}"></asp:RegularExpressionValidator>
16<cc1:ValidatorCalloutExtenderID="ValidatorCalloutExtender2"runat="server"TargetControlID="requiredFieldValidator2">
17</cc1:ValidatorCalloutExtender>
18<cc1:ValidatorCalloutExtenderID="ValidatorCalloutExtender3"runat="server"TargetControlID="RegularExpressionValidator1">
19</cc1:ValidatorCalloutExtender>
20<br/>
21<br/>
22<asp:ButtonID="Button1"runat="server"Text="Button"/></div>


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

效果图如下:

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...