【Blazor】フォームとバリデーションの基本

@page "/bookform"
@using BlazorFormSample.Data

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

    <div>
        <label>タイトル</label><br />
        <InputText @bind-Value="book.Title" />
        <ValidationMessage For="@(() => book.Title)" />
    </div>

    <div>
        <label>著者</label><br />
        <InputText @bind-Value="book.Author" />
        <ValidationMessage For="@(() => book.Author)" />
    </div>

    <div>
        <label>価格</label><br />
        <InputNumber @bind-Value="book.Price" />
        <ValidationMessage For="@(() => book.Price)" />
    </div>

    <div>
        <label>ISBN</label><br />
        <InputText @bind-Value="book.Isbn" />
        <ValidationMessage For="@(() => book.Isbn)" />
    </div>

    <button type="submit">登録</button>
</EditForm>

@code {
    private BookModel book = new();

    // Submit時に実行されるメソッド
    private void HandleValidSubmit()
    {
        Console.WriteLine($"登録: {book.Title}");
    }
}

using System.ComponentModel.DataAnnotations;

namespace BlazorFormSample.Data;

public class BookModel
{
    [Required(ErrorMessage = "タイトルは必須です。")]
    [StringLength(200, ErrorMessage = "タイトルは200文字以内で入力してください。")]
    public string Title { get; set; } = "";

    [Required(ErrorMessage = "著者は必須です。")]
    [StringLength(100, ErrorMessage = "著者は100文字以内で入力してください。")]
    public string Author { get; set; } = "";

    [Range(0, 100000, ErrorMessage = "価格は0以上100000以下で入力してください。")]
    public decimal Price { get; set; }

    [Required(ErrorMessage = "ISBNは必須です。")]
    [RegularExpression(@"^\d{10}(\d{3})?$", ErrorMessage = "ISBNは10桁または13桁の数字を入力してください。")]
    public string Isbn { get; set; } = "";
}