c# - RegularExpressionValidator ErrorMessage 边界溢出两行

Question

当试图通过服务器控件创建一个冗长的 RegEx ErrorMessage 时，我认为添加背景颜色和边界来为消息提供一些“风格”会很好。

当我尝试使用边框和颜色将 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" .这确保它们不会占用我们的空间，直到它们被按钮触发。 这是由 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>