之前写过一篇Post用Ajax查询用户名是否重名，这次我们用JQuery的插件validate来实现，更加简单，相比之前用xmlhttprequest来说，不用考虑浏览器兼容的问题，这也是使用是Jquery这个轻量级框架的特点之一。
此处用的是ASP.NET MVC RC,aspx代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestValidation1.aspx.cs" Inherits="DemoMVCForm.Views.FormDemo.TestValidation1" %>
<!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>Demo</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form-sign-up").validate({
rules: {
login: {
required: true,
//here invoke related action
remote: '<%=Url.Action("IsLoginAvailable", "FormDemo") %>'
}
},
messages: {
login: {
required: "请输入用户名",
remote: jQuery.format("{0} 已经有人用了")
}
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
</script>
</head>
<body>
<form action="<%=Url.Action("Register", "FormDemo")%>" method="post" id="form-sign-up">
<h1>Demo表单</h1>
<table id="inputArea">
<tr>
<td>用户名 (试试输入 Petter):</td>
<td><input type="text" name="login" id="login" /></td>
</tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</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 runat="server">
<title>Demo</title>
<script src="http://www.cnblogs.com/Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#form-sign-up").validate({
rules: {
login: {
required: true,
//here invoke related action
remote: '<%=Url.Action("IsLoginAvailable", "FormDemo") %>'
}
},
messages: {
login: {
required: "请输入用户名",
remote: jQuery.format("{0} 已经有人用了")
}
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
}
});
});
</script>
</head>
<body>
<form action="<%=Url.Action("Register", "FormDemo")%>" method="post" id="form-sign-up">
<h1>Demo表单</h1>
<table id="inputArea">
<tr>
<td>用户名 (试试输入 Petter):</td>
<td><input type="text" name="login" id="login" /></td>
</tr>
<tr>
<td colspan="2" align="center"><br /><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Asp.net MVC支持Json，所有返回Json的结果，直接使用是JsonResult,看代码cs，很简单：
cs/// <summary>
/// FormDemoController
/// </summary>
/// <remark>Author : PetterLiu 2009-1-12 17:20 DEV-LIUJUNYUAN</remark>
public class FormDemoController : Controller
{
public JsonResult IsLoginAvailable(string login)
{
//TODO: Do the validation
JsonResult result = new JsonResult();
if (login == "Petter")
result.Data = false;
else
result.Data = true;
return result;
}
}
相关引用：
Asp.net MVC http://www.asp.net/mvc
JQuery http://www.jquery.com
jquery-validation http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Author:PetterLiu http://www.cnblogs.com/wintersun/
