入力の検証 ― DataAnnotations で自動チェック

導入

「名前は必須」「メールは形式が正しいこと」——こうしたルールを毎回ifで書くのは大変です。Blazorでは、モデルのプロパティに**属性（DataAnnotations）**を付けるだけで、検証が自動で走ります。

説明

モデルのプロパティに[Required]や[EmailAddress]などを付け、フォームに<DataAnnotationsValidator />を置きます。エラーは<ValidationMessage>や<ValidationSummary>で表示します。

<EditForm Model="contact" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label>お名前</label>
    <InputText @bind-Value="contact.Name" />
    <ValidationMessage For="() => contact.Name" />

    <label>メール</label>
    <InputText @bind-Value="contact.Email" />
    <ValidationMessage For="() => contact.Email" />

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

@code {
    private Contact contact = new();
    private void HandleSubmit() { /* 検証OKのときだけここに来る */ }

    public class Contact
    {
        [Required(ErrorMessage = "名前は必須です")]
        public string Name { get; set; } = "";

        [Required, EmailAddress(ErrorMessage = "メール形式で入力してください")]
        public string Email { get; set; } = "";
    }
}

flowchart LR
    S["送信ボタン"] --> V{"検証（DataAnnotations）"}
    V -->|OK| OK["OnValidSubmit が呼ばれる"]
    V -->|NG| NG["エラーメッセージを表示"]

• モデルに[Required]／[EmailAddress]／[StringLength]／[Range]などのルールを付ける
• <DataAnnotationsValidator />が、そのルールに沿って自動で検証する
• エラーは<ValidationMessage For="() => モデル.プロパティ" />（各項目）や<ValidationSummary />（一覧）で表示
• 検証を通ったときだけOnValidSubmitが呼ばれるので、処理側はOK前提で書ける

まとめ

• 検証ルールはモデルの属性（DataAnnotations）で宣言する
• DataAnnotationsValidatorが自動チェック、ValidationMessage／ValidationSummaryで表示
• 送信処理はOnValidSubmit＝検証済みの前提で書ける

次回: 第6章。DIやHTTPで、外部のデータやサービスとつなぎます。