学步园

本系列目录 

本节主要内容：数据验证控件的使用。

从我们第1节创建的模板创建一个新的web页面，对页面进行布局，如图1.

图1

代码：

Code
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="single_div">
        <fieldset>
            <fieldset>
                <div class="section_title">
                    <p>
                        请注意：带有*的项目必须填写。</p>
                    <div>
                                    </div>
                </div>
                <legend>请选择您的用户名</legend>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label>
                                <i>*</i>用户名：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxUserName" runat="server" CssClass="general_input"></asp:TextBox>
                        </td>
                        <td class="desc">
                            ●由<em>字母a～z</em>(不区分大小写)、<em>数字0～9</em>、<em>点</em>、<em>减号</em>或<em>下划线</em>组成<br />
                            ●只能以<em>数字</em>或<em>字母</em>开头和结尾，例如：beijing.2008<br />
                            ●用户名长度为<em>4～18</em>个字符
                            </td>
                    </tr>
                </table>
            </fieldset>
            <fieldset>
                <legend>请填写安全设置<span>(&nbsp;以下信息对保护您的帐号安全极为重要，请您慎重填写并牢记&nbsp;)</span></legend>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label for="password">
                                <i>*</i>登录密码：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxPassword" runat="server" CssClass="general_input" TextMode="Password"></asp:TextBox>
                        </td>
                        <td class="desc">
                            密码长度6～16位，字母区分大小写
                            </td>
                    </tr>
                    <tr>
                        <th class="fleld_lable">
                            <label for="repassword">
                                <i>*</i>重复登录密码：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxRePassword" runat="server" CssClass="general_input" TextMode="Password"></asp:TextBox>
                        </td>
                        <td class="desc">
                            &nbsp;</td>
                    </tr>
                </table>
                <div class="hr">
                </div>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label for="question">
                                密码保护问题：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:DropDownList ID="DropDownList1" runat="server" Width="191px">
                                <asp:ListItem>我就读的第一所学校的名称？</asp:ListItem>
                                <asp:ListItem>我最喜欢的休闲运动是什么？</asp:ListItem>
                                <asp:ListItem>我最喜欢的运动员是谁？</asp:ListItem>
                                <asp:ListItem>我最喜欢的物品的名称？</asp:ListItem>
                            </asp:DropDownList>
                        </td>
                        <td rowspan="2" class="desc">
                            答案长度6～30位，字母区分大小写，一个汉字占两位。用于修复帐号密码
                        </td>
                    </tr>
                    <tr>
                        <th class="fleld_lable">
                            <label for="answer">
                                您的答案：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxAnswer" runat="server" CssClass="general_input"></asp:TextBox>
                        </td>
                    </tr>
                </table>
                <div class="hr">
                </div>
                <table class="table">
                    <tr>
                        <th class="fleld_lable">
                            <label>
                                <i>*</i>出生日期：</label>
                        </th>
                        <td class="fleld_input">
                            <asp:TextBox ID="TextBoxYear" runat="server" MaxLength="4" Width="40px"></asp:TextBox><label
                                for="year">年</label>
                            <asp:DropDownList ID="DropDownListMonth" runat="server">
                                <asp:ListItem>01</asp:ListItem>
                                <asp:ListItem>02</asp:ListItem>
                                <asp:ListItem>03</asp:ListItem>
                                <asp:ListItem>04</asp:ListItem>
                                <asp:ListItem>05</asp:ListItem>
                                <asp:ListItem>06</asp:ListItem>
                                <asp:ListItem>07</asp:ListItem>
                                <asp:ListItem>08</asp:ListItem>
                                <asp:ListItem>09</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                                <asp:ListItem>11</asp:ListItem>
                                <asp:ListItem>12</asp:ListItem>
                            </asp:DropDownList>
                            <label>
                                月</label>
                            <asp:DropDownList ID="DropDownListDay" runat="server">
                                <asp:ListItem>01</asp:ListItem>
                                <asp:ListItem>02</asp:ListItem>
                                <asp:ListItem>03</asp:ListItem>
                                <asp:ListItem>04</asp:ListItem>
                                <asp:ListItem>05</asp:ListItem>
                                <asp:ListItem>06</asp:ListItem>
                                <asp:ListItem>07</asp:ListItem>
                                <asp:ListItem>08</asp:ListItem>
                                <asp:ListItem>09</asp:ListItem>
                                <asp:ListItem>10</asp:ListItem>
                                <asp:ListItem>11</asp:ListItem>
                                <asp:ListItem>12</asp:ListItem>
                                <asp:ListItem>13</asp:ListItem>
                                <asp:ListItem>14</asp:ListItem>
                                <asp:ListItem>15</asp:ListItem>
                                <asp:ListItem>16</asp:ListItem>
                                <asp:ListItem>17</asp:ListItem>
                                <asp:ListItem>18</asp:ListItem>
                                <asp:ListItem>19</asp:ListItem>
                                <asp:ListItem>20</asp:ListItem>
                                <asp:ListItem>21</asp:ListItem>
                                <asp:ListItem>22</asp:ListItem>
                                <asp:ListItem>23</asp:ListItem>
                                <asp:ListItem>24</asp:ListItem>
                                <asp:ListItem>25</asp:ListItem>
                                <asp:ListItem>26</asp:ListItem>