學習ASP.NET Core Blazor程式設計系列八——資料校驗

在設計應用程式時，你應該保持對使用者的不信任，雖然你在輸入介面上提示瞭如何正確填寫每個值的說明，但必須對他們輸入的任何值進行校驗。 Blazor 提供了一些簡單的校驗工具，接下來我們來學習如何設定表單中的輸入項，以便正確地校驗和響應使用者資料。

驗證使用者的輸入資料

當你收集使用者的輸入的資訊時，必須檢查其是否有意義且格式是否正確：

出於業務原因：圖書資訊（例如價格或庫存數量資訊）必須正確無誤才能為使用者提供優質服務。例如，如果在介面中輸入庫存數量時能立即發現該資料是錯誤，則可以防止以後付出更高的代價。
出於技術原因：如果程式碼使用表單輸入進行計算或其他處理，則不正確的輸入可能會導致錯誤和異常。
出於安全原因：惡意使用者可能會試圖通過利用未檢查的輸入框進行程式碼注入攻擊。

向表單增加校驗功能

在軟體開發中有一個重要的原則被稱為 DRY（即「不要自我重複」）。 Blazor元件鼓勵進行只需要開發一次，這個功能就能在整個應用中使用，不需要重複開發，或複製貼上。 DRY 有助於減少應用中的程式碼量。 DRY 使程式碼更加不易出錯，且更易於測試和維護。

Blazor元件和 Entity Framework框架提供的DRY原則級別的校驗。校驗規則在實體類中的某處以宣告方式指定，且在應用程式的所有位置強制執行。

如果看過我的MVC系列，那麼肯定了解一個有關校驗特性的名稱空間，System.ComponentModel.DataAnnotations，DataAnnotations 名稱空間下提供一組內建的校驗規則特性，我們可以通過宣告的方式應用於類或屬性之上。

DataAnnotations 名稱空間下提供內建校驗規則特性如下：

[ValidationNever]. 如果要確保該欄位從不包含在驗證中，請使用此特性。
[CreditCard]. 如果要記錄使用者的有效信用卡號，請使用此特性。
[Compare]. 如果要確保模型中的兩個屬性匹配，請使用此特性。
[Phone]. 如果要記錄使用者的有效電話號碼，請使用此特性。
[RegularExpression]. 如果通過將值與正規表示式進行比較來檢查值的格式，請使用此特性。
[StringLength]. 如果要檢查字串值的長度是否不超過最大長度，請使用此特性。
[Url]. 如果要記錄使用者的有效 URL，請使用此特性。
[Required]. 如果要求使用者必須填寫，請使用此特性。

讓 ASP.NET Core Blazor 強制自動執行校驗規則有助於提升應用程式的可靠性。在實體類上進行自動校驗助於保護應用程式，因為新增新程式碼時無需手動修改舊程式碼。不要想當然地認為使用者知道所有資訊：例如，並非每個人都知道有效電子郵件地址的格式。

在Visual Studio 2022的解決方案資源管理器中，開啟 Models\Book.cs 檔案。現在我們來給Book 類使用 Required、StringLength、RegularExpression 和 Range 校驗規則特性，程式碼如下所示。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
 

namespace BlazorAppDemo.Models
{
    public class Book

    {
        private string name = String.Empty;
       private string author=String.Empty;

 
        [Key]
        public int ID { get; set; }

        [Required]
        [StringLength(50)]
        public string Name { get => name; set => name = value; }
        public DateTime ReleaseDate { get; set; }

        [Required, StringLength(40)]
        public string Author { get => author; set => author = value; }
                 
        public decimal Price { get; set; }

        /// <summary>
        /// 圖書型別編號
        /// </summary>

        [RegularExpression(@"^[A-Z]+[a-zA-Z""'\s-]*$"), Required, StringLength(40)]
        public string Type { get; set; }

        /// <summary>
        /// 頁碼
        /// </summary>
        public int TotalPages { get; set; }
        /// <summary>
       /// 庫存數量
        /// </summary>
        [Range(2,30)]
       public int StockQty { get; set; }

        /// <summary>
        /// 已租數量
        /// </summary>

        public int Qty { get; set; }  

    }

}

我們將在表單中使用此實體，校驗特性應用在實體類的屬性上，並且將前端強制執行。

Required 特性表示屬性必須具有一個值。但是，使用者可以隨時輸入空格對可以為 null 的型別進行校驗約束。從本質上來說，對於不能為 null 的值型別（如 decimal、int、float 和 DateTime），可以不新增 Required 特性。

RegularExpression 特性限制使用者可以輸入的字元。在上述程式碼中， Type字母（禁用空格、數位和特殊字元）。

Range 特性將值限制在指定範圍內。

StringLength 特性設定字串的最大長度，且可視情況設定最小長度。

第八，在Visual Studio 2022的選單欄上，找到「偵錯à開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們使用滑鼠點選左邊的選單欄上的「新增圖書」選單項，然後使用滑鼠左鍵點選「儲存」按鈕，會出現一個錯誤，如下圖。

從上圖中看出，校驗好像沒有起作用就直接儲存到資料庫了，這是因為我們沒有在EditForm中沒有新增DataAnnotationsValidator元件。如果要顯示校驗不通過生成的提示訊息，我們應該加一個ValidationSummary元件，這個元件用於顯示錶單中所有控制元件的有校驗規則的提示訊息集合。我們來修改一下元件的程式碼，具體程式碼如下。

<h3>AddBook</h3>

