HTML注册页面和ASP.NET注册页面比较-CSDN博客

本文链接：https://blog.csdn.net/zou_yufei/article/details/10248803

1.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">


        function t_userName() {
            if ($("#userName").val().length == 0) {
                $("#err_userName").css("visibility", "visible");
                return false;
            } else {
                $("#err_userName").css("visibility", "hidden");
                return true;
            }
        }

        function t_pwd() {
            if ($("#pwd").val().length == 0) {
                $("#err_pwd").css("visibility", "visible");
                return false;
            } else {
                $("#err_pwd").css("visibility", "hidden");
                return true;
            }
        }

        function t_repwd() {
            if ($("#repwd").val() != $("#pwd").val()) {
                $("#err_repwd").css("visibility", "visible");
                return false;
            } else {
                $("#err_repwd").css("visibility", "hidden");
                return true;
            }
        }

        function t_email() {
            //声明正则表达式  
            var t = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            //正则表达式调用test方法 来测试   
            if (t.test($("#email").val())) {
                $("#err_email").css("visibility", "hidden");
                return true;
            } else {
                $("#err_email").css("visibility", "visible");
                return false;
            }
        }

        function t_age() {
            if ($("#age").val() <= 0 || $(this).val() >= 150) {
                $("#err_age").css("visibility", "visible");
                return false;
            } else {
                $("#err_age").css("visibility", "hidden");
                return true;
            }
        }

        //表单验证方法
        function validate() {
            return t_userName() && t_pwd() && t_repwd() && t_email() && t_age();
        }

    </script>
</head>
<body>
    <form action="RegisterHTML.ashx" method="post" οnsubmit="return validate()">
    <table align='center' style="border-style: inset;">
        <tr>
            <td colspan='2' align="center">
                <b>用户注册</b>
            </td>
        </tr>
        <tr>
            <td align="right">
                用户名：
            </td>
            <td align="left">
                <input id="userName" name="userName" type="text" οnblur="t_userName()" /><label id="err_userName"
                    style="color: Red; visibility: hidden">请输入用户名</label>
            </td>
        </tr>
        <tr>
            <td align="right">
                密码：
            </td>
            <td align="left">
                <input id="pwd" name="pwd" type="password" οnblur="t_pwd()" /><label id="err_pwd"
                    style="color: Red; visibility: hidden">请输入密码</label>
            </td>
        </tr>
        <tr>
            <td align="right">
                确认密码：
            </td>
            <td align="left">
                <input id="repwd" name="repwd" type="password" οnblur="t_repwd()" /><label id="err_repwd"
                    style="color: Red; visibility: hidden">两次密码输入不一致</label>
            </td>
        </tr>
        <tr>
            <td align="right">
                Email：
            </td>
            <td align="left">
                <input id="email" name="email" type="text" οnblur="t_email()" /><label id="err_email"
                    style="color: Red; visibility: hidden">格式错误</label>
            </td>
        </tr>
        <tr>
            <td align="right">
                年龄：
            </td>
            <td align="left">
                <input id="age" name="age" type="text" οnblur="t_age()" /><label id="err_age" style="color: Red;
                    visibility: hidden">超出范围</label>
            </td>
        </tr>
        <tr>
            <td align="right">
                性别：
            </td>
            <td align="left">
                <input type="radio" id="male" value="male" name="gender" checked="checked" />男  <input
                    type="radio" id="female" name="gender" value="female"/>女
            </td>
        </tr>
        <tr>
            <td align="right">
                爱好：
            </td>
            <td align="left">
                <input type="checkbox" name="hobby" value="游泳"/>游泳<br />
                <input type="checkbox" name="hobby" value="读书"/>读书<br />
                <input type="checkbox" name="hobby" value="钓鱼"/>钓鱼<br />
                <input type="checkbox" name="hobby" value="上网"/>上网
            </td>
        </tr>
        <tr>
            <td align="right">
            </td>
            <td align="left">
                <input type="submit" value="提交" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

