Blazorでバリデーションを実装する方法。メッセージを外部化する方法も紹介

Blazorで入力チェックを行う

Blazorでは、データ注釈（アノテーション）を使用して、フォームの入力チェックを効率的に行うことができます。以下の手順では、ビューモデルの作成から入力チェックの実装までを解説します。

1. ビューモデルの作成

まず、入力データをバインドするためのビューモデルを作成します。このビューモデルに、入力チェック用のアノテーションを設定します。

using System.ComponentModel.DataAnnotations;

public class ViewModel
{
  [Required(ErrorMessage = "ユーザIDを入力してください。")]
  [StringLength(16, ErrorMessage = "ユーザIDが長すぎます。")]
  public string? Name { get; set; }

  [Required(ErrorMessage = "年齢を入力してください。")]
  [Range(0, 100, ErrorMessage = "年齢は0〜100の間で入力してください。")]
  public int Age { get; set; }
}

2. Blazorコンポーネントの作成

次に、フォームのUIを作成します。<DataAnnotationsValidator>タグを使用してアノテーションに基づく入力チェックを有効にし、<ValidationSummary>と<ValidationMessage>タグでエラーメッセージを表示します。

<EditForm Model="@model" OnSubmit="@Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label>名前</label>
        <input type="text" @bind="@model.Name" />
        <ValidationMessage For="@(() => model.Name)" />
    </div>
    <div>
        <label>年齢</label>
        <input type="number" @bind="@model.Age" />
        <ValidationMessage For="@(() => model.Age)" />
    </div>
    <div>
        <button type="submit">SUBMIT</button>
    </div>
</EditForm>

3. コードの作成

最後に、Submitイベントで入力チェックを実施します。

@code  {
    private ViewModel model = new ViewModel();
    private string message = "";

    private void Submit(EditContext editContext)
    {
        bool isValid = editContext.Validate();
    }
}

まとめ

Blazorにおける入力チェックは、データ注釈を使用して簡単かつ効果的に実施することができます。この機能により、開発者は複雑な入力チェックロジックを手作業で書く手間を省き、保守性と再利用性を向上させることができます。