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;