表單和驗證

發行項
06/08/2023

提示

本內容節錄自《Blazor for ASP NET Web Forms Developers for Azure》電子書，可以從 .NET Docs 取得，也可以免費下載 PDF 離線閱讀。

ASP.NET Web Forms 架構包括一組驗證伺服器控制項，可處理驗證在表單中輸入的使用者輸入 (RequiredFieldValidator、CompareValidator、RangeValidator 等)。 ASP.NET Web Forms 架構也支援模型繫結，並根據資料註釋 ([Required]、[StringLength]、[Range] 等) 驗證模型。驗證邏輯可以在伺服器和用戶端上，使用不顯眼的 JavaScript 型驗證強制執行。 ValidationSummary 伺服器控制項用於向使用者顯示驗證錯誤的摘要。

Blazor 支援在用戶端與伺服器之間共用驗證邏輯。 ASP.NET 提供許多常見伺服器驗證的預先建置 JavaScript 實作。在許多情況下，開發人員仍然需要撰寫 JavaScript，才能完整實作其應用程式專用的驗證邏輯。您可以在伺服器和用戶端上使用相同的模型類型、資料註釋和驗證邏輯。

Blazor 提供一組輸入元件。輸入元件會處理將欄位資料繫結至模型，並在提交表單時驗證使用者輸入。

輸入元件	轉譯的 HTML 元素
`InputCheckbox`	`<input type="checkbox">`
`InputDate`	`<input type="date">`
`InputNumber`	`<input type="number">`
`InputSelect`	`<select>`
`InputText`	`<input>`
`InputTextArea`	`<textarea>`

EditForm 元件會包裝這些輸入元件，並透過 EditContext 協調驗證程序。建立 EditForm 時，您可以使用 Model 參數指定要繫結的模型執行個體。驗證通常是使用資料註釋來完成，而且是可延伸的。若要啟用資料註釋型驗證，請新增 DataAnnotationsValidator 元件作為 EditForm 的子系。 EditForm 元件提供方便的事件來處理有效 (OnValidSubmit) 和無效 (OnInvalidSubmit) 提交。另外還有一個更一般的 OnSubmit 事件，可讓您自行觸發和處理驗證。

若要顯示驗證錯誤摘要，請使用 ValidationSummary 元件。若要顯示特定輸入欄位的驗證訊息，請使用 ValidationMessage 元件，為指向適當模型成員的 For 參數指定 Lambda 運算式。

下列模型類型會使用資料註釋定義數個驗證規則：

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16,
        ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { get; set; }

    public string Description { get; set; }

    [Required]
    public string Classification { get; set; }

    [Range(1, 100000,
        ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true",
        ErrorMessage = "This form disallows unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

下列元件示範在 Blazor 中，根據 Starship 模型類型建置表單：

<h1>New Ship Entry Form</h1>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="identifier">Identifier: </label>
        <InputText id="identifier" @bind-Value="starship.Identifier" />
        <ValidationMessage For="() => starship.Identifier" />
    </p>
    <p>
        <label for="description">Description (optional): </label>
        <InputTextArea id="description" @bind-Value="starship.Description" />
    </p>
    <p>
        <label for="classification">Primary Classification: </label>
        <InputSelect id="classification" @bind-Value="starship.Classification">
            <option value="">Select classification ...</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
            <option value="Defense">Defense</option>
        </InputSelect>
        <ValidationMessage For="() => starship.Classification" />
    </p>
    <p>
        <label for="accommodation">Maximum Accommodation: </label>
        <InputNumber id="accommodation" @bind-Value="starship.MaximumAccommodation" />
        <ValidationMessage For="() => starship.MaximumAccommodation" />
    </p>
    <p>
        <label for="valid">Engineering Approval: </label>
        <InputCheckbox id="valid" @bind-Value="starship.IsValidatedDesign" />
        <ValidationMessage For="() => starship.IsValidatedDesign" />
    </p>
    <p>
        <label for="productionDate">Production Date: </label>
        <InputDate id="productionDate" @bind-Value="starship.ProductionDate" />
        <ValidationMessage For="() => starship.ProductionDate" />
    </p>

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

@code {
    private Starship starship = new Starship();

    private void HandleValidSubmit()
    {
        // Save the data
    }
}

在表單提交之後，模型繫結的資料尚未儲存至任何資料存放區，例如資料庫。在 Blazor WebAssembly 應用程式中，資料必須傳送至伺服器。例如，使用 HTTP POST 要求。在 Blazor 伺服器應用程式中，資料已在伺服器上，但必須加以保存。在 Blazor 應用程式中處理資料存取是處理資料一節的主題。

其他資源

如需有關 Blazor 應用程式中表單和驗證的詳細資訊，請參閱 Blazor 文件。

上一個下一個

共用方式為

表單和驗證

其他資源

其他資源