之前我们一直讨论的Model验证仅限于服务端验证，即在Web服务器根据相应的规则对请求数据实施验证。如果我们能够在客户端（浏览器）对用户输入的数据先进行验证，这样会减少针对服务器请求的频率，从而缓解Web服务器访问的压力。ASP.MVC 2.0及其之前的版本采用ASP.NET Ajax进行客户端验证，在ASP.NET MVC 3.0中，jQuery验证框架被引入是我们可以采用Unobtrusive JavaScript的方式进行客户端验证。[本文已经同步到《How ASP.NET MVC Works?》中]

目录
一、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="/">

   3:     ="bar" />

   6: </form>

但这不是一个好的设计，理想的方式是让HTML只用于定义内容呈现的结构，让CSS控制内容呈现的样式，而所有功能的实现定义在JavaScript中，所以用于实现验证对JavaScript的调用不应该出现在HTML中。所以按照Unobtrusive JavaScript的编程方式，我们应该将以内联方式实现的事件注册（onblur="validate()"）替换成如下的形式。

   7: script ="text/javascript">
   2:     window.onload = function () {
   4:         document.getElementById("bar").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呈现出来。

   4:     {

   6:     }

   1: @{

   3: }

headlink href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" ="text/css"    8:     ="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.6.2.js"></   2:     <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery.validate.js"/>

   4:         $(document).ready(   5:             $("form").validate();

   7:         });

  11:     style  12:     title>Index  13:   14: body  15:       16:     table  17:         tr  18:             td>姓名：  19:             ><class="required"  ="name" name/></  20:           21:           22:             >出生日期：  23:             ="required date" ="birhthDate"   24:           25:           26:             >Blog地址：  27:             ="required url" ="blogAddress"   28:           29:           30:             >Email地址：  31:             ="required email" ="emailAddress"   32:           33:           34:             td colspan="2"="submit" value="保存"   35:           36:       37:       38:   39: >

除了通过CSS文件应用和手工定义样式（label.error{color: red;}）之外，我们需要将两个必要的.js文件包含进行，一个是jQuery的核心文件jquery-1.6.2.js，另一个是实现验证的jquery.validate.js。整个HTML文件的主体部分是一个表单，我们可以通过其中的文本框输入一些个人信息（姓名、出生日期、Blog地址和Email地址），最后点击“保存”按钮对输入数据进行提交。

对于这四个文本框对应的<input>元素来说，其class属性在这里被用于进行验证规则的定义。其中required表示对应的数据是必须的，而date、url和email则对输入数据的格式进行验证以确保是一个合法的日期、URL和Email地址。而真正对输入实施验证体现在如下一段JavaScript调用中，在这里我们仅仅是调用<form>元素的validate方法而已。

   5:                 name        :{required: true},

   7:                 blogAddress :{url:    8:                 emailAddress:{required: true}

  11:             messages: {

  16:             }           

  18:     });

再次运行我们的程序，我们定制的错误消息就会按照如图6-9所示的效果呈现出来。（S612）

ASP.NET MVC的客户端验证：jQuery的验证
ASP.NET MVC的客户端验证：jQuery验证在Model验证中的实现
ASP.NET MVC的客户端验证：自定义验证

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!