フォームと検証

2025-06-17

ヒント

このコンテンツは電子ブック、Azure の「ASP.NET Web Forms 開発者向け Blazor」からの抜粋です。これは .NET Docs から閲覧するか、オフラインで読める無料ダウンロードの PDF としても入手できます。

ASP.NET Web フォームフレームワークには、フォームに入力されたユーザー入力の検証 (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 パラメーターのラムダ式を指定します。

次のモデルの種類では、データ注釈を使用していくつかの検証規則を定義します。

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ドキュメントを参照してください。

前へ次へ

次の方法で共有

フォームと検証

その他のリソース

その他のリソース