第三节mvc jQuery 客户端验证
来源:互联网 发布:中国对美国出口额数据 编辑:程序博客网 时间:2024/04/29 18:58
正如前面提到的,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 验证可以运行每一个击键和焦点事件上的规则,给用户提供关于错
误值的及时反馈。当出现错误时,验证插件也能阻止表单提交,这就意味着不需要在服务
器上处理注定要失败的请求。
为了更加详细地理解这些过程的工作原理,下一节将介绍自定义客户端验证。
用程序项目的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 验证可以运行每一个击键和焦点事件上的规则,给用户提供关于错
误值的及时反馈。当出现错误时,验证插件也能阻止表单提交,这就意味着不需要在服务
器上处理注定要失败的请求。
为了更加详细地理解这些过程的工作原理,下一节将介绍自定义客户端验证。
- 第三节mvc jQuery 客户端验证
- jQuery第三节----事件
- jQuery第三节---jQuery效果
- ASP.NET MVC - 客户端验证:jQuery的验证
- MVC学习十三:MVC3客户端自定义验证 -Jquery: addMinMax
- 2014年辛星jquery解读第三节 Ajax
- MVC 客户端输入验证
- MVC客户端验证
- 第8章 Ajax(Jquery、Ajax辅助方法、客户端验证)
- MVC学习笔记之:ASP.NET MVC的客户端验证-jQuery.validate验证结合Model验证中的实现
- Jquery Mobile 客户端验证
- 第二节 mvc 客户端验证
- jQuery.Validate进行客户端验证
- 客户端验证:JQuery Validation Plugin
- redis集群安装配置数据迁移和客户端(java方向)第三节,客户端
- 第三节 什么是ERP
- 第三节 CFileOpt类
- 第三节第五周
- What are the differences between LDAP and Active Directory?
- 学习笔记:PHPExcel PHPExcel_Style_Conditional() getStartColor()->setARGB('');结果显示黑色或无色
- c++课程设计
- PyQt+OpenCV 录制保存、播放视频
- Hibernate注解详解
- 第三节mvc jQuery 客户端验证
- shell中常用的特殊符号
- 免费Web视频及音频播放器
- Eclipse里启动Tomcat,配置内存大小
- Android播放视频(四)
- Flex 日期或时间相加
- 针对 Rails 开发者的 Django 比较
- 学习ios的感悟
- 舒迅:产品经理必读的九步法