mvc中服务器端、客户端属性验证

在mvc中使用表单进行数据提交时，数据验证分为服务器端验证和客户端验证；

咱们能够经过使用HtmlHelper中的方法及在页面中引用js库对Model的属性的数据注解（System.ComponentModel.DataAnnotations命名空间下的一组类）进行解析，实现前端、后端的数据验证；

HtmlHelper、数据注解在其余文章中再详细介绍，本文主要介绍如何使数据验证发生做用。

 

下面分别介绍两种验证方式：

1、服务器端验证

要实现服务器端的验证很是简单，只须要知足下面三个条件：

①有数据注解

②页面部分使用HtmlHelper生成各类表单元素

使用这些html标签的时候，须要引用一下mvc工程中的css文件：

<link href="~/Content/Site.css" rel="stylesheet" />

③在后端代码中指明须要验证

 

可是只有服务器端的验证不能知足咱们，由于每一次的错误数据都会提交到服务器，不只影响了性能，用户体验也差强人意。

 

2、客户端验证

客户端验证是经过jquery validate插件进行数据验证的，它须要有jquery的支持，所以在引用它以前必须引用jquery文件。

但jquery validate是须要在js中编写相关代码（以下图），才能实现数据验证的；

 

但这样子也是挺麻烦的，咱们在属性写的数据注解岂不是没什么卵用了，不用担忧，只要咱们引用一下mvc工程中的 jquery.validate.unobtrusive.js 就能够啦。

 

利用mvc的HtmlHelper中相似Html.EditorFor(m => m.Name)这样的语法，生成的代码以下：

<input class="text-box single-line" data-val="true" data-val-required="请输入用户名！" id="Name" name="Name" type="text" value="">

这样子，引用的js库就能够解析以data-val-为前缀的属性用来设置验证规则了。data-val="true"表示对用户输入的值进行验证。

 

若是上面的js库你都引用了，但客户端的验证仍是没有起效，那就检查一下配置文件吧。在配置文件中，有两个选项是须要配置为true的，创建mvc应用程序的时候，默认是已经添加了的。

第一行表示启用客户端验证；

第二行表示启用unobtrusive相关的js验证，在使用AjaxHelper，引用jquery.unobtrusive-ajax.js时，也须要该配置为true；

 

综上所述，客户端的验证须要知足如下几个条件：

①有数据注解

②页面部分使用HtmlHelper生成各类表单元素

③引用相关js文件，以下图：

④配置web.config(默认存在)

 

 

3、总结

在实际开发中，基本都是客户端验证+服务器端验证一块儿使用的；

也有的验证可能仍是须要在js中实现，那么在进行后端验证时，就不能只以ModelState.IsValid为参考了，还须要写额外代码验证；若是有错误的时候，可使用ModelState.AddModelError("key", "errorMesaage");//第一个参数是key，第二个参数是要显示的错误消息

 

在页面中展现后台的错误消息的时候，有两种方式：

①Html.ValidationSummary(true)

ValidationSummary有几种重载形式：

重载形式	说明
Html.ValidationSummary()	汇总显示全部的验证错误
Html.ValidationSummary(bool)	若是bool参数=true，只显示Model层次的错误，不然全部的验证错误都显示
Html.ValidationSummary(string)	在全部错误消息以前再显示string给出的字符串
Html.ValidationSummary(bool, string)	同Html.ValidationSummary(bool)，只是在错误消息前多显示string给出的字符串

 

在页面数据提交到后台时，代表属性的数据注解验证已经经过了，所以前端显示错误消息的时候只会显示 ModelState.AddModelError()方法中的错误消息；

在页面中会生成以下图所示的div：

ValidationSummary方法会展现全部的错误消息，而不会根据key值显示特定的消息；主要用来汇总显示从后台返回的错误消息列表。

 

②Html.ValidationMessage(key)

该方法会根据ModelState.AddModelError("key", "errorMesaage")里的key值显示对应的错误消息；

它在前端生成的是一个span标签；

不过一般不会使用该方法，而是使用Html.ValidationMessageFor(c => c.Name)显示属性的数据注解的错误消息；