Steven's Tech Notepad

前、後端網頁程式開發

2016-12-02

【Asp.Net MVC】Model Validation：進階應用的遠端 API 驗證（Remote validation）

在 Model Validation 的驗證規則中,
當驗證邏輯無法在用戶端完成,
必須將資料送回遠端伺服器以進行驗證就
此時就可以使用一個稱為 Remote 類別的驗證規則,
只要設定好遠端 API 的位址及驗證的欄位,
它就會將指定的欄位資料, 自動透過 Ajax 方式, 叫用遠端的 API 以進行驗證.

簡單來說,
Model Validation 就是開發者在 Model 中的 Metadata 中加上驗證指令,
搭配用戶端的 Client-side library 進行驗證的協同處理.
（驗證規則被包含在 System.ComponentModel.DataAnnotations 命名空間）

從 .Net MVC 3.0 版本開始,
前端驗證就開始採用 jQuery Validation 與 Unobtrusive JavaAcript 模式,
到了 4.0 版本,
.Net MVC 就已經將採用的相關熱門工具預設綁定在 Bundle 中,
開發時僅需載入 Bundle（@Script.Render("~/bundles/jqueryval") ）即可開始實作前端驗證.

以下將介紹兩種驗證模式的實作方式：Client-side validation & Remote validation

常用的驗證模式 - 用戶端靜態驗證：Client-side validation
  1. 首先, 建立一個具有驗證行為的 ViewModel
  2. 在指定驗證的 Metadata 上加上驗證指令（以常用的必填驗證、長度防呆為例）
  3. 在 UI 綁定具有驗證行為的 ViewModel（Model Binding）
  4. 在 UI 上載入協助 .Net MVC Validation 運作的 Bundle：jqueryval
  5. 使用 RazorFor 語法產生控制項元件, 即自動綁定驗證行為

Model Validation：進階應用的遠端 API 驗證（Remote validation）- 1

  1.  錯誤提示訊息有分兩種：彙總錯誤訊息
    • 彙總錯誤訊息（@Html.ValidationSummary）：顯示所有控制項驗證的訊息
    • 單一錯誤訊息（@Html.ValidationMessageFor）：顯示指定控制項驗證的訊息
  2. 無論是何種錯誤訊息, 皆可客製顯示位置及樣式

Model Validation：進階應用的遠端 API 驗證（Remote validation）- 2

進階應用的驗證模式 - 遠端 API 驗證：Remote validation

相信上述的用戶端靜態驗證對各位來說已經使用的非常熟練,
接下來要介紹的是,
當驗證邏輯無法在用戶端完成,
而是必須將資料送回遠端伺服器（進資料庫）進行驗證的時候,
我們該如何實作?

以往我們要實作一個帳戶註冊的功能時,
帳號的重複申請驗證是需要進資料庫判斷的,
實作過程往往需要自訂一個 Ajax Request 來傳送並回傳驗證結果.

Model Validation：進階應用的遠端 API 驗證（Remote validation）- 3

其實在 Model Validation 的驗證規則中,
當驗證邏輯無法在用戶端完成,
必須將資料送回遠端伺服器以進行驗證,
此時就可以使用一個稱為 Remote 類別的驗證規則,
只要設定好遠端 API 的位址及驗證的欄位（AdditionalFields, 可指定多個欄位）,
它就會將指定的欄位資料, 自動透過 Ajax 方式, 叫用遠端的 API 以進行驗證.

Model Validation：進階應用的遠端 API 驗證（Remote validation）- 4

透過以上的介紹,
往後就可以輕鬆的透過一個 Model 實作出各種行為的驗證機制,
希望這樣的說明對大家之後在開發上有些微的幫助.

標籤雲