2.ASP.NET注册页面

 <table align='center' style="border-style: inset;">
        <tr>
            <td colspan='2' align="center">
                <b>用户注册</b>
            </td>
        </tr>
        <tr>
            <td align="right">
                用户名：
            </td>
            <td align="left">
                <asp:TextBox ID="txb_userName" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="err_userName" runat="server" ErrorMessage="请填写用户名"
                    ControlToValidate="txb_userName" ForeColor="Red" SetFocusOnError="True" ValidationGroup="register" />
            </td>
        </tr>
        <tr>
            <td align="right">
                密码：
            </td>
            <td align="left">
                <asp:TextBox ID="txb_pwd" runat="server" TextMode="Password"></asp:TextBox>
                <asp:RequiredFieldValidator ID="err_pwd" runat="server" ErrorMessage="请填写密码" ControlToValidate="txb_pwd"
                    ForeColor="Red" SetFocusOnError="True" ValidationGroup="register" />
            </td>
        </tr>
        <tr>
            <td align="right">
                确认密码：
            </td>
            <td align="left">
                <asp:TextBox ID="txb_repwd" runat="server" TextMode="Password"></asp:TextBox>
                <asp:RequiredFieldValidator ID="err__repwd" runat="server" ErrorMessage="请再次填写密码"
                    ControlToValidate="txb_repwd" ForeColor="Red" SetFocusOnError="True" ValidationGroup="register"
                    Display="Dynamic" />
                <asp:CompareValidator ID="err_repwd" runat="server" ErrorMessage="两次密码输入不一致" ControlToCompare="txb_pwd"
                    ControlToValidate="txb_repwd" ForeColor="Red" SetFocusOnError="True" ValidationGroup="register" />
            </td>
        </tr>
        <tr>
            <td align="right">
                Email：
            </td>
            <td align="left">
                <asp:TextBox ID="txb_email" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="err__email" runat="server" ErrorMessage="请填写邮箱" ControlToValidate="txb_email"
                    ForeColor="Red" SetFocusOnError="True" ValidationGroup="register" Display="Dynamic" />
                <asp:RegularExpressionValidator ID="err_email" runat="server" ErrorMessage="格式错误"
                    ControlToValidate="txb_email" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
                    ForeColor="Red" SetFocusOnError="True" ValidationGroup="register" />
            </td>
        </tr>
        <tr>
            <td align="right">
                年龄：
            </td>
            <td align="left">
                <asp:TextBox ID="txb_age" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator ID="err__age" runat="server" ErrorMessage="请填写年龄" ControlToValidate="txb_age"
                    ForeColor="Red" SetFocusOnError="True" ValidationGroup="register" Display="Dynamic" />
                <asp:RangeValidator ID="err_age" runat="server" ErrorMessage="年龄范围错误" ControlToValidate="txb_age"
                    MaximumValue="150" MinimumValue="1" ForeColor="Red" SetFocusOnError="True" Type="Integer"
                    ValidationGroup="register" />
            </td>
        </tr>
        <tr>
            <td align="right">
                性别：
            </td>
            <td align="left">
                <asp:RadioButton ID="rdo_male" runat="server" Text="男" GroupName="gender" />
                <asp:RadioButton ID="rdo_female" runat="server" Text="女" GroupName="gender" />
            </td>
        </tr>
        <tr>
            <td align="right">
                爱好：
            </td>
            <td align="left">
                <asp:CheckBox ID="chb_swim" runat="server" Text="游泳" /><br />
                <asp:CheckBox ID="chb_read" runat="server" Text="读书" /><br />
                <asp:CheckBox ID="chb_fish" runat="server" Text="钓鱼" /><br />
                <asp:CheckBox ID="chb_web" runat="server" Text="上网" />
            </td>
        </tr>
        <tr>
            <td align="right">
            </td>
            <td align="left">
                <asp:Button ID="btn_submit" runat="server" Text="提交" OnClick="btn_submit_Click" ValidationGroup="register" />
            </td>
        </tr>
    </table>

总结：

1）html页面的验证需要自写JS代码，asp.net提供了验证控件，所以在开发时间上，asp.net要快得多。

2）如果asp.net实现js的单个和整个表单的验证还有些需要注意的地方：

a.表单中的textbox、radiobutton和checkbox的autopostback属性要设置为false,不然点击会使页面回传；

b.表单的提交按钮和所有验证控件的validateGroup属性要设置相同值，这样相当于给表单设定了onsubmit事件，用于提交表单时验证所有文本框；

c.RangeValidator控件要记得设置Type属性，即按什么类型进行比较。

d.邮箱的正则表达式验证控件、年龄的范围验证控件，可以通过空值的验证，所有还要同时添加非空验证控件，并设置验证控件的display=dynamic，这样如果没有触发验证，则验证控件不会占用页面位置，方便对齐。

e.有时，asp页面回传会导致密码清空，可以在页面load的事件中填入如下代码

this.txb_pwd.Attributes["value"] = this.txb_pwd.Text;
this.txb_repwd.Attributes["value"] = this.txb_repwd.Text;