正则表达式验证器 - 动态时显示块而不是内联

Question

在将Display属性设置为“Display ='Dynamic'”时，有没有办法让RegularExpressionValidator使用display：block而不是display：inline in style style？？

我已经尝试在样式表中设置它，但是当它在页面上呈现时会被覆盖。

由于

Answer 1

上面关于使用css的想法！重要的是如此接近我可以品尝它。使用这个想法和CSS属性选择器我做到了。我不得不使用“包含”选择器让它在FF中工作，但现在我已经在IE10，FF和Chrome中测试过它，到目前为止它正在运行。这很简单。这是我的aspx页面中的示例验证器

<asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator>

接下来我有一个valerror风格。

span.valerror[style*="inline"]
{
    display:block !Important;
    background-color: Yellow;
    border: 1px solid #cccccc;
    font-size:.9em;
}

就是这样。它是如何工作的：当跨度将样式从“display：none”更改为“display：inline”时，跨度上的属性选择器会启动并强制它成为一个块。你只需要像上面那样创建一个css条目，并确保你使每个验证器成为该类。

Answer 2

将验证器包装在div中：

<div><asp:RegularExpressionValidator id="x" runat="server"></div>

Answer 3

如何在CSS类中使用!important？

Answer 4

我找到了控件在隐藏时不占用空间的唯一方法，并且显示块是在每个验证器后放置<br />标记。

所以最初我们有这个：

然后如果有错误，它看起来像这样：

Answer 5

我找到了一个使用模板控件解决此问题的解决方案：

<asp:RequiredFieldValidator runat="server" EnableClientScript="True" Display="Dynamic" >
   <TemplateControl>
      <span class="error">This field is required.</span>
   </TemplateControl>
</asp:RequiredFieldValidator>

CSS：

.error{position:relative;display:block;}

生成的html有点乱，但它允许显示：块将验证推送到下一行;

<span id="ctl00_###" style="color: red; display: inline; ">
   <templatecontrol>
      <span class="error">This field is required.</span>
   </templatecontrol>
</span>

Answer 6

与我合作.Display = ValidatorDisplay.Static，未将EnableClientScript设置为true。

更新1 并影响cssClass每个display: block;的{​​{1}}课程

更新2 忘记我以前写过的内容，我想你现在不关心这个，但对于其他人我会说，我认为这是忘了MS关于regValidator来不响应regExpVal原因display: block似乎有效..

因此对于customValidator我发现regExpValidator和clear:left;有效，如果其中的元素在出现错误时移动，则会在其上放置float:left。< / p>

Answer 7

这可能有所帮助（取自MSDN）：

  

显示行为取决于   是否客户端验证   执行。如果是客户端验证   没有活动（因为浏览器   不支持它或因为它支持它   被禁用了   Page.ClientTarget页面指令或   EnableClientScript属性），   ValidatorDisplay.Static和   ValidatorDisplay.Dynamic表现得很好   同样的方式：错误消息占用   仅在显示时才显示空格。该   动态分配空间的能力   当消息不存在时   显示（ValidatorDisplay.Dynamic）   仅适用于客户端   验证

Answer 8

ASP.NET使用验证代码注入javascript文件，它是HTML中表单标记之后的第二个脚本标记。它包含一个函数“ValidatorUpdateDisplay”，用于显示/隐藏验证消息。这可以被覆盖以使用不同的javascript来显示/隐藏例如如果您使用的是jquery：

ValidatorUpdateDisplay = function (val) {
    // Show/hide this validator's error message
    if (val.isvalid){
        $(val).hide();
    } else {
        $(val).show();
    }
}

或者在你的情况下：

ValidatorUpdateDisplay = function (val) {
    // Show/hide this validator's error message
    if (val.isvalid){
        val.style.display = 'none';
    } else {
        val.style.display = 'block';
    }
}

只需将此代码放入ASP.NET表单开始标记后的脚本标记中即可。请注意，这将影响页面上的所有验证器，并忽略Display是否设置为Dynamic - 如果您想支持此功能，可以使用原始函数或自定义代码中的代码对其进行扩展，以检查验证器的类型。

另请参阅此问题Can you have custom client-side javascript Validation for standard ASP.NET Web Form Validators?