Blazor는 클라이언트와 서버 간에 유효성 검사 로직을 공유할 수 있도록 지원합니다. 서버 유효성 검사의 많은 일반적인 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 컴포넌트를 사용하십시오. 특정 입력 필드에 대한 유효성 검사 메시지를 표시하려면 For 매개변수에 적절한 모델 멤버를 가리키는 람다 식을 지정하여 ValidationMessage 컴포넌트를 사용하십시오.
다음 모델 타입은 데이터 주석을 사용하여 여러 유효성 검사 규칙을 정의합니다:
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; }
}다음 컴포넌트는 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 Server 앱에서는 데이터가 이미 서버에 있지만, 이를 지속시켜야 합니다. Blazor 앱에서 데이터 액세스를 처리하는 방법은 데이터 처리 섹션에서 다룹니다.