asp.net 验证控件 - CSS 放置答案

【问题标题】：asp.net validation controls - CSS placementasp.net 验证控件 - CSS 放置
【发布时间】：2009-12-05 18:36:35
【问题描述】：

我正在创建一个地址控件，它将使用一些地址验证 API（google/bing 等）来验证用户输入的地址。我还想使用 asp.net 验证控件验证客户端中的字段（如必填字段、Zip 格式等）。我正在尝试使用 CSS 构建它并使用 float 来对齐文本框（或者有更好的方法吗？）验证控件具有动态显示，并且希望在未验证时将它们放置在文本框旁边。现在它环绕/弄乱了其他控件的放置。可能有更好的方法吗？这是我的代码

<style type="text/css">
 .Wrapper{
   width:auto;
   height:auto;
 } 

 .address{
   width:500px;
   height:auto;
 }

.validator{

  }
  .textbox  {
   float:right; 

  }

  label{
    float:left;
  }

  .button-right{
    float:right;
    margin-right:290px;
  }

  div{
    margin:5px;
  }

  .field
  {
    width:200px;
   }
</style>


<div id="addressUI" class="address">
      <div class="field" > 
        <label ID="lblStreet"  for="txtStreet">Street: </label><label style="color:Red">*</label>
        <asp:TextBox ID="txtStreet"  runat="server"  CssClass="textbox" Text=""  ></asp:TextBox> 
        <asp:RequiredFieldValidator ID="rqdStreet" runat="server" ErrorMessage="Street is required" ControlToValidate="txtStreet" Display="Dynamic">
        </asp:RequiredFieldValidator>
      </div>
      <div class="field">
        <label ID="lblCity"  for="txtCity">City: </label><label style="color:Red">*</label>
        <asp:TextBox ID="txtCity"  runat="server"  Text="" CssClass="textbox"  >    </asp:TextBox> 
        <asp:RequiredFieldValidator ID="rqdCity" runat="server" ErrorMessage="City is required" ControlToValidate="txtCity" Display="Dynamic">
        </asp:RequiredFieldValidator>
      </div>
      <div class="field">
        <label ID="lblState" for="ddlState" >State: </label><label style="color:Red">*</label>
        <asp:DropDownList ID="ddlState" runat="server" style="width:80px;margin-left:12px;" CssClass="">
        </asp:DropDownList>  
        <asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState"  ErrorMessage="State is required" Display="Dynamic">
        </asp:RequiredFieldValidator>
      </div>

      <div class="field">
      <label ID="lblZip" for="txtZip">Zip: </label><label style="color:Red">*</label>
      <asp:TextBox ID="txtZip"  runat="server" CssClass="" Text="" style="width:50px;margin-left:22px;" ></asp:TextBox> 
      <asp:RequiredFieldValidator ID="rqdZIP" ControlToValidate="txtZip" runat="server" ErrorMessage="ZIP is required" Display="Dynamic">
      </asp:RequiredFieldValidator>
        <asp:RegularExpressionValidator ID="regexValidator" runat="server"  
          ErrorMessage="Zip is invalid" Display="Dynamic" ControlToValidate="txtZip" 
          ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
     </div>

      <div class="button-right">
        <asp:Button ID="btnValidate" runat="server" Text="validate" OnClick="btnValidate_Click" CausesValidation="true" />
      </div>
  </div>

【问题讨论】：

标签： css validation

【解决方案1】：

<head>
    <style type="text/css"> 
    label 
    {
        display:inline;
        float:left;
        width:75px;
    } 
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="addressUI" class="address">
            <div class="field">
                <label id="lblStreet" for="txtStreet">
                    Street: <span style="color: Red">*</span> 
                </label>
                <asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text=""></asp:TextBox>
                <asp:RequiredFieldValidator ID="rqdStreet" runat="server" ControlToValidate="txtStreet"
                    Display="Dynamic" ErrorMessage="Street is required">
                </asp:RequiredFieldValidator>
            </div>
            <div class="field">
                <label id="lblCity" for="txtCity">
                    City:<span style="color: Red">*</span>
                </label>
                <asp:TextBox ID="txtCity" runat="server" CssClass="textbox" Text="">    </asp:TextBox>
                <asp:RequiredFieldValidator ID="rqdCity" runat="server" ControlToValidate="txtCity"
                    Display="Dynamic" ErrorMessage="City is required">
                </asp:RequiredFieldValidator>
            </div>
            <div class="field">
                <label id="lblState" for="ddlState">
                    State:<span style="color: Red">*</span>
                </label>                
                <asp:DropDownList ID="ddlState" runat="server" CssClass="" Style="width: 80px">
                </asp:DropDownList>
                <asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState"
                    Display="Dynamic" ErrorMessage="State is required">
                </asp:RequiredFieldValidator>
            </div>
            <div class="field">
                <label id="lblZip" for="txtZip">
                    Zip:<span style="color: Red">*</span>
                </label>                
                <asp:TextBox ID="txtZip" runat="server" CssClass="" Style="width: 50px"
                    Text=""></asp:TextBox>
                <asp:RequiredFieldValidator ID="rqdZIP" runat="server" ControlToValidate="txtZip"
                    Display="Dynamic" ErrorMessage="ZIP is required">
                </asp:RequiredFieldValidator>
                <asp:RegularExpressionValidator ID="regexValidator" runat="server" ControlToValidate="txtZip"
                    Display="static" ErrorMessage="Zip is invalid" ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
            </div>
            <div class="button-right">
                <asp:Button ID="btnValidate" runat="server" CausesValidation="true"
                    Text="validate" />
            </div>
        </div>
        </div>
    </form>
</body>
</html>

【讨论】：

其实我认为我们不需要 Display:inline，设置标签的宽度就可以了
你的权利，显示内联是不必要的。但是，您确实需要 float:left 才能在 FireFox 中工作。
是的，需要向左浮动 + 每个字段周围的 div（城市标签、城市文本框 + 验证器）