RegularExpressionValidator ErrorMessage 边界溢出两行

Question

当尝试通过服务器控件创建冗长的 RegEx ErrorMessage 时，我认为添加背景颜色和边界给消息一些 "flair" 会很好。

当我尝试将 CssClass 附加到带有边框和颜色的服务器控件时，边框运行横跨两行，如下所示：

______________________________________
|                                     |
|    ---------------------------      |
|   | My very long error message      |  <-- confined box where error
|    ----------------------------     |      messages and text-box for input
|    ----------------------------     |      resides
|      that ran over two lines  |     |
|   ---------------------------       |
|                                     |
|              ^                      |
|              | The two line error   |
|                 message             |
|_____________________________________|

<asp:RegularExpressionValidator 
    ID="MyFirstRegex" 
    ControlToValidate="SomeControl" 
    runat="server">
    Display="Dynamic" 
    CssClass="SomeClass"                
    ValidationGroup="MyGroup" 
    ErrorMessage="Silly User. <br\> You made a very, very, very, very, very dumb error"<br />"
    ValidationExpression="regex code to validate" 
</asp:RegularExpressionValidator>

<asp:RequiredFieldValidator 
    ID="ReqOne"  
    ValidationGroup="MyGroup" 
    ControlToValidate="SomeControl" 
    runat="server">  
</asp:RequiredFieldValidator>

此外，当它隐藏时，边框是可见的（只是看不到内容）

我试过将控件放在 div 和运行服务器上。问题是当您隐藏 div 时，正则表达式验证停止。关于如何处理这个问题有什么想法吗？

Answer 1

通常您将验证器设置为 Display="Dynamic"。这确保他们不会带我们 space 直到他们被按钮触发。这是由 aspnet 通过将 style="display:none;" 添加到包含错误消息的 <span> 元素来完成的。

<span id="RequiredFieldValidator1" style="display: none;">RequiredFieldValidator</span>

现在，当触发验证器时，样式从 display:none 更改为 display: inline。

<span id="RequiredFieldValidator1" class="SomeClass" style="display: inline;">RequiredFieldValidator</span>

正是 inline 部分导致了所有问题。我们希望它是一个正常的 block。为此，您可以覆盖通常位于 ScriptResource.axd 文件中的 javascript 函数。该函数称为 ValidatorUpdateDisplay，并且有一行包含 val.style.display = val.isvalid ? "none" : "inline";。那是需要覆盖的行。

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

RegularExpressionValidator ErrorMessage 边界溢出两行

RegularExpressionValidator ErrorMessage With Border Overflowing Across Two Lines

.net

css

c#

asp.net

servercontrols