C# Blazor 유효성 처리하기 Validation

C# Blazor 유효성 처리하기 Validation

 

화면에서 값을 입력받아야 하는 경우 사용자가 갑을 입력하지 않았을 때 경고문구를 보여줌으로써

사용자가 해당 항목을 인지할 수 있도록하는 방법입니다.

흔히 이를 유효성체크라고 불리는데 필수값을 입력할 수 있게 해 줍니다.

먼저 화면에서 사용할 Model 을 정의합니다.

using System.ComponentModel.DataAnnotations;

using Blazor.AppTest.Data;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string? Name { get; set; }
    [Required]
    public int? Age { get; set; }
}

위 Model 의 Property 정의에 서 알 수 있듯이

[Required] 로 정의하면 필수값을 의미하며

[StringLength] 를 이용해 이름이 길이를 제한하고 제한을 넘은 경우에 보일 Error 메세지를 정의할 수 있습니다.

숫자인 경우도 Main, Max 값을 지정할 수 있습니다.

화면에서는 위 모델을 이용해서 아래처럼 사용합니다.

@page "/validation"
@using Blazor.AppTest.Data

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

    <p><InputText id="name" @bind-Value="exampleModel.Name" /></p>
    <p><InputNumber id="age" @bind-Value="exampleModel.Age" /></p>

    <br /><br />
    
    <button type="submit">Submit</button>
</EditForm>

@code {
    private ExampleModel exampleModel = new();

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

    private void HandleValidSubmit()
    {
        Console.WriteLine("HandleValidSubmit");
    }
}

EditForm 을 사용하여 Model 에 앞서 정의한 모델을 사용하면 submit button 클릭이 발생되면 HandleValidSubmit 이벤트를 처리하기 전에 되면서 Validation 항목을 확인하게 됩니다.

ValidationSummary 에 Validation 메세지가 표시됩니다.