ASP.NET没有魔法——ASP.NET MVC 模型验证 (3)

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

 

ASP.NET MVC的客户端模型验证

  前面介绍的是ASP.NET MVC服务端的模型验证,当数据提交到服务器时进行验证的方式,虽然能够在业务逻辑之前过滤数据无效的请求,但是仍然需要将请求发送到服务器,当请求过多时这些无效的请求会占用大量的服务器资源,所以如果能够在客户端完成相应的验证,那么对于客户来说提升了响应速度,而对于服务器来说减少了压力,ASP.NET MVC就结合Jquery Validation插件提供了浏览器端的数据验证功能。
  接下来就在上面代码的基础上,通过在页面中引入验证相关javascript实现在客户端验证:
  1、添加以下代码,引入验证相关Js代码:

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

  2、使用Html对象的ForXXX方法在View上生成Model对应标记的Html代码:

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

  3、运行效果:

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

  结果与服务端验证一致,但是点击注册按钮时不再去发送Post请求到服务器,而是通过js代码在浏览器完成的数据验证。

关于ASP.NET MVC的客户端验证 Jquery Validation

  Jquery Validation是一个Jquery的插件,它提供了强大的表单数据验证功能,可以简单快速的为Web应用添加一些常用的数据验证,如必填、数字、邮箱、电话号码、正则表达式等常用格式验证。
  它的验证功能是通过在表单的标签中添加一些属性或设置其类型来完成的,如下图所示,该代码来自官方文档,它提供了长度限制、必填、Email格式、Url格式的验证:

   

ASP.NET没有魔法——ASP.NET MVC 模型验证

  更多关于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:

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

  从代码中可以看到除了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*匹配的所有文件:

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

  然后向注册路由一样将其注册到一个全局静态Bundle列表中:

  

ASP.NET没有魔法——ASP.NET MVC 模型验证

  这样在UI上就可以使用~/bundles/jqueryval来获取到与验证相关的js文件,更多关于UI的内容将在后续文章中介绍。

自定义ASP.NET MVC中的模型验证

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywfds.html