asp.net 유효성 검사 컨트롤 - CSS 배치

사용자가 입력 한 주소의 유효성을 검사하기 위해 일부 주소 유효성 검사 API (google/bing 등)를 사용할 주소 컨트롤을 만듭니다. 또한 asp.net 유효성 검사 컨트롤을 사용하여 클라이언트 측 필드 (필수 필드, Zip 형식 등)의 유효성을 검사하고 싶습니다. 나는 이것을 CSS로 만들려고하는데, float을 사용하여 텍스트 상자를 정렬했다. (또는 더 좋은 방법이 있는가?) 유효성 검사 컨트롤은 동적 표시를 가지며 유효성을 검사하지 않으면 텍스트 상자 옆에 배치하려고한다. 지금 당장은 다른 컨트롤의 배치를 둘러싼 다. 더 나은 방법이있을 수 있습니까? 여기에 내 코드asp.net 유효성 검사 컨트롤 - CSS 배치

<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>

출처

2009-12-05 ram

<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>

출처

2009-12-05 19:07:08 Phaedrus

뛰어난입니다! 항상 배워야 할 것들 : – ram

실제로 나는 우리가 필요 없다고 생각한다. 디스플레이 : 인라인, 라벨에 너비를 설정하면 트릭을 할 수있다. – ram

오른쪽, 디스플레이 인라인은 불필요하다. 그러나 플로트가 필요합니다 : FireFox에서 작동하려면 플로트가 필요합니다. – Phaedrus

asp.net 유효성 검사 컨트롤 - CSS 배치

답변

관련 문제