抛砖引玉,终于完成了自己的客户端校验提示Extender

前一段使用了AjaxControlToolKit中的ValidatorCallout控件.使用当中感觉极其不爽!!!

首先,它这个控件只适用于Asp.net的服务器端校验控件,而服务器端校验控件只能对TextBox控件进行校验,<Input>控件无法使用.

最让我无法忍受的是,其中的客户端自定义校验,无法在异步调用Webservice后的回调函数中,无法设置校验状态.造成ValidatorCallout无法正常使用.

后来看了ValidatorCallout的源代码,准备自己写一个类似的控件来满足上述的需要.

经过一段时间的努力,终于写好了,也没有经过完整的测试.望各位走过路过的老大帮忙看看,多提宝贵意见,(扔臭鸡蛋也可!!!).总之希望是抛砖引玉,让各位能够在Asp.net Ajax的学习中共同进步!!!

下面将着重讲解几个步骤,来加入这个控件:

加入控件有几种方法:

一使用DLL

1.新建一个网站,在新建网站对话框的”我的模版”中选择Ajax Control Toolkit Web Site.

2.在”解决方案资源管理器”中的网站上点击鼠标右键,选择”添加引用”,然后在弹出的对话框中选择”浏览”标签,然后选择下载的DLL文件.

3.将下列代码加入到Default.Aspx中,按F5运行,查看演示效果:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="TextBoxValid" Namespace="TextBoxValid" TagPrefix="Panda" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>自制校验Extender演示</title>

.highlight

{

background-color: lemonchiffon;

}

</style>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<p>测试控件一:必须在文本框控件中输入内容</p><asp:TextBox ID="text1" runat="server"></asp:TextBox>

</div>

<div>

<p>测试控件二:文本框控件必须输入内容而且内容必须符合指定的正则式(双重校验)格式为:(###) ###-####</p><input type="text" id="text2" runat="server" />

</div>

<div>

<p>测试控件三:您可以自己书写客户端校验函数</p><asp:TextBox ID="text3" runat="server"></asp:TextBox>

</div>

<Panda:TextBoxValidExtender HighlightCssClass="highlight" ID="Tbve1" TargetControlID="text1"　RequiredFieldValidator="true" RequiredFieldValidatorErrorMessage="<b>控件缺少内容</b><br />您总的在这里写点什么吧!!!" runat="server"></Panda:TextBoxValidExtender>

<Panda:TextBoxValidExtender ID="Tbve2" runat="server" TargetControlID="text2" HighlightCssClass="highlight" RequiredFieldValidator="true" RequiredFieldValidatorErrorMessage="<b>控件缺少内容</b><br />您总的在这里写点什么吧!!!" RegularExpressionValidator="true" ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" ValidationExpressionErrorMessage="<b>电话号码格式不对</b><br />格式为(###) ###-####" ></Panda:TextBoxValidExtender>

<Panda:TextBoxValidExtender ID="Tbve3" HighlightCssClass="highlight" TargetControlID="text3"　RequiredFieldValidator="true" RequiredFieldValidatorErrorMessage="<b>控件缺少内容</b><br />您总的在这里写点什么吧!!!" CustomValidator="true" CustomValidatorHandle="testone" runat="server"></Panda:TextBoxValidExtender>

</form>

var currentControl;

var control;

function testone( Control )

{

control = Control;

currentControl = Control._currentControl;

if(currentControl.value != "panda write")

Control.BackCall( currentControl, false,"<b>输入的内容不对</b><br />请您输入'panda write'");

else

Control.BackCall( currentControl, true,"");

}

</script>

</body>

</html>

请大家注意这里:

<%@ Register Assembly="TextBoxValid" Namespace="TextBoxValid" TagPrefix="Panda" %>

这是将Dll注册进程序中

二从源代码开始创建

1.创建测试网站:

参照上面的创建网站的步骤来创建测试网站

2.在”解决方案资源管理器”中的解决方案上点击鼠标右键,选择”添加”->”新建项目”.

3.选择C#,然后在我的模版中选择”Asp.net Ajax Control Project”

4.Vs.net2005将会在网站目录下创建项目文件夹,其中包含如下文件:

TextBoxValidBehavior.js

TextBoxValidDesigner.cs

TextBoxValidExtender.cs

然后将我的源码文件中的TextBoxValidBehavior.js, TextBoxValidExtender.cs文件中的内容粘贴到对应的文件中. TextBoxValidDesigner.cs不应被修改.

5.在控件项目上点击鼠标右键,选择”添加”->”现有项目”,然后选择图象文件,从Demo文件夹中选择那三个图象文件.

添加成功后,依次点击,然后在”属性”窗口的”生成操作”项目中选择”嵌入的资源”.

6.点击”生成”菜单中选择”重新生成XXXXX”控件.

7.生成完毕后,在测试网站上点击鼠标右键,选择”添加引用”,选择”浏览标签”,然后选择Bin目录下生成的Dll文件,完成引用.

按F5运行测试网站,检查效果.

控件现在只实现了三个检查功能,分别是,”控件非空”,”正则表达式”,”用户自定义”.

下面分别介绍使用方法:

使用Exetender控件的大致方法大家都会使用,就不再过多描述了,下面首先介绍通用的参数:

HighlightCssClass="highlight" HighlightCssClass参数为校验失败后,控件所要呈现的背景颜色."highlight"是Css类名,请大家参阅Default.aspx文件中的<style>标签.

TargetControlID="text1": TargetControlID是目标控件,既是要检测的文本框,文本框可以是<Asp:TextBox >,也可以是<input type=”text” runat=”server”>.请注意,<input>标签一定要加上,runat=“server”,否则无法正常使用.

控件非空:

RequiredFieldValidator="true"

校验控制参数:true为进行校验,false为不进行校验.

RequiredFieldValidatorErrorMessage="<b>控件缺少内容</b><br />您总的在这里写点什么吧!!!"

控件内容为空时,显示的错误提示信息.

正则表达式校验:

RegularExpressionValidator="true"

校验控制参数:true为进行校验,false为不进行校验.

ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}"

正则表达式校验所需的正则表达式.

ValidationExpressionErrorMessage="<b>电话号码格式不对</b><br />格式为(###) ###-####"

控件内容校验错误时,显示的错误提示信息.

用户自定义校验:

CustomValidator="true"

校验控制参数:true为进行校验,false为不进行校验.

CustomValidatorHandle="testone"

自定义校验调用的校验javascript函数.

需要特别讲解的是:用户自定义校验

我们的自定义校验函数的格式为:

Function jiaoyan( Control )

{

control = Control;

currentControl = Control._currentControl;

if(currentControl.value != "panda write")

Control.BackCall( currentControl, false,"<b>输入的内容不对</b><br />请您输入'panda write'");

else

Control.BackCall( currentControl, true,"");

}

Control为传递进来的校验控件对象.我们需要它来传递一些参数和调用方法.

Control._currentControl为传递进来的被校验控件的对象,我们需要检查的内容.

Control.BackCall为校验完成时调用的回调控制函数.

这个函数的三个参数的定义为:

第一个为传递进来的被校验控件的对象

第二个为校验的结果,true为正确,false为错误

第三个参数为校验错误时的错误提示信息

介绍就写道这里了,第一次写这么长的技术文章,罗里把所的,希望给予指正.谢谢啊!!!

DLL文件下载:编译好的DLL文件
全部的演示文件:全部演示及源码文件

posted @ 2006-11-23 21:52 秃顶的大熊猫阅读(1890) 评论(6) 收藏举报

刷新页面返回顶部

抛砖引玉,终于完成了自己的客户端校验提示Extender

公告