양식 및 유효성 검사

2025-06-22

팁 (조언)

이 콘텐츠는 Blazor 또는 오프라인으로 읽을 수 있는 다운로드 가능한 무료 PDF로 제공되는 for ASP NET Web Forms Developers for Azure eBook에서 발췌한 것입니다.

ASP.NET Web Forms 프레임워크에는 양식에 입력된 사용자 입력의 유효성 검사(RequiredFieldValidator, CompareValidatorRangeValidator등)를 처리하는 유효성 검사 서버 컨트롤 집합이 포함되어 있습니다. ASP.NET Web Forms 프레임워크는 데이터 주석([Required], [StringLength][Range]등)을 기반으로 모델 바인딩 및 모델의 유효성 검사도 지원합니다. 유효성 검사 논리는 눈에 거슬리지 않는 JavaScript 기반 유효성 검사를 사용하여 서버와 클라이언트 모두에서 적용할 수 있습니다. ValidationSummary 서버 컨트롤은 사용자에게 유효성 검사 오류의 요약을 표시하는 데 사용됩니다.

Blazor 는 클라이언트와 서버 간의 유효성 검사 논리 공유를 지원합니다. ASP.NET 많은 일반적인 서버 유효성 검사의 미리 빌드된 JavaScript 구현을 제공합니다. 대부분의 경우 개발자는 앱별 유효성 검사 논리를 완전히 구현하기 위해 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 . 특정 입력 필드에 대한 유효성 검사 메시지를 표시하려면 구성 요소를 사용하여 ValidationMessage 적절한 모델 멤버를 가리키는 매개 변수에 For 대한 람다 식을 지정합니다.

다음 모델 형식은 데이터 주석을 사용하여 여러 유효성 검사 규칙을 정의합니다.

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; }
}

다음 구성 요소는 Blazor 모델 형식에 따라 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 서버 앱에서 데이터는 이미 서버에 있지만 유지되어야 합니다. 앱에서 Blazor 데이터 액세스 처리는 데이터 처리 섹션의 주제입니다.

추가 리소스

앱의 양식 및 유효성 검사 에 Blazor 대한 자세한 내용은 설명서를 참조 Blazor 하세요.

이전 다음

다음을 통해 공유

양식 및 유효성 검사

추가 리소스

추가 리소스