<EditForm Model=@addBook OnSubmit="Save">
    <DataAnnotationsValidator />
    <ValidationSummary />

 
    <div>@Message</div>

    <p> 圖書名稱：
    <InputText @bind-Value=addBook.Name></InputText>
    </p>

    <p>作者：
    <InputText @bind-Value=addBook.Author></InputText>
    </p>
   
    <p>出版日期：
    <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
     </p>
    <p>價格：

    <InputNumber @bind-Value=addBook.Price></InputNumber>
     </p>
    <p>型別：

     <InputText @bind-Value=addBook.Type></InputText>
      </p>
    <p>總頁數：

    <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
     </p>
    <p>庫存數量：
    <InputNumber @bind-Value=addBook.StockQty></InputNumber>
     </p>

    <p>已租數量：
    <InputNumber @bind-Value=addBook.Qty></InputNumber>
    </p>
    <input type="submit" class="btn btn-primary" value="Save" />
</EditForm>

第九，在Visual Studio 2022的選單欄上，找到「偵錯-->開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們使用滑鼠點選左邊的選單欄上的「新增圖書」選單項，然後使用滑鼠左鍵點選「儲存」按鈕，由於我們沒有輸入正確的資料，校驗元件將會提示我們要輸入的資料。如下圖。

Blazor的校驗是在以下兩個時間點上執行：

當用戶按 Tab 鍵離開某個欄位時，將執行欄位驗證。欄位驗證可確保使用者及早了解驗證問題。
當用戶提交表單時，將執行模型驗證。模型驗證可確保不會儲存無效資料。

如上圖，表單驗證失敗，提示訊息都顯示在ValidationSummary，而沒有顯示在相應輸入框的旁邊。

如果想要將校驗提示資訊顯示在輸入框的旁邊，需要在程式碼中新增 ValidationMessage 元件。如果你不想要Blazor提供的預設資訊，你可以在實體類的每個屬性的特性中找到一個ErrorMessage屬性，這個屬性就是用於自己定義一些校驗提示訊息，校驗的提示訊息儘可能的對使用者有所幫助。程式碼如下所示。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

 
namespace BlazorAppDemo.Models
{

    public class Book
    {
        private string name = String.Empty;
        private string author=String.Empty;

        [Key]
        public int ID { get; set; }

        [Required(ErrorMessage ="圖書名稱必須填寫，圖書名稱不能超過50個字元。")]

        [StringLength(50)]
        public string Name { get => name; set => name = value; }

        public DateTime ReleaseDate { get; set; }
        [Required(ErrorMessage = "作者必須填寫，作者名不能超過40個字元。"), StringLength(40)]
        public string Author { get => author; set => author = value; }
                

        public decimal Price { get; set; }
        /// <summary>

        /// 圖書型別編號
        /// </summary>
        [RegularExpression(@"^[a-zA-Z]*$"), Required(ErrorMessage = "圖書型別必須填寫，而且只能是A-Z的字母，最少是一個字母，最多10個字母。"), MinLength(1),StringLength(10)]

        public string Type { get; set; }
        /// <summary>
        /// 頁碼
        /// </summary>
        public int TotalPages { get; set; }

        /// <summary>
        /// 庫存數量
        /// </summary>
        [Range(2,30,ErrorMessage =  "圖書庫存數量在2至30之間。")]

                public int StockQty { get; set; }
        /// <summary>
        /// 已租數量
        /// </summary>
        public int Qty { get; set; }  

    }
}

接下來我們來修改AddBook.razor元件的前端程式碼，將校驗提示資訊顯示在輸入框的旁邊，在程式碼中新增ValidationMessage控制元件，將ValidationMessage控制元件的For屬性與實體物件的相對應的屬性相關聯。程式碼如下所示。

<h3>AddBook</h3>
 
<EditForm Model=@addBook OnSubmit="Save">
    <DataAnnotationsValidator />
    <ValidationSummary />
 
    <div>@Message</div>
    <p> 圖書名稱：
    <InputText @bind-Value=addBook.Name></InputText>
        <ValidationMessage For="@(() => addBook.Name)" />
    </p>
    <p>作者：
    <InputText @bind-Value=addBook.Author></InputText>
        <ValidationMessage For="@(() => addBook.Author)" />
    </p>
    
    <p>出版日期：
    <InputDate @bind-Value=addBook.ReleaseDate></InputDate>
     </p>
    <p>價格：

    <InputNumber @bind-Value=addBook.Price></InputNumber>
     </p>
    <p>型別：
     <InputText @bind-Value=addBook.Type></InputText>
        <ValidationMessage For="@(() => addBook.Type)" />
      </p>

    <p>總頁數：
    <InputNumber @bind-Value=addBook.TotalPages></InputNumber>
     </p>
    <p>庫存數量：
    <InputNumber @bind-Value=addBook.StockQty></InputNumber>
        <ValidationMessage For="@(() => addBook.StockQty)" />
     </p>
    <p>已租數量：
    <InputNumber @bind-Value=addBook.Qty></InputNumber>
    </p>
    <input type="submit" class="btn btn-primary" value="Save" />

</EditForm>

第十，在Visual Studio 2022的選單欄上，找到「偵錯à開始偵錯」或是按F5鍵，Visual Studio 2022會生成BlazorAppDemo應用程式，並在瀏覽器中開啟Home頁面，我們使用滑鼠點選左邊的選單欄上的「新增圖書」選單項，然後使用滑鼠左鍵點選「儲存」按鈕，由於我們沒有輸入正確的資料，校驗元件將會提示我們要輸入的資料。如下圖。