之前我们一直讨论的Model验证仅限于服务端验证，即在Web服务器根据相应的规则对请求数据实施验证。如果我们能够在客户端（浏览器）对用户输入的数据先进行验证，这样会减少针对服务器请求的频率，从而缓解Web服务器访问的压力。ASP.MVC 2.0及其之前的版本采用ASP.NET Ajax进行客户端验证，在ASP.NET MVC 3.0中，jQuery验证框架被引入是我们可以采用Unobtrusive JavaScript的方式进行客户端验证。
一、Unobtrusive JavaScript
Unobtrusive JavaScript已经成为了JavaSccript编程的一个指导方针，Unobtrusive JavaScript体现了一种主流的Web设计策略，即“渐进式增强（PE，Progressive Enhancement）”。它采用分层的方式实现了Web页面内容与功能的分离，即用于实现某种功能的JavaScript不是内嵌于用于展现内容的HTML中，而是作为独立的层次建立在HTML之上。
我们就以验证为例，一个Web页面中具有一个表单，我们需要 对针对表单中三个文本框（foo、bar和baz）的输入进行验证。假设具体的验证操作实现在validate函数中，那么我们可以采用如下的HTML时相应的文本框在失去焦点的时候对输入的数据实施验证。
1: <form action="/"> 2: <input id="foo" type="text" onblur="validate()" /> 3: <input id="bar" type="text" onblur="validate()" /> 4: <input id="baz" type="text" onblur="validate()" /> 5: ... 6: </form>
但这不是一个好的设计，理想的方式是让HTML只用于定义内容呈现的结构，让CSS控制内容呈现的样式，而所有功能的实现定义在JavaScript中，所以用于实现验证对JavaScript的调用不应该出现在HTML中。所以按照Unobtrusive JavaScript的编程方式，我们应该将以内联方式实现的事件注册（onblur="validate()"）替换成如下的形式。
1: <form action="/"> 2: <input id="foo" type="text"/> 3: <input id="bar" type="text"/> 4: <input id="baz" type="text" /> 5: </form> 6: 7: <script type="text/javascript"> 1: 2: window.onload = function () { 3: document.getElementById("foo").onblur = validate; 4: document.getElementById("bar").onblur = validate; 5: document.getElementById("baz").onblur = validate; 6: } </script>
Unobtrusive JavaScript是一个很宽泛的话题，在本篇中不可能展开进行系统地介绍。Unobtrusive JavaScript在jQuery的验证中得到了很好的体现，接下来我们就简单地介绍一下使用jQuery进行验证的编程方式。
二、以内联的方式指定验证规则
jQuery的验证实际上是对存在于表单的输入元素进行验证，它支持一种内联（Inline）的编程方式是我们可以直接将验证的规则直接编写在被验证输入HTML元素的class（表示CSS类型）属性中。考虑到有一些读者对jQuery的验证框架可能不太熟悉，为此我们来做一个简单的实例验证。
虽然演示jQuery验证使用一个单纯的HTML文件就可以了，但是在这里我们还是通过Visual Studio的ASP.NET MVC项目模板创建一个空的Web应用，这样做有两个目的：其一、项目在创建过程中会自动添加包含jQuery本身及其验证插件的.js文件；其二，可以确保我们现在使用的用于验证的.js文件和ASP.NET MVC真正使用的.js文件是一致的。我们创建如下一个默认的HomeController，在Action方法Index中将默认的View呈现出来。
1: public class HomeController : Controller 2: { 3: public ActionResult Index() 4: { 5: return View(new Contact()); 6: } 7: }
我们将作为呈现Web页面的整个HTML定义在Action方法对应的View中，如下所示的代码片断是该View的定义。由于我们使用View来定义最终呈现的完整的HTML，所以我们将Layout设置为Null。
1: @{ 2: Layout = null; 3: } 4: <!DOCTYPE html> 5: <html> 6: <head> 7: <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" /> 8: <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.6.2.js"></script> 1: 2: <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery.validate.js"/> 3: <script type="text/javascript"> 4: $(document).ready(function () { 5: $("form").validate(); 6: $("td:first-child").css("text-align", "right"); 7: }); 8: </script> 9: <style type="text/css"> 10: label.error{color: red;} 11: </style> 12: <title>Index</title> 13: </head> 14: <body> 15: <form action="/"> 16: <table> 17: <tr> 18: <td>姓名：</td> 19: <td><input class="required" id="name" name="name" type="text"/></td> 20: </tr> 21: <tr> 22: <td>出生日期：</td> 23: <td><input class="required date" id="birhthDate" name="birhthDate" type="text"/></td> 24: </tr> 25: <tr> 26: <td>Blog地址：</td> 27: <td><input class="required url" id="blogAddress" name="blogAddress" type="text"/></td> 28: </tr> 29: <tr> 30: <td>Email地址：</td> 31: <td><input class="required email" id="emailAddress" name="emailAddress" type="text"/></td> 32: </tr> 33: <tr> 34: <td colspan="2"><input type="submit" value="保存" /></td> 35: </tr> 36: </table> 37: </form> 38: </body> 39: </html>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， jquery
， 验证
， javasccript
， javascript验证
， javascript表单asp.net验证
， Asp.Mvc
， 一个
， 验证编程方式
， 方式
， jQuery注册验证
， web项目引入jquery
unobtrusive
，以便于您获取更多的相关知识。