动态 JavaScript 验证消息面板

• 下载源代码 - 2.91 KB

引言

在开发过程中，我们经常遇到客户端验证，并且通常使用 .Net 验证器控件。这些控件为我们提供了在“摘要”式面板中显示客户端验证消息的功能。在某些情况下，我们需要干净的 Javascript 验证，以便满足我们的目的。在这种情况下，我们希望将这些消息显示为内联表单消息，而不是警报消息。

背景

以下是创建动态消息面板的 Javascript 代码。

function HideServerValidationPanel(panelID)
    {    
        if (document.getElementById(panelID) != null)
        {
            document.getElementById(panelID).style.display = "none";
        }        
    }
    function DisplayErrors(errorMessages)
    {        
        if (errorMessages != null && errorMessages.length > 0)
        {
             LoadValidationErrorPanel(errorMessages); 
             
             return false; 
        }
        else
        {
            return true;
        }
       
    }
    function LoadValidationErrorPanel(arrMessage)
    {
        
        var myMain =  document.getElementById ("MainErrorTag");
        if (myMain.firstChild != null)
        {
            myMain.removeChild(myMain.firstChild);
        }        
        var myDiv = document.createElement("div");
        var myUL = document.createElement("ul");
        var myPara =  document.createElement("p");
        var myImg = document.createElement("img");
        var myDesc = document.createElement("strong");
        
        myDiv.className = "ofWrapper";
        //myImg.className = "xxx";
        //myDesc.className ="yyy"

        myImg.setAttribute ("src","Cross.JPG");        
        myDesc.innerText = "Please correct the following details before proceeding ..." ;
       
        myPara.appendChild(myImg);
        
        myPara.appendChild(myDesc);
        myDiv.appendChild(myPara);
        var myLi;
        for(var j= 0; j < arrMessage.length;j++)
        {
            myLi = document.createElement("li");
            myLi.innerText = arrMessage[j];
           // myLi.className = "abc";
            myUL.appendChild(myLi);
        }
        myDiv.appendChild(myUL);
        myMain.appendChild(myDiv);
    }
    function SetFocus(ControlField, isFocusSet)
    {
        if (isFocusSet == false)
        {
            controlField.focus();
            return true;
        }
        else
            return false;
    }
    
    function ValidateMyScreen()
    {
        var Errors = new Array();
        var ErrorCounter = 0;
      
        if (document.getElementById('<%=TextBox1.ClientID%>').value == '')
        {
            Errors[ErrorCounter++] = "Data1 is required.";   
        }
          
        if (document.getElementById('<%=TextBox2.ClientID%>').value== '')
        {
            Errors[ErrorCounter++] = "Data2 is required.";   
        }    
              
    HideServerValidationPanel('<%=pnlMessage.ClientID%>');
    return DisplayErrors(Errors);
    }

这是我们放置服务器端错误消息面板和客户端 DIV 标签以显示消息的 HTML 代码。在运行时创建的动态 Javascript 面板将附加到 ID 为“MainErrorTag”的 div 标签。

<asp:Panel runat="server" ID="pnlMessage">            
            <asp:Label ForeColor="Red" runat="server" ID="lblServerError"></asp:Label >            
        </asp:Panel>            
        <div id="MainErrorTag">            
        <div>

结论

以上代码易于使用。可以创建一个样式表来设计消息面板，并创建一个通用的 Javascript 文件，以便在整个网页中使用。