在前面的文章中介绍了用户的注册及登录功能, 在注册用户时可以通过代码的形式限制用户名及密码的格式, 如果不符合要求那么就无法完成操作, 如下图:
该功能的原理是 Identity 基于的 Entity Framework 组件在添加用户之前对用户提交数据进行校验后给出的错误信息
数据校验功能在每一个软件系统中都是非常必要的, 为了避免用户输入无效或非法数据导致的系统错误, 需要在数据进行处理或持久化之前对其进行验证确保数据的正确有效性
本文将从以下几点来介绍 ASP.NET MVC 中的模型验证机制:
输入验证
.NET 的验证简介
ASP.NET MVC 的后端模型验证
ASP.NET MVC 的客户端模型验证
关于 ASP.NET MVC 的客户端验证
自定义 ASP.NET MVC 中的模型验证
输入验证
输入验证的目的就是用来判断一个变量是否能够满足规定的要求, 这里既然提到了判断那么使用程序来实现时最直接的方式就是通过判断语句来完成, 如:
但是在. Net 中是否有一种统一的方式来实现数据的验证呢? 否则每次通过判断语句来写验证代码既不能重用又影响阅读
.NET 的验证简介
在. Net 中提供了一种基于特性的数据类型标记 (DataAnnotations) 验证机制
1 数据类型的标记:
.Net 中有一个名为 system.componentmodel.dataannotations 的类库, 里面包含了很多特性 (Attribute) 这些特性用于标记. Net 类型中的属性的数据类型信息比如数据长度格式能否为空等等
下图为该类库中的部分类型, 从中可以看到如信用卡邮件地址最大 / 最小长度等特性类型:
数据标记特性 (Data Annotation attributes) 有三种类型, 分别是:
验证特性: 用于执行验证规则, 如邮箱地址数据类型数据长度数字区间正则表达式等验证特性
展示特性: 用于指定被标记的类型或属性如何在 UI 上展示
模型关系特性: 用于指定类成员与其它类型的关系, 如外键特性等
下图是通过特性对一个实体类型的 name 属性进行标记的结果, 从标记的名称可以轻易看出该 name 属性是必填的并且最大长度为 30, 展示的名称为名称
但需要注意的是 system.componentmodel.dataannotations 所提供的特性仅仅是一种描述, 它不会因为你限制了一个字符串的长度就无法给它赋值超出限制的字符串, 它必须手动调用验证方法或者在 ASP.NET MVCEF 中使用(可参考: https://stackoverflow.com/questions/6496705/how-do-data-annotations-work)
关于 dataannotations 提供的特性类型可参考: https://msdn.microsoft.com/en-us/library/system.componentmodel.dataannotations.aspx
2 数据类型的验证
当使用数据特性标记对类型完成标记后, 还需要通过专门的验证类型才可以完成验证, 该类型同样存在于 system.componentmodel.dataannotations 程序集中名为 Validator, 下图是 Validator 的定义, 从其描述来看该类用于对使用 ValidationAttribute 特性标记的类型属性方法进行验证:
3 类型验证示例
通过一个 Console 程序来演示如何使用. Net 中的数据验证:
首先创建一个 Console 程序, 并添加 System.ComponentModel.DataAnnotations 程序集的引用, 然后编写以下代码:
运行后将输出以下错误信息:
添加显示特性后:
优化了验证提示信息:
4 自定义验证方式:
系统内置的数据验证特性均是继承至 ValidationAttribute 类型, 下面就通过继承该类型来实现一个自己的数据验证方式:
首先添加一个继承 ValidationAttribute 的类型, 并重写其 IsValid 方法, 该方法中包含数据验证的逻辑, 并设置相应的错误信息:
然后在相应的类属性上应用该特性:
验证结果:
关于自定义验证特性可参考: https://msdn.microsoft.com/en-us/library/cc668224.aspx
ASP.NET MVC 的模型验证
ASP.NET MVC 中提供了基于特性标记的模型验证的功能, 既只要在用做 action 参数的类型属性上添加对应的数据验证特性, 那么 ASP.NET MVC 在进行模型绑定时就会自动对被标记的属性进行验证验证的结果通过 Controller 中的 ModelState 的 IsValid 属性体现
下面就介绍如何在 ASP.NET MVC 中为 Model 添加数据验证:
1. 使用特性为 Model 的属性进行标记, 如必填密码类型及属性间的比较等:
2. 在 Action 代码中添加 ModelState.IsValid 判断, 当出现错误时, 将错误信息通过 ModelState 对象的 AddModelError 方法携带至 View 中:
3 在 View 中使用 html.ValidationSummary 方法输出验证信息:
注: 如果 View 中有用于客户端验证的代码需要先注释掉 @Scripts.Render("~/bundles/jqueryval"), 该文件用于客户端验证, 客户端验证在后面介绍
4 在页面上使用 Html 对象根据模型生成对应的 html 标签
5 运行程序
输入空的用户名和不匹配的两个密码, 点击提交后:
显示验证未通过:
页面上输出的内容:
6 使用 display 特性来优化属性名称的输出:
执行结果:
ASP.NET MVC 的客户端模型验证
前面介绍的是 ASP.NET MVC 服务端的模型验证, 当数据提交到服务器时进行验证的方式, 虽然能够在业务逻辑之前过滤数据无效的请求, 但是仍然需要将请求发送到服务器, 当请求过多时这些无效的请求会占用大量的服务器资源, 所以如果能够在客户端完成相应的验证, 那么对于客户来说提升了响应速度, 而对于服务器来说减少了压力, ASP.NET MVC 就结合 Jquery Validation 插件提供了浏览器端的数据验证功能
接下来就在上面代码的基础上, 通过在页面中引入验证相关 javascript 实现在客户端验证:
1 添加以下代码, 引入验证相关 Js 代码:
2 使用 Html 对象的 ForXXX 方法在 View 上生成 Model 对应标记的 Html 代码:
3 运行效果:
结果与服务端验证一致, 但是点击注册按钮时不再去发送 Post 请求到服务器, 而是通过 js 代码在浏览器完成的数据验证
关于 ASP.NET MVC 的客户端验证
Jquery Validation
Jquery Validation 是一个 Jquery 的插件, 它提供了强大的表单数据验证功能, 可以简单快速的为 web 应用添加一些常用的数据验证, 如必填数字邮箱电话号码正则表达式等常用格式验证
它的验证功能是通过在表单的标签中添加一些属性或设置其类型来完成的, 如下图所示, 该代码来自官方文档, 它提供了长度限制必填 Email 格式 Url 格式的验证:
更多关于 Jquery Validation 的内容可参考文档: https://jqueryvalidation.org/documentation/
Unobtrusive Javascript
Unobtrusive Javascript 可以译为非侵入式的 Javascript, 其目的就是为了分离 HTML 和 Javascript, 换句话说 HTML 中没有 JavaScript 代码, 它们只有引用关系这样做既可以避免代码混乱, 又可以避免不同浏览器之间的兼容问题
而 ASP.NET MVC 是通过在 HTML 中的标签上插入 data-val * 等属性, 对相应的标签进行标记, 然后引入的 js 通过读取这些特殊标记来完成特定的功能, 以下是通过 Html.TextBoxFor 方法生成 HTML:
从代码中可以看到除了 input 标签正常的属性外还生成了 data-val 为前缀的相关属性, 这些属性将用于辅助 js 代码完成数据验证
关于 @Scripts.Render("~/bundles/jqueryval"):
首先 Scripts 对象的 Render 方法是用于将指定的脚本文件路径添加到页面中, 而它的参数是一个字符串数组代表脚本文件的路径
那么~/bundles/jqueryval 指向的是哪个文件呢?
在 ASP.NET MVC 中提供了一个 bundle 的技术, 它可以用来合并和压缩 JavaScript 和 CSS 文件, bundle 的配置一般在 App_Start 目录下的 BundleConfig.cs 文件下, 从下图的代码中就可以看出,~/bundles/jqueryval 代表了能够被 jquery.validate * 匹配的所有文件:
然后向注册路由一样将其注册到一个全局静态 Bundle 列表中:
- https://www.codeproject.com/articles/826304/basic-introduction-to-data-annotation-in-net-frame
- https://www.codeproject.com/Articles/1184173/DataAnnotations-in-Depth
- https://www.codeproject.com/Articles/287278/Unobtrusive-Validation-with-ASP-NET
- http://blog.darkthread.net/post-2011-07-27-unobtrusive-jquery-validation.aspx
- http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
- https://www.cnblogs.com/Leo_wl/p/4886622.html
来源: https://www.cnblogs.com/selimsong/p/8424735.html