现在的位置: 首页 > 综合 > 正文

发一个2004年年初写的验证控件文章

2012年06月10日 ⁄ 综合 ⁄ 共 4101字 ⁄ 字号 评论关闭

开发自定义.net验证控件(原创)

author: 丁科康(kkding)

       前言:本文的面向对象是.net开发者,必须具备以下知识。

ü         C#的基本知识;

ü         开发过.netWeb自定义控件;

ü         丰富的javascript脚本开发能力;

ü         熟悉正则表达式。

       大家在做.net Web应用程序的时候经常碰到客户输入的数据需要大量的验证,如果验证工具交给服务器去验证的话,无疑是增加服务器的压力,而且也容易造成程序的异常;如果使用微软的验证控件的话,总觉得不方便,而且有的验证数据是无法去自定义,并且假如一个输入框要验证多个条件的话,必须拖动多个验证控件,比如:输入数据不能为空,要求是10位长度的Integer数据类型,开发者就必须拖动RequiredFieldValidatorCompareValidator 等验证控件,但是无法限制数据长度,等等。总是达不到你验证的数据要求,或者不能合成,一个数据验证需要多个验证控件去验证。

       看一下现在的大多数商业网站,您会注意到它们充满了大量的表单,而且都是通过手写的javascript代码进行验证。编写验证代码确实不是件很容易的事情。Web应用程序的验证尤其困难。本文先介绍微软的验证控件是如何运作原理,如何提取信息,然后是介绍我们该如何的去写自己的验证控件。

       我们以RequiredFieldValidator 控件为例:

       可以看到RequiredFieldValidator 控件在开发环境中的表达示如下。


- 1

<asp:RequiredFieldValidator id="RequiredFieldValidator1"  runat="server"

ErrorMessage="请输入数据" ControlToValidate="txtid">

</asp:RequiredFieldValidator>

我们可以在访问有验证控件的页面中点右键查看源文件,下面代码是显示控件呈现后在页面的代码。

<span id="RequiredFieldValidator1" controltovalidate="txtid" errormessage="请输入数据" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;visibility:hidden;">请输入数据</span>

脚本代码

<script language="javascript">

<!--

         var Page_Validators =  new Array(document.all["RequiredFieldValidator1"]);

                   // -->

</script>

<script language="javascript">

<!--

var Page_ValidationActive = false;

if (typeof(clientInformation) != "undefined" && clientInformation.appName.indexOf("Explorer") != -1) {

    if (typeof(Page_ValidationVer) == "undefined")

        alert("无法找到脚本库“/aspnet_client/system_web/1_1_4322/WebUIValidation.js”。请尝试手动放置此文件,或通过运行“aspnet_regiis -c”重新安装。");

    else if (Page_ValidationVer != "125")

        alert("此页使用了 WebUIValidation.js 的错误版本。此页应该使用版本 125。脚本库为 " + Page_ValidationVer + "");

    else

        ValidatorOnLoad();

}

 

function ValidatorOnSubmit() {

    if (Page_ValidationActive) {

        ValidatorCommonOnSubmit();

    }

}

// -->

</script>

 

每个按钮都有个”CausesValidation”属性,我们可以在HTML代码中找到这段代码

<input type="submit" name="Button1" value="OK" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="Button1" />

我们可以看到当用户激活验证的时候是在提交中的onclick事件中激活。在页面载入的时候,微软把要验证的表单对象放在RequiredFieldValidator控件的controltovalidate属性中,然后把验证控件的数据放在Page_Validators对象中,如:  
   var Page_Validators =  new Array(document.all["RequiredFieldValidator1"]);

如果有多个数据要验证,则存储在Page_Validators (Array对象中)中。当激活的时候,调用Page_ClientValidate()脚本函数,我们可以在/aspnet_client/system_web/1_1_4322/ WebUIValidation.js中找到这个脚本。让我们来分析WebUIValidation.js这个脚本文件。

       先从Page_ClientValidate 入手

- 2

可以看到ValidatorValidate(Page_Validators[i])是验证Page_Validators (Array对象)中的数据。ValidatorUpdateIsValid是验证验证控件的有效性。

ValidationSummaryOnSubmit是显示微软控件ValidationSummary的消息。

再来看看ValidatorValidate函数

- 3

- 3红框中的代码是调用写在验证控件Html代码中的RequiredFieldValidatorEvaluateIsValid方法。ValidatorUpdateDisplay(val)是更新显示效果。

从上可以知道微软是把要验证的输入对象和验证方式、显示方式、消息等放在一个SpanHTML元素对象中,然后把对应的SpanID注册到Page_Validators (Array对象)中,通过按钮的onclick事件激活Page_ClientValidate函数来验证数据。(由于按钮的是否验证属性是集成在按钮中,所以我们只能继续使用Page_ClientValidate这个验证入口函数)

这样我们已经知道微软的验证控件的原理了。

现在,我可以开始写自己的验证控件了。

首先,我们确定下我们要验证的范围,我们通常要验证的有字符、数字、浮点、Email、电话号码、日期、时间等,还要验证数据是否非空、数据的长度,还有验证的显示方式

(注:没有写命名空间的都是在DMWZ.UI.WebControls)

1.             首先我们先定义我们要验证那些我们通常需要验证的数据类型和显示方式的枚举。

     /// <summary>

      /// 验证规则

      /// </summary>

    public enum ValidationDataType

    {

        /// <summary>

        /// 空验证

        /// </summary>

        Empty = 0,

        /// <summary>

        /// 字符串

        /// </summary>

        String = 1,

        /// <summary>

        /// A-Za-z字母

        /// </summary>

        Letter =2,

        /// <summary>

        /// 规则字符

        /// </summary>

        StringInteger=3,

        /// <summary>

        /// 或带符号整型

        /// </summary>

        Integer = 4,

        /// <summary>

        /// 允许规则中文

        /// </summary>

        Chinese = 5,

        /// <summary>

        /// 无符号

        /// </summary>

        UnSignInteger = 6,

        /// <summary>

        /// 或符号小数

        /// </summary>

        Double = 7,

        /// <summary>

        /// Email

        /// </summary>

        Email = 8,

        /// <summary>

        /// IP地址

        /// </summary>

        IP = 9,

        /// <summary>

        /// 电话号码

        /// </summary>

        Phone =10,

        /// <summary>

        /// 邮政编码

        /// </summary>

        ZIP = 11,

        /// <summary>

        /// 货币美元和人民币

        /// </summary>

        Currency = 12,

抱歉!评论已关闭.