<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidatorDemo.aspx.cs" Inherits="ValidatorDemo" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!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 runat="server">
<title>表单提交验证</title>
<script src="JS/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="JS/jquery.validate.js" type="text/javascript"></script>
<link href="css/validator.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
$(function() {
$("#formRegster").validate({
rules: {
t_username: { required: true, maxlength: 6, minlength: 4 },
t_pass: { required: true },
t_pass2: { required: true, equalTo: "#t_pass" },
t_email: { required: true, email: true },
t_homepage: { required: true, url: true }
},
messages: {
t_username: { required: '用户名不能为空！', maxlength: '用户名的长度最长不能超过6个字符', minlength: '用户名的长度最少不得少于4个字符' },
t_pass: { required: '用户密码不能为空！' },
t_pass2: { required: '用户验证密码不能为空', equalTo: '两次输入的密码不一致' },
t_email: { required: '用户邮箱不能为空！', email: '用户邮箱输入不正确！' },
t_homepage: { required: '用户主也不能为空！', url: '用户主页输入错误！' }
},
errorElement: "em",
success: function(em) {
em.text(" ").addClass("success");
}
});
})
</script>
<style type="text/css">
<!--
em.error {
font-size: 14px;
color: #F00;
text-decoration: none;
background-image: url(images/unchecked.gif);
background-repeat: no-repeat;
margin:0 0 0 15px;
padding:0 0 0 20px;
}
em.success {
font-size: 14px;
color: #F00;
text-decoration: none;
background-image: url(images/checked.gif);
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<form id="formRegster" name="formRegster" method="post" action="">
<p>
<strong>用户注册： </strong>
</p>
<p>
用户名：
<input type="text" name="t_username" id="t_username" />
<em>*</em>
</p>
<p>
密 码：
<input type="password" name="t_pass" id="t_pass" />
<em>*</em></p>
<p>
验证密码：
<input type="password" name="t_pass2" id="t_pass2" />
<em>*</em></p>
<p>
电子邮件：
<input type="text" name="t_email" id="t_email" />
<em>*</em></p>
<p>
个人主页：
<input type="text" name="t_homepage" id="t_homepage" />
<em>*</em></p>
<p>
个性签名：
<textarea name="textarea" id="textarea" cols="45" rows="10"></textarea>
</p>
<p>
<input type="submit" name="button" id="button" value="确认提交" />
</p>
</form>
</body>
</html>
