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

在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的。服务端验证最终实现在相应的ModelValidator中,而最终的验证规则定义在相应的ValidationAttribute中;而客户端验证规则通过HtmlHelper<TModel>相应的扩展方法(比如TextBoxFor、EditorFor和EdidtorForModel等)出现在生成的被验证HTML元素中。毫无疑问,服务端验证和客户端验证必须采用相同的验证规则,那么通过应用ValidationAttribute特性定义的验证规则也同样体现在基于客户端验证规则的HTML上。

一、ValidationAttribute与HTML

ASP.NET MVC默然采用基于ValidationAttribute特性的声明式Model验证,服务端验证最终实现在两个重写的IsValid方法中。对于客户端验证,ASP.NET MVC对jQuery的验证插件进行了扩展,实现了另一种不同的内联方式是我们 可以将验证规则定义在被验证输入元素的属性中。为了让客户端和服务端采用相同的验证规则,应用在Model类型某个属性上的ValidationAttribute特性最终会体现在目标属性对应的HTML元素上。

   1: public class Contact   2: {   3:     [DisplayName("姓名")]   4:     [Required(ErrorMessage ="请输入{0}!")]   5:     [StringLength(8, ErrorMessage="作为{0}字符串长度不能超过{1}!")]   6:     public string Name { get; set; }   7:   8:     [DisplayName("电子邮箱地址")]   9:     [RegularExpression(@"^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$",ErrorMessage="请输入正确的电子邮箱地址!")]  10:     public string EmailAddress { get; set; }  11: }

假设我们具有如上一个数据类型Contact,RequiredAttribute和StringLengthAttribute特性应用到表示姓名的Name属性上用于确保用于必须输入一个不超过128个字符的字符串,而表示Email地址的EmailAddress属性应用了一个RegularExpressionAttribute用于确保用于输入一个合法的Email地址。在一个以此Contact为Model类型的View中,如果我们调用HtmlHelper<TModel>的扩展方法EditorForModel,最终会生成如下一段HTML。

   1: <div class="editor-label">   2:   <label for="Name">姓名</label>   3: </div>   4:   5: <div class="editor-field">   6:   <input class="text-box single-line"   7:          data-val            ="true"   8:          data-val-length     ="作为姓名字符串长度不能超过8!"   9:          data-val-length-max ="8"  10:          data-val-required   ="请输入姓名!"  11:          id="Name" name="Name" type="text" value="" />  12:   <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>  13: </div>  14:  15: <div class="editor-label">  16:   <label for="EmailAddress">电子邮箱地址</label>  17: </div>  18:  19: <div class="editor-field">  20:   <input class="text-box single-line"  21:          data-val               ="true"  22:          data-val-regex         ="请输入正确的电子邮箱地址!"  23:          data-val-regex-pattern ="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$"  24:          id="EmailAddress" name ="EmailAddress" type="text" value="" />  25:   <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>  26: </div>

通过上面的这段HTML我们可以看到,对应着Model对象两个属性的<input>元素具有一个“data-val”属性和一系列以“data-val-”为前缀的属性,前者表示是否需要对用户输入的值进行验证,后者则代表相应的验证规则。具体来说,去除“data-val-”前缀后的属性名称对应着采用jQuery验证时对应的验证规则名称。

一般来说,一个ValidationAttribute对应着一种验证类型和一系列可选的验证参数。比如RequiredAttribute、StringLengthAttribute和RegularExpressionAttribute对应的验证类型分别是“required”、“length”和“regex”,而StringLengthAttribute和RegularExpressionAttribute各自具有一个验证参数length-max(表示允许的字符串最大长度)和regex-pattern(正则表达式)。验证错误消息一般作为验证类型属性的值,而验证参数对应的属性值自然就是相应的属性值。

对于上面生成的HTML还有一点值得一提的是:对应着被验证属性的<input>元素会紧跟一个<span>元素用于显示验证失败后的错误消息。该<span>元素的CSS类型为“field-validation-valid”,我们可以通过它来定制错误消息的显示样式。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索客户端
, 验证
, 属性
, 规则
, ValidationAttribute
, 一个
, 客户端验证
, mvc参数验证
验证规则
,以便于您获取更多的相关知识。

