Blazor 提供一組輸入元件。 輸入元件會將繫結欄位資料處理到模型，並在提交窗體時驗證使用者輸入。
下表顯示了可用的輸入元件:

EditForm

EditForm 元件通過 EditContext 包裝這些輸入元件並協調驗證過程。 建立 EditForm 時，可以使用 Model 引數指
定要繫結到的模型例項。 驗證通常是使用資料批註完成的，並且可以進行擴充套件。 若要啟用基於資料批註的驗證，請
將 DataAnnotationsValidator 元件新增為 EditForm 的子元件。 EditForm 元件提供了一個用於處理有效（
OnValidSubmit ）和無效（ OnInvalidSubmit ）提交的方便事件。 還有一個更通用的 OnSubmit 事件，可讓你自行觸發

DataAnnotationsValidator

DataAnnotationsValidator 元件使用資料註釋將驗證支援附加到級聯的 EditContext。

• 當用戶從某個欄位中跳出時，將執行欄位驗證。 在欄位驗證期間，DataAnnotationsValidator 元件將報告的所有驗證結果與該欄位相關聯。
• 當用戶提交窗體時，將執行模型驗證。 在模型驗證期間，DataAnnotationsValidator 元件嘗試根據驗證結果報告的成員名稱來確定欄位。 與單個成員無關的驗證結果將與模型而不是欄位相關聯。

ValidationSummary

ValidationSummary 元件用於彙總所有驗證訊息。

驗證

下面示例演示一個EditForm驗證Model引數 (為了便於測試,這裡將實體模型寫在了@code { } 當中)。

• 在@code{} 當中,建立一個 Student型別,提供Code與Name屬性
• 在頁面中定義EditForm,繫結Model 與驗證提交的方法HandleValidSubmit
• EditForm中定義兩個InputText用於接受輸入內容
• button按鈕用於提交整個模型的資料

@page "/"
@using Microsoft.AspNetCore.Components.Forms 

    <EditForm Model="@student" OnValidSubmwww.cppcns.com
 
it="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
        <InputText  @bind-Value="@student.Code" />
        <InputText  @bind-Value="@student.Name" />
        <button type="submit">submit</button>
    </EditForm>

@code {
    @using System.ComponentModel.DataAnnotations;

    private Student student = new Student();
    private void HandleValidSubmit()
    {
        // Save the data
    }

    public class Student
    {
        [Required(AllowEmptyStrings = false,ErrorMessage = "必填項!")]
        public string Name { get; set; }

        [StringLength(2,ErrorMessage = "超出規定長度！")]
        public string Code { get; set; }
    }
}

• 錯誤效果

若要顯示驗證錯誤摘要，請使用 ValidationSummary 元件。 若要顯示特定輸入欄位的驗證訊息，請使用ValidationMessage 元件，併為指向相應模型成員的 For 引數指定 lambda 表示式。

基於上面的進行改造,如下所示。 (如果只是針對每個欄位進行驗證,則無需在EditForm子集新增 ValidationSummary)

 <EditForm Model="@student" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        @*<ValidationSummary />*@
        <InputText @bind-Value="@student.Code" />
        <ValidationMessage For="()=>student.Code" />


        <InputText @bind-Value="@student.Name" />
        <ValidationMessage For="()=>student.Name" />

        <button type="submit">submit</button>
    </EditForm>

• 錯誤效果

巢狀驗證

對於上面的單個實體驗證,可以按照上面的做法進行,但是考慮到實體中還包含其他型別的物件需要驗證。
官方文件解釋: 若要驗證繫結模型的整個物件圖（包括集合型別和複雜型別的屬www.cppcns.com性），請使用試驗性 Microsoft.AspNetCore.Components.DataAnnotations.Validation 包

安裝NuGet包

Instawww.cppcns.comll-Package Microsoft.AspNetCore.Components.DataAnnotations.Validation

實驗

• 建立測試巢狀型別Student /Child
• EditForm子集新增 ObjectGraphDataAnnotationsValidator
• 改造後完整程式碼如下所示:

    @page "/"
<EditForm Model="@student" OnValidSubmit="HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    <InputText @bind-Value="@student.Child.Code" />
    <ValidationMessage For="()=>student.Child.Code" />

    <InputText @bind-Value="@student.Child.Name" />
    <ValidationMessage For="()=>student.Child.Name" />

    <button type="submit">submit</button>
</EditForm>

@code {
    @using System.ComponentModel.DataAnnotations;

    private Student student = new Student();
    private void HandleValidSubmit()
    {
        // Save the data
    }

    public class Student
    {
        [ValidateComplexType]
        public Child Child { get; set; } = new Child();
    }

    public class Child
    {
        [Required(AllowEmptyStrings = false,ErrorMessage = "超出規定長度！")]
        public string Code { get; set; }
    }
}

注意:子集必須保證為例項,否則會報異常提示。 如上: =new Child();

• 測試效果:

到此這篇關於Blazor實現資料驗證的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。