Blazor 提供一組輸入組件。 輸入組件會(huì)將綁定字段數(shù)據(jù)處理到模型，并在提交窗體時(shí)驗(yàn)證用戶(hù)輸入。
下表顯示了可用的輸入組件:

EditForm

EditForm 組件通過(guò) EditContext 包裝這些輸入組件并協(xié)調(diào)驗(yàn)證過(guò)程。 創(chuàng)建 EditForm 時(shí)，可以使用 Model 參數(shù)指
定要綁定到的模型實(shí)例。 驗(yàn)證通常是使用數(shù)據(jù)批注完成的，并且可以進(jìn)行擴(kuò)展。 若要啟用基于數(shù)據(jù)批注的驗(yàn)證，請(qǐng)
將 DataAnnotationsValidator 組件添加為 EditForm 的子組件。 EditForm 組件提供了一個(gè)用于處理有效（
OnValidSubmit ）和無(wú)效（ OnInvalidSubmit ）提交的方便事件。 還有一個(gè)更通用的 OnSubmit 事件，可讓你自行觸發(fā)
和處理驗(yàn)證。若要顯示驗(yàn)證錯(cuò)誤摘要，請(qǐng)使用 ValidationSummary 組件。

DataAnnotationsValidator

DataAnnotationsValidator 組件使用數(shù)據(jù)注釋將驗(yàn)證支持附加到級(jí)聯(lián)的 EditContext。

• 當(dāng)用戶(hù)從某個(gè)字段中跳出時(shí)，將執(zhí)行字段驗(yàn)證。 在字段驗(yàn)證期間，DataAnnotationsValidator 組件將報(bào)告的所有驗(yàn)證結(jié)果與該字段相關(guān)聯(lián)。
• 當(dāng)用戶(hù)提交窗體時(shí)，將執(zhí)行模型驗(yàn)證。 在模型驗(yàn)證期間，DataAnnotationsValidator 組件嘗試根據(jù)驗(yàn)證結(jié)果報(bào)告的成員名稱(chēng)來(lái)確定字段。 與單個(gè)成員無(wú)關(guān)的驗(yàn)證結(jié)果將與模型而不是字段相關(guān)聯(lián)。

ValidationSummary

ValidationSummary 組件用于匯總所有驗(yàn)證消息。

驗(yàn)證

下面示例演示一個(gè)EditForm驗(yàn)證Model參數(shù) (為了便于測(cè)試,這里將實(shí)體模型寫(xiě)在了@code { } 當(dāng)中)。

• 在@code{} 當(dāng)中,創(chuàng)建一個(gè) Student類(lèi)型,提供Code與Name屬性
• 在頁(yè)面中定義EditForm, 綁定Model 與驗(yàn)證提交的方法HandleValidSubmit
• EditForm中定義兩個(gè)InputText用于接受輸入內(nèi)容
• button按鈕用于提交整個(gè)模型的數(shù)據(jù)

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

    <EditForm Model="@student" OnValidSubmit="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 = "必填項(xiàng)!")]
        public string Name { get; set; }

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

• 錯(cuò)誤效果

若要顯示驗(yàn)證錯(cuò)誤摘要，請(qǐng)使用 ValidationSummary 組件。 若要顯示特定輸入字段的驗(yàn)證消息，請(qǐng)使用ValidationMessage 組件，并為指向相應(yīng)模型成員的 For 參數(shù)指定 lambda 表達(dá)式。

基于上面的進(jìn)行改造,如下所示。 (如果只是針對(duì)每個(gè)字段進(jìn)行驗(yàn)證, 則無(wú)需在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>

• 錯(cuò)誤效果

嵌套驗(yàn)證

對(duì)于上面的單個(gè)實(shí)體驗(yàn)證,可以按照上面的做法進(jìn)行, 但是考慮到實(shí)體中還包含其他類(lèi)型的對(duì)象需要驗(yàn)證。
官方文檔解釋: 若要驗(yàn)證綁定模型的整個(gè)對(duì)象圖（包括集合類(lèi)型和復(fù)雜類(lèi)型的屬性），請(qǐng)使用試驗(yàn)性 Microsoft.AspNetCore.Components.DataAnnotations.Validation 包

安裝NuGet包

Install-Package Microsoft.AspNetCore.Components.DataAnnotations.Validation

實(shí)驗(yàn)

• 創(chuàng)建測(cè)試嵌套類(lèi)型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 = "必填項(xiàng)!")]
        public string Name { get; set; }

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

注意: 子集必須保證為實(shí)例, 否則會(huì)報(bào)異常提示。 如上: =new Child();

• 測(cè)試效果:

到此這篇關(guān)于Blazor實(shí)現(xiàn)數(shù)據(jù)驗(yàn)證的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論