时间: 2024-10-29 11:04:31

ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现的相关文章

DynamicData for Asp.net Mvc留言本实例 中篇 新建.删除.数据验证

上篇咱完成了显示列表的功能,下面接着来 也许您有疑问,这个显示列表不是和正常的Asp.net Mvc差不多吗?也是个foreach只是由原来的<%=字段%>变成了<% Html.RenderDynamicField(a, "Title"); %>之流,反倒是多写了字,除了分页那里爽一点以外,其它地方没见着好处. 下面我们就来看看DynamicData for Asp.net Mvc的好处 前提工作 总有前提工作真是累 这回还是在Application_Start

ASP.NET MVC的客户端验证:jQuery的验证

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

ASP.NET MVC 音乐商店 - 6. 使用 DataAnnotations 进行模型验证

转自http://www.cnblogs.com/haogj/archive/2011/11/16/2251920.html 在前面的创建专辑与编辑专辑的表单中存在一个问题:我们没有进行任何验证.字段的内容可以不输入,或者在价格的字段中输入一些字符,在执行程序的时候,这些错误会导致数据库保存过程中出现错误,我们将会看到来自数据库的错误信息. 通过为模型类增加数据描述的 DataAnnotations ,我们可以容易地为应用程序增加验证的功能.DataAnnotations  允许我们描述希望应用

使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码_实用技巧

这两天在使用Asp.net MVC 4开发COMET消息通知机制,在后端使用异步线程对消息进行订阅,客户端通过AJAX长连接请求MVC中的ACTION,如:http://localhost/event/imageSet,即表示获取ImageSet对象的变更消息(新增,更新和删除消息). 1.事件消息的类IEventEntity<TEntity>类的定义 复制代码 代码如下: public interface IEntityEvent<TEntity>    {        //变

Asp.net MVC示例项目“Suteki.Shop”分析之数据验证

在Suteki.Shop,实现了自己的数据校验机制,可以说其设计思路还是很有借鉴价值的.而使用这种 机制也很容易在Model中对相应的实体对象(属性)添加校验操作方法.下面就来介绍一下其实现方式. 首先,看一下这样类图: 在Suteki.Shop定 义一个"IValidatingBinder"接口,其派生自IModelBinder: 其接口中定义了一个 重载方法UpdateFrom,其要实现的功能与MVC中UpdateFrom一样,就是自动读取我们在form中定义的有些 元素及其中所包

【MVC版本】MVC3、MVC4之MODEL验证大比拼

1.密码验证 MVC3 [System.ComponentModel.DataAnnotations.Compare("Password", ErrorMessage = "密码和确认密码不匹配.")] MVC4 [System.Web.Mvc.Compare("Password", ErrorMessage = "密码和确认密码不匹配.")]  

ASP.NET MVC 4.0 CKEditor jquery 文章管理 图片上传 解决方案

文章修改,新增业务的C#代码 [HttpPost] [ValidateInput(false)] public ActionResult AddNew(FormCollection values) { var db = new ddrDBEntities(); XinWen obj = new XinWen(); if (!string.IsNullOrEmpty(Request["id"])) { var id = Guid.Parse(Request["id"]

Asp.net MVC示例项目“Suteki.Shop”分析之Model和Service

在Suteki.Shop中Model的原型是基于Linq to SQL创建的,其dbml文件位于Suteki.Shop\Shop.dbml. 而Suteki.Shop在此文件的基本上,以"partial class "的方式在Suteki.Shop\Model文件夹下 创建了相应的类文件以扩展Shop.dbml中Model类的一些方法和属性声明,如下图: 为了便于 大家理解,下面以Model中的Product.cs为例进行说明. Product是对网站中所销售商品的数据信 息类.在其中

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

ASP.NET MVC默认采用基于标准特性的Model验证机制,但是只有应用在Model类型及其属性上的ValidationAttribute才有效.如果我们能够将ValidationAttribute特性直接应用到参数上,我们不但可以实现简单类型(比如int.double等)数据的Model验证,还能够实现"一个Model类型,多种验证规则",本篇文章将为你提供相关的解决方案(源代码从这里下载). 一.ValidationAttribute本身是可以应用到参数上的 如果你够细心应该会