首先在模板页面中引入jquery类库和jquery.validate类库
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/JQuery.Validate.Message_cn.js" type="text/javascript"></script>
其中JQuery.Validate.Message_cn是对jquery.validate类库中的英文出错信息用中文替换，代码如下：
//定义中文消息
var cnmsg = {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.format("请输入一个最大为 {0} 的值"),
min: jQuery.format("请输入一个最小为 {0} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);
一定要注意母板页中引用的先后顺序，因为下边的类库都是基于上边的，所以顺序不能颠倒。
然后在view中用jquery.validate进行验证，view代码如下：
register.aspx//用户注册页面
<form action="/Account/LogOn" method="post" id="form1" runat="server">
<%: Html.ValidationSummary(true, "帐户创建不成功。请更正错误并重试。")%>
<div>
<fieldset>
<legend>帐户信息</legend>
<div class="editor-label">
<%: Html.Label("用户名")%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(m => m.user_name)%>
<%: Html.ValidationMessageFor(m => m.user_name)%>
</div>
<div class="editor-label">
<%: Html.Label("邮箱")%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(m => m.Email)%>
<%: Html.ValidationMessageFor(m => m.Email)%>
</div>
<div class="editor-label">
<%: Html.Label("密码")%>
</div>
<div class="editor-field">
<%: Html.PasswordFor(m => m.pwd)%>
<%: Html.ValidationMessageFor(m => m.pwd)%>
</div>
<div class="editor-label">
<%: Html.Label("确认密码")%>
</div>
<div class="editor-field">
<%: Html.Password("pwdagain")%>
<%: Html.ValidationMessage("pwdagain")%>
</div>
<p>
<input type="submit" value="注册" />
</p>
</fieldset>
</div>
</form>
<script type="text/javascript">
function InitRules() {
opts = {
rules:
{
user_name:
{
required: true,
remote: {
type: "post",
datatype: "json",
url: "/Users/IsUserExist",
data: {
user_name: function () {
return $("#user_name").val();
}
}
}
}
,
Email:
{
email: true
},
pwd:
{
required: true,
minlength: 6
},
pwdagain:
{
required: true,
minlength: 6,
equalTo: "#pwd"
}
},
messages:
{
user_name:
{
required: "请输入用户名",
remote: "该用户已存在!"
}
}
}
}
jQuery(document).ready(function () {
InitRules();
if (opts != undefined || opts != null) {
jQuery("#<%=form1.ClientID %>").validate(opts);
} else {
jQuery("#<%=form1.ClientID %>").validate();
}
});
</script>
UsersController代码如下：
public class UsersController : Controller
{
//
// GET: /User/
UserRepository userRepository = new UserRepository();
public JsonResult IsUserExist(string user_name)
{
//JsonResult result = new JsonResult();
if (userRepository.ValidateUser(user_name))//查询是否存在该用户
{
//result.Data = false;
return Json(false);
}
else
{
//result.Data = true;
return Json(true);
}
//return Json(result, JsonRequestBehavior.AllowGet);
}
注意直接返回json(true)或json（false）即可。