第三节mvc jQuery 客户端验证

 正如前面提到的，jQuery 验证插件(jquery.validate)默认情况下位于ASP.NET  MVC   3 应

用程序项目的Scripts 文件夹下。如果想实现要客户端验证，那么需要一对脚本标签。如果查

看StoreManager 文件夹里的Edit 或Create 视图，就会看到下面的代码：

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"
        type="text/javascript"></script>

    第一个script 标签加载精简的jQuery 验证插件。jQuery 验证实现了挂接到事件需要的

所有逻辑(像提交和焦点事件) ，除此之外，还要执行客户端验证规则。该插件提供了丰富

的默认验证规则集。

    第二个script 标签包括用于jQuery 验证的Microsoft 非侵入式适配器。这段脚本中的代

码用来获取ASP.NET MVC 框架发出的元数据，并将这些元数据转换成jQuery 验证能够理

解的数据(所以它能够做所有的困难工作) 。那么，这些元数据是从哪里来的呢？首先，还

记得前面如何创建专辑编辑视图吗？使用视图中的EditorForModel ，也就是Shared 文件夹

中的Album 编辑器模板。该模板中有如下代码：

    <p>
        @Html.LabelFor(model => model.Title)
        @Html.TextBoxFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)
    </p>
    <p>
        @Html.LabelFor(model => model.Price)
        @Html.TextBoxFor(model => model.Price)
        @Html.ValidationMessageFor(model => model.Price)
    </p>

    这里，辅助方法TextBoxFor 是关键。它为基于元数据的模型构建输入元素。当TextBoxFor

看到验证元素据( 比如Price 和Title 属性上的Required 和StringLength 注解)时，它会将这

些元数据放入到渲染的HTML 中。Title 属性的编辑器的标记如下所示：

    <input
       data-val="true" data-val-length="The field Title must be a string with a maximum length
           of 160."
           data-val-length-max="160" data-val-required="An Album Title is
           required"
           id="Title" name="Title" type="text" value="Greatest Hits" />

       这里，再一次与 data-特性见面了。上述代码中是jquery.validate.unobtrusive  脚本负责

   使用这个元数据( 以data-val="true"开始)查找元素，并与jQuery 验证插件接合来执行元数据

   内的验证规则。jQuery 验证可以运行每一个击键和焦点事件上的规则，给用户提供关于错

   误值的及时反馈。当出现错误时，验证插件也能阻止表单提交，这就意味着不需要在服务

   器上处理注定要失败的请求。

为了更加详细地理解这些过程的工作原理，下一节将介绍自定义客户端验证。