1

首先，看看我们能看到的东西

错误信息

如您所见，在From我们有一个无效的电子邮件地址，而在To我们没有电子邮件地址。这两个字段都有一个RequiredFieldValidator和另一个验证器。在From的情况下，另一个验证器是 a RegularExpressionValidator。由于To有一个电子邮件地址，因此会显示其正确的电子邮件地址Invalid，并且由于它不为空，因此不会显示Required。我的目标是在最右边的角落显示错误，无论它是 aRequiredFieldValidator还是 a RegularExpressionValidator，也不管标签在其兄弟姐妹中的相对结构位置。为了简单起见，我粘贴了From的结构：

        <div class="ui-field">
            <label class="ui-label" for="<%= From.ClientID %>">From</label>
            <span class="ui-field-req">&nbsp;*</span>
            <asp:RequiredFieldValidator ID="FromValidator" runat="server" ControlToValidate="From" CssClass="ui-field-error" ErrorMessage="Required" ForeColor="Red"></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator ID="FromEmailValidator" runat="server" CssClass="ui-field-error" ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ControlToValidate="From" ErrorMessage="Invalid" ForeColor="Red"></asp:RegularExpressionValidator>
            <asp:TextBox ID="From" runat="server" CssClass="ui-input"></asp:TextBox>
        </div>

这是我为页面编写的 CSS 的相关部分：

    .ui-form .ui-field-error {
        float: right;
    }

这就是我们为From as HTML 生成的内容：

<div class="ui-field">
                <label class="ui-label" for="ctl00_PageBody_From">From</label>
                <span class="ui-field-req">&nbsp;*</span>
                <span id="ctl00_PageBody_FromValidator" class="ui-field-error" style="color:Red;visibility:hidden;">Required</span>
                <span id="ctl00_PageBody_FromEmailValidator" class="ui-field-error" style="color: red; visibility: visible;">Invalid</span>
                <input name="ctl00$PageBody$From" type="text" value="rocli@cablevision.com" id="ctl00_PageBody_From" class="ui-input">
            </div>

最后的细节：如果我删除了Required的内部文本RequiredFieldValidator，那么Invalid会跳转到正确的位置。有没有办法在纯 CSS 或 ASP.NET 中的某些属性/属性中解决这个问题？如果不是，那么解决方案将涉及我想避免的 Javascript DOM 观察者。

4

1 回答 1

1

这可以通过指定Display验证器的属性来控制。由于您不希望在没有相应错误消息时占用空白，因此您需要将Display属性设置为Dynamic.

<asp:RequiredFieldValidator ID="FromValidator" runat="server" ControlToValidate="From" 
    CssClass="ui-field-error" ErrorMessage="Required" ForeColor="Red" Display="Dynamic"/>

当您不设置此属性时，将Static考虑默认值，并且控件占用的空间等于您在ErrorMessage该控件的属性上拥有的消息的长度。

Dynamic确保仅当该控件的验证失败时才使用页面上的错误消息空间。

此MSDN 文章描述了有关此属性的更多信息。

于 2016-09-02T16:17:56.963 回答