表單和驗證

小提示

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

下載 PDF

ASP.NET Web Forms 架構包含一組驗證伺服器控制件，可處理輸入表單的使用者輸入（RequiredFieldValidator、、 CompareValidatorRangeValidator等等）。 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 元件，為指向適當模型成員的參數指定 Lambda 表達式 For 。

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

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檔。

上一頁下一步