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)顯示屬性的數據註解的錯誤消息；