简介
ValidatorCallout控件是一个用来绑定验证控件的提示控件,让验证的信息的显示可以更加地直观. 如下
重要属性
TargetControlID:要绑定的验证控件的ID
Width:弹出的提示信息的宽度
HighlightCssClass:弹出的提示信息所应用的样式
WarningIconImageUrl:弹出信息中的警示图片的地址
示例
1 打开vs2005,新建一个AjaxControlToolKit网站,命名为oec2003_ValidatorCallout
2 打开默认生成的Default.aspx页面,切换到窗体视图
3 在页面中拖拽两个TextBox,两个RequiredFieldValidator和两个ValidatorCallout控件
4 两个RequiredFieldValidator控件对应两个TextBox,来验证两个文本框不能为空,同时定义错误提示信息,这些错误信息将会通过ValidatorCallout来显示,将RequiredFieldValidator的Display属性设置为none,否则错误提示信息就会在两个地方同时显示,这是我们不想看到的,代码如下
5 设置两个ValidatorCallout控件对应两个RequiredFieldValidator控件,代码如下
6 保存设计,运行程序,当没有在文本框中输入文字而提交表单时,就会在文本框后面出现一个错误提示框,如下图所示
ValidatorCallout控件是一个用来绑定验证控件的提示控件,让验证的信息的显示可以更加地直观. 如下
重要属性
TargetControlID:要绑定的验证控件的ID
Width:弹出的提示信息的宽度
HighlightCssClass:弹出的提示信息所应用的样式
WarningIconImageUrl:弹出信息中的警示图片的地址
示例
1 打开vs2005,新建一个AjaxControlToolKit网站,命名为oec2003_ValidatorCallout
2 打开默认生成的Default.aspx页面,切换到窗体视图
3 在页面中拖拽两个TextBox,两个RequiredFieldValidator和两个ValidatorCallout控件
4 两个RequiredFieldValidator控件对应两个TextBox,来验证两个文本框不能为空,同时定义错误提示信息,这些错误信息将会通过ValidatorCallout来显示,将RequiredFieldValidator的Display属性设置为none,否则错误提示信息就会在两个地方同时显示,这是我们不想看到的,代码如下
1
<
asp:RequiredFieldValidator
ID
="RequiredFieldValidator1"
runat
="server"
ControlToValidate
="TextBox1"
2
Display
="None"
ErrorMessage
="姓名不能为空<br>请输入姓名"
></
asp:RequiredFieldValidator
><
br
/>
3
密
码:
<
asp:TextBox
ID
="TextBox2"
runat
="server"
TextMode
="Password"
Width
="148px"
></
asp:TextBox
>
4
<
asp:RequiredFieldValidator
ID
="RequiredFieldValidator2"
runat
="server"
ControlToValidate
="TextBox2"
5
Display
="None"
ErrorMessage
="密码不能为空,请输入密码"
></
asp:RequiredFieldValidator
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5 设置两个ValidatorCallout控件对应两个RequiredFieldValidator控件,代码如下
1
<
ajaxToolkit:ValidatorCalloutExtender
ID
="ValidatorCalloutExtender1"
runat
="server"
2
TargetControlID
="RequiredFieldValidator1"
>
3
</
ajaxToolkit:ValidatorCalloutExtender
>
4
<
ajaxToolkit:ValidatorCalloutExtender
ID
="ValidatorCalloutExtender2"
runat
="server"
5
TargetControlID
="RequiredFieldValidator2"
>
6
</
ajaxToolkit:ValidatorCalloutExtender
>
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
2
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
3
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
4
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
5
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
6 保存设计,运行程序,当没有在文本框中输入文字而提交表单时,就会在文本框后面出现一个错误提示框,如下图所示
![](https://i-blog.csdnimg.cn/blog_migrate/2627a6b4f758bad4b8384498c3adb47b.gif)