我想对于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。

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title>Login</title> 
    <style type="text/css"> 
        body{}{font-family:Verdana; font-size:10px} 
        table{}{width:300px} 
        table tr{}{height:30px} 
        table td.firstColumn{}{width:100px; text-align:right} 
        table td.secondColumn{}{ text-align:left} 
        table span.asterisk{}{color:red} 
        table .textbox{}{width: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设置到指定的控件。

 
<script type="text/javascript"> 
       function setFocus(control) 
       { 
           var controlToValidate = document.getElementById(control); 
           controlToValidate.focus(); 
       }        
</script> 
  

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

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

 
public partial class Login : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
        if (this.IsPostBack) 
        { 
            return; 
        } 
   
        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方法转变成超链接的。

 
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; 
        } 
    } 
  

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

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

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

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

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1"><title>  
    Login  
</title>  
    <style type="text/css">  
        body{}{font-family:Verdana; font-size:10px}  
        table{}{width:300px}  
        table tr{}{height:30px}  
        table td.firstColumn{}{width:100px; text-align:right}  
        table td.secondColumn{}{ text-align:left}  
        table span.asterisk{}{color:red}  
        table .textbox{}{width: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被引用：

 
<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>

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

 
<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> 
  

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

 
<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> 
  

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

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

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

 
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit) { 
    this.eventTarget = eventTarget; 
    this.eventArgument = eventArgument; 
    this.validation = validation; 
    this.validationGroup = validationGroup; 
    this.actionUrl = actionUrl; 
    this.trackFocus = trackFocus; 
    this.clientSubmit = clientSubmit; 
} 
  

该对象具有这样的表述的是关于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中。

 
function WebForm_DoPostBackWithOptions(options) { 
    var validationResult = true; 
    if (options.validation) { 
        if (typeof(Page_ClientValidate) == 'function') { 
            validationResult = Page_ClientValidate(options.validationGroup); 
        } 
    } 
    if (validationResult) { 
        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中。

 
function Page_ClientValidate(validationGroup) { 
    Page_InvalidControlToBeFocused = null; 
    if (typeof(Page_Validators) == "undefined") { 
        return true; 
    } 
    var i; 
    for (i = 0; i < Page_Validators.length; i++) { 
        ValidatorValidate(Page_Validators[i], validationGroup, null); 
    } 
    ValidatorUpdateIsValid(); 
    ValidationSummaryOnSubmit(validationGroup); 
    Page_BlockSubmit = !Page_IsValid; 
    return Page_IsValid; 
} 
  

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

 
function ValidatorValidate(val, validationGroup, event) { 
    val.isvalid = true; 
    if ((typeof(val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, validationGroup)) { 
        if (typeof(val.evaluationfunction) == "function") { 
            val.isvalid = val.evaluationfunction(val); 
            if (!val.isvalid && Page_InvalidControlToBeFocused == null && 
                typeof(val.focusOnError) == "string" && val.focusOnError == "t") { 
                ValidatorSetFocus(val, event); 
            } 
        } 
    } 
    ValidatorUpdateDisplay(val); 
} 
  

首先通过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和不同浏览器，来设置错误消息的显示方式。

 
function ValidatorUpdateDisplay(val) { 
    if (typeof(val.display) == "string") { 
        if (val.display == "None") { 
            return; 
        } 
        if (val.display == "Dynamic") { 
            val.style.display = val.isvalid ? "none" : "inline"; 
            return; 
        } 
    } 
    if ((navigator.userAgent.indexOf("Mac") > -1) && 
        (navigator.userAgent.indexOf("MSIE") > -1)) { 
        val.style.display = "inline"; 
    } 
    val.style.visibility = val.isvalid ? "hidden" : "visible"; 
} 
  

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

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

 
function ValidatorUpdateIsValid() { 
    Page_IsValid = AllValidatorsValid(Page_Validators); 
} 
function AllValidatorsValid(validators) { 
    if ((typeof(validators) != "undefined") && (validators != null)) { 
        var i; 
        for (i = 0; i < validators.length; i++) { 
            if (!validators[i].isvalid) { 
                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的验证逻辑。

 
protected void ctmUserName_ServerValidate(object source, ServerValidateEventArgs args) 
    { 
        if (this.txtUserName.Text.Trim() != "adm") 
        { 
            args.IsValid = false; 
            return; 
        } 
        args.IsValid = true; 
    } 
  

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

作者：蒋金楠
微信公众账号：大内老A
微博： www.weibo.com/artech
如果你想及时得到个人撰写文章以及著作的消息推送，或者想看看个人推荐的技术资料，可以扫描左边二维码（或者长按识别二维码）关注个人公众号（原来公众帐号蒋金楠的自媒体将会停用）。
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

原文链接

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

一、首先来看看aspx

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

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、首先来看看aspx

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

热门文章

最新文章

相关电子书