zoukankan html css js c++ java

ASP.NET：创建Linked ValidationSummary, 深入理解ASP.NET的Validation

我想对于ASP.NET的Validator控件已经熟悉的不能再熟悉了。我们已经习惯了用Validator控件来验证我们在表单的输入，并通过ValidationSummary来输出我们为Validator控件设置的Error message。不知道大家有没想过进一步改进一下我们的Validation来改善我们的User Experience。比如，在ValidationSummary输出一个Link连接到对应的控件，而不是显示单纯的Error message。
比如在上图中，是一个典型的Login的Page。我们有两个必填的字段：User name和Password。为此我定义两个RequiredFieldValidator。他们的Error message分别为：”User name is mandatory!”和”Password is mandatory!”。在未输入任何值得前提下Click “Sign in”按钮，Error Message被显示在ValidationSummary上面。不过和传统的Error message不同，显示在ValidationSummary上的实际上是两个链接，Click对应的Error message，光标会设置到对应的Textbox上。比如上图所示：单击”User name is mandatory!”，光标回到User name对应的Texbox。

一、首先来看看aspx

现在我们来简单叙述上面的效果是如果实现的，在开始之前我想说的是，方法非常简单—或许你已经猜到了。下面是上面创建的用于登录的Web页面的HTML。

       1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

       2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       3: <html xmlns="http://www.w3.org/1999/xhtml">

       4: <head id="Head1" runat="server">

       5:     <title>Login</title>

       6:     <style type="text/css">

       7:         body{}{font-family:Verdana; font-size:10px}

       8:         table{}{300px}

       9:         table tr{}{height:30px}

        table td.firstColumn{}{100px; text-align:right}

        table td.secondColumn{}{ text-align:left}

        table span.asterisk{}{color:red}

        table .textbox{}{150px; border:solid 1px #999999}

        table .button{}{background-color: #00cc66;border:solid 1px #999999}

        ul li{}{margin-bottom:5px} 

        ul li a{}{color:red; text-decoration:none}

        ul li a:hover{}{text-decoration:underline} 

   </style>

   

   <script type="text/javascript">
  

       function setFocus(control) {

           var controlToValidate = document.getElementById(control);

           controlToValidate.focus();

       } 

       

   
</script>

</head>

<body style="font-family: Verdana">

    <form id="form1" runat="server">

        <div>

            <table cellpadding="0" cellspacing="5px">

                <tr>

                    <td colspan="2">

                        <asp:ValidationSummary runat="server" ID="vldLogin" />

                    </td>

                </tr>

                <tr>

                    <td class="firstColumn">

                        User Name: <span class="asterisk">&nbsp;*</span></td>

                    <td class="secondColumn">

                        <asp:TextBox runat="server" ID="txtUserName" CssClass="textbox"></asp:TextBox>

                        <asp:RequiredFieldValidator runat="server" ID="rqfUserName" ControlToValidate="txtUserName" Display="None"></asp:RequiredFieldValidator>

                        <asp:CustomValidator runat="server" ID="ctmUserName"  Display="None" OnServerValidate="ctmUserName_ServerValidate" ControlToValidate="txtUserName" ></asp:CustomValidator>

                    </td>

                </tr>

                <tr>

                    <td class="firstColumn">

                        Password: <span class="asterisk">&nbsp;*</span></td>

                    <td class="secondColumn">

                        <asp:TextBox runat="server" ID="txtPassword" TextMode="Password" CssClass="textbox"></asp:TextBox>

                        <asp:RequiredFieldValidator runat="server" ID="rqfPassword" ControlToValidate="txtPassword" Display="None" ></asp:RequiredFieldValidator>

                    </td>

                </tr>

                <tr>

                    <td colspan="2" align="center">

                        <asp:Button runat="server" ID="btnSignIn" Text="Sign in" CssClass="button" />&nbsp;&nbsp;&nbsp;

                        <asp:Button runat="server" ID="ButtonCancel" Text="Cancel" CausesValidation="false"

                            CssClass="button" />

                    </td>

                </tr>

            </table>

        </div>

    </form>

</body>

</html>

在看到了上面的登录界面之后再看看上面的HTML，结构清晰得一目了然。所以我就不再进一步解释了。在这里我只需要提提定义在aspx的一段javascript函数：setFocus。通过它把focus设置到指定的控件。

       1: <script type="text/javascript">

       2:        function setFocus(control)

       3:        {

       4:            var controlToValidate = document.getElementById(control);

       5:            controlToValidate.focus();

       6:        }       

       7: </script>

二、接着我们来看看后台代码

看完了HTML，我们来看看该登录Web页面的后台代码。下面的代码片断为你展示了该Web页面背后的所有代码，所有的机关就存在于Web页面的Load时间处理方法Page_Load方法中。

       1: public partial class Login : System.Web.UI.Page

       2: {

       3:     protected void Page_Load(object sender, EventArgs e)

       4:     {

       5:         if (this.IsPostBack)

       6:         {

       7:             return;

       8:         }

       9:  

        this.rqfUserName.ErrorMessage = string.Format("{0} is mandatory!", "User name");

        this.rqfPassword.ErrorMessage = string.Format("{0} is mandatory!", "Password");

        this.ctmUserName.ErrorMessage = "Such a user has not registered!";

  

        this.MakeClickableErrorMessage();

    }

  

    private void MakeClickableErrorMessage()

    {

        foreach (BaseValidator validator in this.Validators)

        {

            if (validator.ControlToValidate == string.Empty)

            {

                continue;

            }

            string clientID = this.FindControl(validator.ControlToValidate).ClientID;

            string script = string.Format("<a href= \"javascript:setFocus('{0}');\">{1}</a>", clientID, validator.ErrorMessage);

            validator.ErrorMessage = script;

        }

    }

  

    protected void ctmUserName_ServerValidate(object source, ServerValidateEventArgs args)

    {

        if (this.txtUserName.Text.Trim() != "adm")

        {

            args.IsValid = false;

            return;

        }

  

        args.IsValid = true;

    }

}

上面代码也简单得一塌糊涂，除了MakeClickableErrorMessage这个方法，其他的都不值一提。显示在ValidationSummary中原本简单的literal error message就是通过上面的这个MakeClickableErrorMessage方法转变成超链接的。

       1: private void MakeClickableErrorMessage()

       2:     {

       3:         foreach (BaseValidator validator in this.Validators)

       4:         {

       5:             if (validator.ControlToValidate == string.Empty)

       6:             {

       7:                 continue;

       8:             }

       9:             string clientID = this.FindControl(validator.ControlToValidate).ClientID;

      10:             string script = string.Format("<a href= \"javascript:setFocus('{0}');\">{1}</a>", clientID, validator.ErrorMessage);

      11:             validator.ErrorMessage = script;

      12:         }

      13:     }

在上面的代码中，我遍历page中的每个验证控件。如果该验证具有对应ControlToValidate属性（对于一个验证控件来说，ControlToValidate并非一个必需的属性，如果没有指定该属性，其值为空字符串），直接进入下一个循环。然后我把原来只是弹出的文本转变成一个<a></a>块，然后再将其重新赋值给对应的Validator contorl的ErrorMessage property。比如对于rqfUserName RequiredFieldValidator来说，原来的Error message是”User name is mandatory!”,那么现在的Error message变成了：

       1: <a href=”javascript: setFocus(‘txtUserName’);”> User name is mandatory!</a>

上面只是一个简单的小窍门，我们以此为例，来进一步介绍ASP.NET如何进行验证的的。为了简单起见，在这里我没法讨论所有的验证控件。只介绍RequiredFieldValidator和CustomValidator这两种验证控件的处理流程。

三、ASP.NET是如何实现客户端验证的？

我们通过IE来浏览上面的Page，我们可以通过查看源文件得到最终呈现出来的Web页面的HTML。对于上面提到的登录页面，在客户端呈现出来的HTML如下面的HTML所示。

       1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

       2: <html xmlns="http://www.w3.org/1999/xhtml"> 

       3: <head id="Head1"><title> 

       4:     Login 

       5: </title> 

       6:     <style type="text/css"> 

       7:         body{}{font-family:Verdana; font-size:10px} 

       8:         table{}{300px} 

       9:         table tr{}{height:30px} 

        table td.firstColumn{}{100px; text-align:right} 

        table td.secondColumn{}{ text-align:left} 

        table span.asterisk{}{color:red} 

        table .textbox{}{150px; border:solid 1px #999999} 

        table .button{}{background-color: #00cc66;border:solid 1px #999999} 

        ul li{}{margin-bottom:5px}  

        ul li a{}{color:red; text-decoration:none} 

        ul li a:hover{}{text-decoration:underline}  

   </style>    

   <script type="text/javascript">
  

       function setFocus(control) {

           var controlToValidate = document.getElementById(control);

           controlToValidate.focus();

       }        

   
</script>
 

</head> 

<body style="font-family: Verdana"> 

    <form name="form1" method="post" action="Login.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1"> 

<div> 

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> 

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /> 

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTg3OTM1NTM2MA9kFgICAw9kFgYCBQ8PFgIeDEVycm9yTWVzc2FnZQVKPGEgaHJlZj0gImphdmFzY3JpcHQ6c2V0Rm9jdXMoJ3R4dFVzZXJOYW1lJyk7Ij5Vc2VyIG5hbWUgaXMgbWFuZGF0b3J5ITwvYT5kZAIHDw8WAh8ABVI8YSBocmVmPSAiamF2YXNjcmlwdDpzZXRGb2N1cygndHh0VXNlck5hbWUnKTsiPlN1Y2ggYSB1c2VyIGhhcyBub3QgcmVnaXN0ZXJlZCE8L2E+ZGQCCw8PFgIfAAVJPGEgaHJlZj0gImphdmFzY3JpcHQ6c2V0Rm9jdXMoJ3R4dFBhc3N3b3JkJyk7Ij5QYXNzd29yZCBpcyBtYW5kYXRvcnkhPC9hPmRkZLFuksmAaQ+N5sw8K+rkFk3GqgSn" /> 

</div> 

<script type="text/javascript"> 

<!--

    var theForm = document.forms['form1'];

    if (!theForm) {

        theForm = document.form1;

    }

    function __doPostBack(eventTarget, eventArgument) {

        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

            theForm.__EVENTTARGET.value = eventTarget;

            theForm.__EVENTARGUMENT.value = eventArgument;

            theForm.submit();

        }

    } 

// --> 
</script>
 

<script src="/Artech.ClickableValidationSummary/WebResource.axd?d=07ZNXubMk-rxUjn0jMywXg2&amp;t=632969324944906146" type="text/javascript">

</script> 

<script src="/Artech.ClickableValidationSummary/WebResource.axd?d=5q3WmDnqxzNvEfUc_QbMe5qdQO1LUQ4P7mwuv6CrIMk1&amp;t=632969324944906146" type="text/javascript">

</script> 

<script type="text/javascript"> 

<!--

    function WebForm_OnSubmit() {

        if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;

        return true;

    } 

// --> 
</script>
 

        <div> 

            <table cellpadding="0" cellspacing="5px"> 

                <tr> 

                    <td colspan="2"> 

                        <div id="vldLogin" style="color:Red;display:none;"> 

</div> 

                    </td> 

                </tr> 

                <tr> 

                    <td class="firstColumn"> 

                        User Name: <span class="asterisk">&nbsp;*</span></td> 

                    <td class="secondColumn"> 

                        <input name="txtUserName" type="text" id="txtUserName" class="textbox" /> 

                        <span id="rqfUserName" style="color:Red;display:none;"></span> 

                        <span id="ctmUserName" style="color:Red;display:none;"></span> 

                    </td> 

                </tr> 

                <tr> 

                    <td class="firstColumn"> 

                        Password: <span class="asterisk">&nbsp;*</span></td> 

                    <td class="secondColumn"> 

                        <input name="txtPassword" type="password" id="txtPassword" class="textbox" /> 

                        <span id="rqfPassword" style="color:Red;display:none;"></span> 

                    </td> 

                </tr> 

                <tr> 

                    <td colspan="2" align="center"> 

                        <input type="submit" name="btnSignIn" value="Sign in" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;btnSignIn&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="btnSignIn" class="button" />&nbsp;&nbsp;&nbsp; 

                        <input type="submit" name="ButtonCancel" value="Cancel" id="ButtonCancel" class="button" /> 

                    </td> 

                </tr> 

            </table> 

        </div>     

<script type="text/javascript"> 

<!--

    var Page_ValidationSummaries = new Array(document.getElementById("vldLogin"));

    var Page_Validators = new Array(document.getElementById("rqfUserName"), document.getElementById("ctmUserName"), document.getElementById("rqfPassword")); 

// --> 
</script>
 

 

<script type="text/javascript"> 

<!--

    var rqfUserName = document.all ? document.all["rqfUserName"] : document.getElementById("rqfUserName");

    rqfUserName.controltovalidate = "txtUserName";

    rqfUserName.errormessage = "<a href= \"javascript:setFocus(\'txtUserName\');\">User name is mandatory!</a>";

    rqfUserName.display = "None";

    rqfUserName.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";

    rqfUserName.initialvalue = "";

    var ctmUserName = document.all ? document.all["ctmUserName"] : document.getElementById("ctmUserName");

    ctmUserName.controltovalidate = "txtUserName";

    ctmUserName.errormessage = "<a href= \"javascript:setFocus(\'txtUserName\');\">Such a user has not registered!</a>";

    ctmUserName.display = "None";

    ctmUserName.evaluationfunction = "CustomValidatorEvaluateIsValid";

    var rqfPassword = document.all ? document.all["rqfPassword"] : document.getElementById("rqfPassword");

    rqfPassword.controltovalidate = "txtPassword";

    rqfPassword.errormessage = "<a href= \"javascript:setFocus(\'txtPassword\');\">Password is mandatory!</a>";

    rqfPassword.display = "None";

    rqfPassword.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";

    rqfPassword.initialvalue = ""; 

// --> 
</script>
 

<div> 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQL7uOMiAqXVsrMJArWptJELAsP3i5QHAv23gdwNI0m2v8hOJGGPTPLYqDLAkZE0nKU=" /> 

</div> 

<script type="text/javascript"> 

<!--

    var Page_ValidationActive = false;

    if (typeof (ValidatorOnLoad) == "function") {

        ValidatorOnLoad();

    }

  

    function ValidatorOnSubmit() {

        if (Page_ValidationActive) {

            return ValidatorCommonOnSubmit();

        }

        else {

            return true;

        }

    } 

// --> 
</script> 

        </form> 

</body> 

</html>

我们从中提取对验证有用的信息。首先我们会看到有两个JavaScript被引用：

       1: <script src="/Artech.ClickableValidationSummary/WebResource.axd?d=07ZNXubMk-rxUjn0jMywXg2&amp;t=632969324944906146" type="text/javascript"></script>

       2: <script src="/Artech.ClickableValidationSummary/WebResource.axd?d=5q3WmDnqxzNvEfUc_QbMe5qdQO1LUQ4P7mwuv6CrIMk1&amp;t=632969324944906146" type="text/javascript"></script>

这两个JavaScript由ASP.NET生成。尤其内容较多，在这里先不列出他们的内容，等下面真正要使用到其中定义的JavaScript 在列出来。我们现在姑且称它们为JavaScript1和JavaScript2。在下面一段JavaScript中，为3个验证控件定义了3个客户端的对象，对象的名称和控件名称同名。并设置相关的属性：controltovalidate，errormessage，display，evaluationfunction。其中evaluationfunction为进行Validation的function的名称。

       1: <script type="text/javascript">

       2: <!--

       3:     var rqfUserName = document.all ? document.all["rqfUserName"] : document.getElementById("rqfUserName");

       4:     rqfUserName.controltovalidate = "txtUserName";

       5:     rqfUserName.errormessage = "<a href= \"javascript:setFocus(\'txtUserName\');\">User name is mandatory!</a>";

       6:     rqfUserName.display = "None";

       7:     rqfUserName.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";

       8:     rqfUserName.initialvalue = "";

       9:     var ctmUserName = document.all ? document.all["ctmUserName"] : document.getElementById("ctmUserName");

      10:     ctmUserName.controltovalidate = "txtUserName";

      11:     ctmUserName.errormessage = "<a href= \"javascript:setFocus(\'txtUserName\');\">Such a user has not registered!</a>";

      12:     ctmUserName.display = "None";

      13:     ctmUserName.evaluationfunction = "CustomValidatorEvaluateIsValid";

      14:     var rqfPassword = document.all ? document.all["rqfPassword"] : document.getElementById("rqfPassword");

      15:     rqfPassword.controltovalidate = "txtPassword";

      16:     rqfPassword.errormessage = "<a href= \"javascript:setFocus(\'txtPassword\');\">Password is mandatory!</a>";

      17:     rqfPassword.display = "None";

      18:     rqfPassword.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";

      19:     rqfPassword.initialvalue = "";

      20: // -->

      21: </script>

我们还发现通过Javascript定义了两个Array对象：Page_ValidationSummaries和Page_Validators。这两个Array用于保存Page中的所有的ValidationSummary和Validator control。

       1: <script type="text/javascript">

       2: <!--

       3: var Page_ValidationSummaries =  new Array(document.getElementById("vldLogin"));

       4: var Page_Validators =  new Array(document.getElementById("rqfUserName"), document.getElementById("ctmUserName"), document.getElementById("rqfPassword"));

       5: // -->

       6: </script>

我们知道，所有的Validation操作都是在Click “Sign In” 按钮之后进行的。我们来看看，该按钮的onClick事件处理程序是如何定义的：

通过onclick事件，我们可以看到，一个命名为WebForm_DoPostBackWithOptions的javascript function被调用，该function接收一个称为WebForm_PostBackOptions类型的对象。该类型被定一个在JavaScript1中（还记得JavaScript1指的是什么吗？上溯到第三段）。

       1: function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) {

       2:     this.eventTarget = eventTarget;

       3:     this.eventArgument = eventArgument;

       4:     this.validation = validation;

       5:     this.validationGroup = validationGroup;

       6:     this.actionUrl = actionUrl;

       7:     this.trackFocus = trackFocus;

       8:     this.clientSubmit = clientSubmit;

       9: }

该对象具有这样的表述的是关于Postback context的一些信息，比如：

eventTarget：Event触发的control，当前为” btnSignIn”。
eventArgument：Event额外的参数, 当前为””。
validation：是否进行Validation，当前为true。
validationGroup：eventTarget 对应的Validation group，这是ASP.NET 2.0的新特性，当当前为””,因为我没有设置btnSignIn的ValidationGroup的property。
actionUrl：表单被提交的Url，就像asp中Form的action一样。ASP.NET 1.x不提供cross-page的提交，在2.0中提供了此功能，当前为””, 我没有进行cross-page的提交。
trackFocus：是否进行焦点追踪，当前为false。
clientSubmit：是否通过form submit导致Postback，当前为false。

我们再来看看WebForm_DoPostBackWithOptions，像WebForm_PostBackOptions一样，该function同样被定义在JavaScript1中。

       1: function WebForm_DoPostBackWithOptions(options) {

       2:     var validationResult = true;

       3:     if (options.validation) {

       4:         if (typeof(Page_ClientValidate) == 'function') {

       5:             validationResult = Page_ClientValidate(options.validationGroup);

       6:         }

       7:     }

       8:     if (validationResult) {

       9:         if ((typeof(options.actionUrl) != "undefined") && (options.actionUrl != null) && (options.actionUrl.length > 0)) {

            theForm.action = options.actionUrl;

        }

        if (options.trackFocus) {

            var lastFocus = theForm.elements["__LASTFOCUS"];

            if ((typeof(lastFocus) != "undefined") && (lastFocus != null)) {

                if (typeof(document.activeElement) == "undefined") {

                    lastFocus.value = options.eventTarget;

                }

                else {

                    var active = document.activeElement;

                    if ((typeof(active) != "undefined") && (active != null)) {

                        if ((typeof(active.id) != "undefined") && (active.id != null) && (active.id.length > 0)) {

                            lastFocus.value = active.id;

                        }

                        else if (typeof(active.name) != "undefined") {

                            lastFocus.value = active.name;

                        }

                    }

                }

            }

        }

    }

    if (options.clientSubmit) {

        __doPostBack(options.eventTarget, options.eventArgument);

    }

}

在开始的时候，调用Page_ClientValidate进行客户端验证。我们来着重分析上面的javascript，看看具体的流程。Page_ClientValidate被定义在Javascript2中。

       1: function Page_ClientValidate(validationGroup) {

       2:     Page_InvalidControlToBeFocused = null;

       3:     if (typeof(Page_Validators) == "undefined") {

       4:         return true;

       5:     }

       6:     var i;

       7:     for (i = 0; i < Page_Validators.length; i++) {

       8:         ValidatorValidate(Page_Validators[i], validationGroup, null);

       9:     }

      10:     ValidatorUpdateIsValid();

      11:     ValidationSummaryOnSubmit(validationGroup);

      12:     Page_BlockSubmit = !Page_IsValid;

      13:     return Page_IsValid;

      14: }

上面的代码中，首先通过Page_Validators判断Page是否存在验证控件。我们在预先定义了Page_Validators 数组（还记得我们之前介绍的两个Array——Page_ValidationSummaries和Page_Validators吗？）。虽有遍历所有的验证控件，并调用ValidatorValidate方法执行每个验证控件的客户端验证。我们进一步看看ValidatorValidate又是如何定义的（ValidatorValidate定义在Javascript2中）。

       1: function ValidatorValidate(val, validationGroup, event) {

       2:     val.isvalid = true;

       3:     if ((typeof(val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, validationGroup)) {

       4:         if (typeof(val.evaluationfunction) == "function") {

       5:             val.isvalid = val.evaluationfunction(val);

       6:             if (!val.isvalid && Page_InvalidControlToBeFocused == null &&

       7:                 typeof(val.focusOnError) == "string" && val.focusOnError == "t") {

       8:                 ValidatorSetFocus(val, event);

       9:             }

      10:         }

      11:     }

      12:     ValidatorUpdateDisplay(val);

      13: }

首先通过IsValidationGroupMatch判断验证控件的ValidationGroup是否和触发Postaback的Control对应的ValidationGroup相互匹配。因为只有在匹配的前提下才进行相关验证控件的验证工作。然后调用验证控件的evaluationfunction function来进行验证。通过前面的分析，我们知道RequiredFieldValidator的evaluationfunction为RequiredFieldValidatorEvaluateIsValid，而CustomValidator的evaluationfunction为CustomValidatorEvaluateIsValid。我们来看看这两个function是如何定义的。他们都定义在Javascript2中。

RequiredFieldValidatorEvaluateIsValid：通过正则表达式验证是否具有有效输入

           1: function RequiredFieldValidatorEvaluateIsValid(val) {

           2:     return (ValidatorTrim(ValidatorGetValue(val.controltovalidate)) !=       ValidatorTrim(val.initialvalue))

           3: }

           4: function ValidatorGetValue(id) {

           5:     var control;

           6:     control = document.getElementById(id);

           7:     if (typeof(control.value) == "string") {

           8:         return control.value;

           9:     }

          10:     return ValidatorGetValueRecursive(control);

          11: }

          12: function ValidatorGetValueRecursive(control)

          13: {

          14:     if (typeof(control.value) == "string" && (control.type != "radio" || control.checked == true)) {

          15:         return control.value;

          16:     }

          17:     var i, val;

          18:     for (i = 0; i<control.childNodes.length; i++) {

          19:         val = ValidatorGetValueRecursive(control.childNodes[i]);

          20:         if (val != "") return val;

          21:     }

          22:     return "";

          23: }

          24: function ValidatorTrim(s) {

          25:     var m = s.match(/^\s*(\S+(\s+\S+)*)\s*$/);

          26:     return (m == null) ? "" : m[1];

          27: }

CustomValidatorEvaluateIsValid：实际上就是调用我们为CustomValidator设置的ClientValidationFunction

           1: function CustomValidatorEvaluateIsValid(val) {

           2:     var value = "";

           3:     if (typeof(val.controltovalidate) == "string") {

           4:         value = ValidatorGetValue(val.controltovalidate);

           5:         if ((ValidatorTrim(value).length == 0) &&

           6:             ((typeof(val.validateemptytext) != "string") || (val.validateemptytext != "true"))) {

           7:             return true;

           8:         }

           9:     }

          10:     var args = { Value:value, IsValid:true };

          11:     if (typeof(val.clientvalidationfunction) == "string") {

          12:         eval(val.clientvalidationfunction + "(val, args) ;");

          13:     }

          14:     return args.IsValid;

          15: }

在ValidatorValidate中，当我们通过调用各个验证控件的evaluationfunction来进行客户端端的验证后，对于没有通过验证的验证控件，通过调用ValidatorSetFocus设置相应控件的焦点。在这里就不在深入探讨了。接着通过调用ValidatorUpdateDisplay来根据我们制定的Display和不同浏览器，来设置错误消息的显示方式。

       1: function ValidatorUpdateDisplay(val) {

       2:     if (typeof(val.display) == "string") {

       3:         if (val.display == "None") {

       4:             return;

       5:         }

       6:         if (val.display == "Dynamic") {

       7:             val.style.display = val.isvalid ? "none" : "inline";

       8:             return;

       9:         }

      10:     }

      11:     if ((navigator.userAgent.indexOf("Mac") > -1) &&

      12:         (navigator.userAgent.indexOf("MSIE") > -1)) {

      13:         val.style.display = "inline";

      14:     }

      15:     val.style.visibility = val.isvalid ? "hidden" : "visible";

      16: }

实际上到现在为止，所有的验证工作已经完成。接下来我们来看看验证失败后相应的错误消息是如何显示的。所以我们要看看ValidatorUpdateDisplay的定义了。

分析完ValidatorValidate，我们在回到Page_ClientValidate上面。现在我们接着分析一下的执行流程。通过调用ValidatorValidate执行完各个验证控件的验证后，接着调用的是ValidatorUpdateIsValid()和ValidationSummaryOnSubmit(validationGroup)。ValidatorUpdateIsValid通过遍历每个验证控件来查看他们是否通过验证，最终确定这个页面是否通过验证。ValidationSummaryOnSubmit通过拼接字符串的形式在ValidationSummary显示对应的错误消息。这正是我们可以将错误消息写成超链接的原因所在。

       1: function ValidatorUpdateIsValid() {

       2:     Page_IsValid = AllValidatorsValid(Page_Validators);

       3: }

       4: function AllValidatorsValid(validators) {

       5:     if ((typeof(validators) != "undefined") && (validators != null)) {

       6:         var i;

       7:         for (i = 0; i < validators.length; i++) {

       8:             if (!validators[i].isvalid) {

       9:                 return false;

            }

        }

    }

    return true;

}

function ValidationSummaryOnSubmit(validationGroup) {

    if (typeof(Page_ValidationSummaries) == "undefined")

        return;

    var summary, sums, s;

    for (sums = 0; sums < Page_ValidationSummaries.length; sums++) {

        summary = Page_ValidationSummaries[sums];

        summary.style.display = "none";

        if (!Page_IsValid && IsValidationGroupMatch(summary, validationGroup)) {

            var i;

            if (summary.showsummary != "False") {

                summary.style.display = "";

                if (typeof(summary.displaymode) != "string") {

                    summary.displaymode = "BulletList";

                }

                switch (summary.displaymode) {

                    case "List":

                        headerSep = "<br>";

                        first = "";

                        pre = "";

                        post = "<br>";

                        end = "";

                        break;

                    case "BulletList":

                    default:

                        headerSep = "";

                        first = "<ul>";

                        pre = "<li>";

                        post = "</li>";

                        end = "</ul>";

                        break;

                    case "SingleParagraph":

                        headerSep = " ";

                        first = "";

                        pre = "";

                        post = " ";

                        end = "<br>";

                        break;

                }

                s = "";

                if (typeof(summary.headertext) == "string") {

                    s += summary.headertext + headerSep;

                }

                s += first;

                for (i=0; i<Page_Validators.length; i++) {

                    if (!Page_Validators[i].isvalid && typeof(Page_Validators[i].errormessage) == "string") {

                        s += pre + Page_Validators[i].errormessage + post;

                    }

                }

                s += end;

                summary.innerHTML = s;

                window.scrollTo(0,0);

            }

            if (summary.showmessagebox == "True") {

                s = "";

                if (typeof(summary.headertext) == "string") {

                    s += summary.headertext + "\r\n";

                }

                var lastValIndex = Page_Validators.length - 1;

                for (i=0; i<=lastValIndex; i++) {

                    if (!Page_Validators[i].isvalid && typeof(Page_Validators[i].errormessage) == "string") {

                        switch (summary.displaymode) {

                            case "List":

                                s += Page_Validators[i].errormessage;

                                if (i < lastValIndex) {

                                    s += "\r\n";

                                }

                                break;

                            case "BulletList":

                            default:

                                s += "- " + Page_Validators[i].errormessage;

                                if (i < lastValIndex) {

                                    s += "\r\n";

                                }

                                break;

                            case "SingleParagraph":

                                s += Page_Validators[i].errormessage + " ";

                                break;

                        }

                    }

                }

                alert(s);

            }

        }

    }

}

四、ASP.NET是如何实现服务端验证的？

前面我们花了很大的篇幅介绍了客户端验证，通过介绍我们知道了，客户端验证和错误消息的显示均由Javascript来完成。现在我们来简单看看服务端验证。客户端通过调用__doPostBack实现向服务端的Postback（具体的Postback可以参考我的文章：《浅谈ASP.NET的Postback》），并进行验证控件的服务端验证，错误消息直接通过Html显示出来。比如下面是一段CustomValidator的验证逻辑。

       1: protected void ctmUserName_ServerValidate(object source, ServerValidateEventArgs args)

       2:     {

       3:         if (this.txtUserName.Text.Trim() != "adm")

       4:         {

       5:             args.IsValid = false;

       6:             return;

       7:         }

       8:         args.IsValid = true;

       9:     }

如果上面的验证没有通过，最终呈现在客户端浏览器上的将如下图所示，后面是显示验证错误消息的HTML。

查看全文

相关阅读:
C++ Primer 学习笔记
 闷热的北京
 EasyUI实现购物车、菜单和窗口栏等最常用的用户界面功能.
详细解读-this-关键字在全局、函数、对象、jQuery等中的基础用法！
对于JavaScript原生的JS
关于JavaScript原生的JS。工作接近一年，发现对于原生JS的基础内容总是不够掌握，特定抽出三个周的周末，结合本人的工作经验还有菜鸟教程及w3school的基础内容等整理了如下内容。对JS的常用知识进行概括！希望对大家能够有所帮助。
最简单实用的JQuery实现banner图中的text打字动画效果！！！
一路慢行的JavaScript之旅（add）！！！
一路慢行的CSS之旅
 一路慢行的HTML5之旅！

原文地址：https://www.cnblogs.com/artech/p/743542.html