之前我们一直讨论的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="/">
   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>

除了通过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方法而已。

   1: <script type="text/javascript">
   1:  
   2:     $(document).ready(function () {
   3:         $("form").validate();
   4:     });
</script>

现在运行我们的程序,一个用于提交个人信息的页面会被呈现出来。当我们输入不合法的数据时相应的错误消息显示在被验证元素的右侧,具体的效果如下图所示。

三、单独指定验证规则和错误消息

验证规则其实可以不用以内联的方式定义在被验证HTML元素中,可以直接定义在用于实施验证的validate方法中。该方法不仅仅可以指定表单被验证的输入元素对应的验证规则,还可以指定验证消息,以及其他验证行为。现在我们将上面演示实例中的View的HTML进行相应的修改,将包含在表单中的四个文本框通过class属性设置的验证规则移除。然后再调用表单validate方法实施验证的时候按照如下的方式手工地为被验证输入元素指定相应的验证规则和错误消息,验证规则和错误消息与验证元素之间是通过name属性(不是id属性)进行关联的。

   1: <script type="text/javascript">
   1:  
   2:     $(document).ready(function () {
   3:         $("form").validate({
   4:             rules   :{
   5:                 name        :{required: true},
   6:                 birhthDate  :{required: true, date: true},
   7:                 blogAddress :{url: true},
   8:                 emailAddress:{required: true, email: true}
   9:             },
  10:  
  11:             messages: {
  12:                 name        :{ required: "请输入姓名" },
  13:                 birhthDate  :{required: "请输入出生日期", date: "请输入一个合法的日期"},
  14:                 blogAddress :{ url: "请输入一个合法的URL" },
  15:                 emailAddress:{required: "请输入Email地址", email: "请输入一个合法的Email地址"}
  16:             }           
  17:         });
  18:     });
</script>

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

ASP.NET MVC的客户端验证:jQuery的验证的更多相关文章

  1. ASP.NET MVC 5 学习教程:添加验证

    原文 ASP.NET MVC 5 学习教程:添加验证 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...

  2. 【译】ASP.NET MVC 5 教程 - 10:添加验证

    原文:[译]ASP.NET MVC 5 教程 - 10:添加验证 在本节中,我们将为Movie模型添加验证逻辑,并确认验证规则在用户试图使用程序创建和编辑电影时有效. DRY 原则 ASP.NET M ...

  3. ASP.NET MVC中对Model进行分步验证的解决方法

    原文:ASP.NET MVC中对Model进行分步验证的解决方法 在我之前的文章:ASP.NET MVC2.0结合WF4.0实现用户多步注册流程中将一个用户的注册分成了四步,而这四个步骤都是在完善一个 ...

  4. [ASP.NET MVC]如何定制Numeric属性/字段验证消息

    原文:[ASP.NET MVC]如何定制Numeric属性/字段验证消息 对于一个Numeric属性/字段,ASP.NET MVC会自动进行数据类型的验证(客户端验证),以确保输入的是一个有效的数字, ...

  5. ASP.NET没有魔法——ASP.NET MVC使用Oauth2.0实现身份验证

    随着软件的不断发展,出现了更多的身份验证使用场景,除了典型的服务器与客户端之间的身份验证外还有,如服务与服务之间的(如微服务架构).服务器与多种客户端的(如PC.移动.Web等),甚至还有需要以服务的 ...

  6. ASP.NET MVC使用Oauth2.0实现身份验证

    随着软件的不断发展,出现了更多的身份验证使用场景,除了典型的服务器与客户端之间的身份验证外还有,如服务与服务之间的(如微服务架构).服务器与多种客户端的(如PC.移动.Web等),甚至还有需要以服务的 ...

  7. [转][ASP.NET MVC]如何定制Numeric属性/字段验证消息

    本文转自:http://www.cnblogs.com/artech/archive/2012/02/13/NumericPropertyValidation.html 对于一个Numeric属性/字 ...

  8. ASP.NET MVC基于标注特性的Model验证:将ValidationAttribute应用到参数上

    原文:ASP.NET MVC基于标注特性的Model验证:将ValidationAttribute应用到参数上 ASP.NET MVC默认采用基于标准特性的Model验证机制,但是只有应用在Model ...

  9. ASP.NET MVC基于标注特性的Model验证:一个Model,多种验证规则

    原文:ASP.NET MVC基于标注特性的Model验证:一个Model,多种验证规则 对于Model验证,理想的设计应该是场景驱动的,而不是Model(类型)驱动的,也就是对于同一个Model对象, ...

  10. ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现

    在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的.服务端验证最终实现在相应的ModelVa ...

随机推荐

  1. python 高级之面向对象初级

    python 高级之面向对象初级 本节内容 类的创建 类的构造方法 面向对象之封装 面向对象之继承 面向对象之多态 面向对象之成员 property 1.类的创建 面向对象:对函数进行分类和封装,让开 ...

  2. [LeetCode] Implement Trie (Prefix Tree) 实现字典树(前缀树)

    Implement a trie with insert, search, and startsWith methods. Note:You may assume that all inputs ar ...

  3. MySQL SQL 注入

    如果您通过网页获取用户输入的数据并将其插入一个MySQL数据库,那么就有可能发生SQL注入安全的问题. 本博文将为大家介绍如何防止SQL注入,并通过脚本来过滤SQL中注入的字符. 所谓SQL注入,就是 ...

  4. C# 测试服务器连接 Ping

    .aspx页: 一个textbox(txtIP)输入服务器地址,一个button(Btn_ok)点击测试,一个listbox(lboxContent)显示测试信息 .aspx.cs页: using S ...

  5. FLASH结构

    mergedir/code.tmp.bin 压缩未加密文件的FLASH文件 mergedir/sfs/nvm.bin   shareData数据文件,未加密.未压缩 数据克隆:DATA/ALL APP ...

  6. centos7配置mono和jexus5.6.2

    一.通过集成包安装mono: 1.添加Mono的 包库源: 把Mono Project public Jenkins GPG signing  导入系统 wget http://jenkins.mon ...

  7. 记codevs第一次月赛

    第一次参加这种有奖励的比赛(没错,我就是为猴子而去的 一年没怎么碰代码果然手生,还是用没写多久的C++,差点全跪了 T1数学奇才琪露诺: 首先定义一个函数F(x),F(x)=x的各个数位上的数字和 然 ...

  8. iStat for mac

    iStat for mac 电脑硬件信息检测软件,安装完成后它位于"系统偏好设定"的应用程序面板,让您从选单列监测系统的各项丰富资讯,又不会占用使用者太大的桌面空间,提供的信息包括 ...

  9. render_template 网页模板

    模板简单介绍: 视图函数:视图函数就是装饰器所装饰的方法,视图函数的主要作用是生成请求的响应,这是最简单的请求.实际上,视图函数有两个作用:处理业务逻辑和返回响应内容.在大型应用中,把业务逻辑和表现内 ...

  10. mosh

    mosh 是一款使用 UDP 连接 C/S 的终端工具, 服务器只需安装好 mosh 套件, 并启动 SSH 服务, 等待 Client 连接即可. Client (mosh-client) 连接时, ...