Blazor EditForm 폼 유효성 검사 완전 정복

📌 학습 목표

• EditForm 컴포넌트의 역할과 기본 구조를 이해합니다.
• DataAnnotations 어트리뷰트를 사용해 모델에 유효성 규칙을 선언합니다.
• ValidationSummary와 ValidationMessage로 오류 메시지를 화면에 출력합니다.
• OnValidSubmit과 OnInvalidSubmit 이벤트로 폼 제출을 처리합니다.
• 사용자 지정 유효성 검사 어트리뷰트를 직접 작성합니다.

📝 개념 설명

1. EditForm 컴포넌트

Blazor에서 폼을 처리할 때는 HTML의 <form> 태그 대신 EditForm 컴포넌트를 사용합니다. EditForm은 단순한 래퍼가 아니라, 내부적으로 EditContext 객체를 생성해 폼 전체 상태(필드 수정 여부, 유효성 오류 목록 등)를 일괄 관리합니다.

EditForm의 주요 속성과 이벤트

• Model: 폼에 바인딩할 C# 데이터 모델 객체
• OnValidSubmit: 유효성 검사 통과 시 호출되는 이벤트 콜백
• OnInvalidSubmit: 유효성 검사 실패 시 호출되는 이벤트 콜백
• OnSubmit: 유효성 결과와 무관하게 항상 호출 (직접 검사 코드 작성 필요)

@* RegisterForm.razor — EditForm 기본 구조 *@
<EditForm Model="@registerModel" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div>
        <label>이름</label>
        <InputText @bind-Value="registerModel.Name" />
        <ValidationMessage For="@(() => registerModel.Name)" />
    </div>

    <button type="submit">제출</button>
</EditForm>

@code {
    private RegisterModel registerModel = new();

    private void HandleValidSubmit()
    {
        Console.WriteLine("폼 제출 성공!");
    }

    private void HandleInvalidSubmit()
    {
        Console.WriteLine("입력값을 확인해 주세요.");
    }
}

2. DataAnnotations — 선언형 유효성 규칙

DataAnnotations는 C# 모델 클래스의 프로퍼티에 어트리뷰트(Attribute)를 부착해 유효성 규칙을 선언적으로 정의하는 방식입니다. System.ComponentModel.DataAnnotations 네임스페이스를 사용하며, ASP.NET Core 전반에서 폭넓게 활용됩니다.

주요 DataAnnotations 어트리뷰트

using System.ComponentModel.DataAnnotations;

public class RegisterModel
{
    [Required(ErrorMessage = "이름을 입력해 주세요.")]
    [StringLength(50, MinimumLength = 2, ErrorMessage = "이름은 2~50자 사이여야 합니다.")]
    public string Name { get; set; } = "";

    [Required(ErrorMessage = "이메일을 입력해 주세요.")]
    [EmailAddress(ErrorMessage = "올바른 이메일 형식이 아닙니다.")]
    public string Email { get; set; } = "";

    [Required(ErrorMessage = "비밀번호를 입력해 주세요.")]
    [StringLength(100, MinimumLength = 8, ErrorMessage = "비밀번호는 8~100자 사이여야 합니다.")]
    public string Password { get; set; } = "";

    [Required(ErrorMessage = "비밀번호 확인을 입력해 주세요.")]
    [Compare(nameof(Password), ErrorMessage = "비밀번호가 일치하지 않습니다.")]
    public string ConfirmPassword { get; set; } = "";

    [Range(14, 120, ErrorMessage = "나이는 14~120세 사이여야 합니다.")]
    public int Age { get; set; }
}

3. 유효성 검사 컴포넌트

① DataAnnotationsValidator

EditForm 내에 배치해 DataAnnotations 어트리뷰트 기반 검사를 활성화하는 컴포넌트입니다. EditForm 내에 반드시 배치해야 어트리뷰트 검사가 실행됩니다.

<DataAnnotationsValidator />

② ValidationSummary

폼 전체의 유효성 오류 메시지를 <ul> 목록 형태로 한꺼번에 표시합니다. 폼 상단에 배치해 사용자가 모든 오류를 한눈에 파악하게 합니다.

<ValidationSummary />

③ ValidationMessage

특정 프로퍼티의 오류 메시지만 해당 필드 옆에 표시합니다. For 속성에 람다 표현식으로 프로퍼티를 지정합니다.

<ValidationMessage For="@(() => registerModel.Email)" />

4. Blazor 입력(Input) 컴포넌트

Blazor는 HTML 입력 요소를 감싸는 전용 컴포넌트를 제공합니다. 이 컴포넌트들은 EditContext와 자동으로 연동되어 유효성 상태에 따라 CSS 클래스(valid / invalid / modified)가 자동 적용됩니다.

💡 예제 & 실습 — 회원가입 폼 완성하기

DataAnnotations 모델 정의, EditForm 구성, 오류 메시지 표시, 폼 제출 처리를 모두 포함한 완전한 회원가입 폼을 단계별로 작성합니다.

Step 1. 모델 클래스 정의 (RegisterModel.cs)

// Models/RegisterModel.cs
using System.ComponentModel.DataAnnotations;

public class RegisterModel
{
    [Required(ErrorMessage = "이름을 입력해 주세요.")]
    [StringLength(50, MinimumLength = 2, ErrorMessage = "이름은 2~50자 사이여야 합니다.")]
    public string Name { get; set; } = "";

    [Required(ErrorMessage = "이메일을 입력해 주세요.")]
    [EmailAddress(ErrorMessage = "올바른 이메일 형식이 아닙니다.")]
    public string Email { get; set; } = "";

    [Required(ErrorMessage = "비밀번호를 입력해 주세요.")]
    [StringLength(100, MinimumLength = 8, ErrorMessage = "비밀번호는 8~100자 사이여야 합니다.")]
    public string Password { get; set; } = "";

    [Required(ErrorMessage = "비밀번호 확인을 입력해 주세요.")]
    [Compare(nameof(Password), ErrorMessage = "비밀번호가 일치하지 않습니다.")]
    public string ConfirmPassword { get; set; } = "";

    [Range(14, 120, ErrorMessage = "나이는 14~120세 사이여야 합니다.")]
    public int Age { get; set; }

    [Range(typeof(bool), "true", "true", ErrorMessage = "이용약관에 동의해 주세요.")]
    public bool AgreeToTerms { get; set; }
}

Step 2. 폼 컴포넌트 작성 (Register.razor)

@page "/register"

<h2>회원가입</h2>

@if (isSuccess)
{
    <p>@successMessage</p>
}
else
{
    <EditForm Model="@registerModel" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <div class="form-group">
            <label>이름 *</label>
            <InputText @bind-Value="registerModel.Name" class="form-control" />
            <ValidationMessage For="@(() => registerModel.Name)" />
        </div>

        <div class="form-group">
            <label>이메일 *</label>
            <InputText @bind-Value="registerModel.Email" class="form-control" />
            <ValidationMessage For="@(() => registerModel.Email)" />
        </div>

        <div class="form-group">
            <label>비밀번호 (8자 이상) *</label>
            <InputText @bind-Value="registerModel.Password" type="password" class="form-control" />
            <ValidationMessage For="@(() => registerModel.Password)" />
        </div>

        <div class="form-group">
            <label>비밀번호 확인 *</label>
            <InputText @bind-Value="registerModel.ConfirmPassword" type="password" class="form-control" />
            <ValidationMessage For="@(() => registerModel.ConfirmPassword)" />
        </div>

        <div class="form-group">
            <label>나이</label>
            <InputNumber @bind-Value="registerModel.Age" class="form-control" />
            <ValidationMessage For="@(() => registerModel.Age)" />
        </div>

        <div class="form-group">
            <label>
                <InputCheckbox @bind-Value="registerModel.AgreeToTerms" />
                이용약관에 동의합니다 *
            </label>
            <ValidationMessage For="@(() => registerModel.AgreeToTerms)" />
        </div>

        <button type="submit">가입하기</button>
    </EditForm>
}

@code {
    private RegisterModel registerModel = new();
    private bool isSuccess = false;
    private string successMessage = "";

    private void HandleValidSubmit()
    {
        // 유효성 검사 통과 — 실제 저장 로직 실행
        isSuccess = true;
        successMessage = $"{registerModel.Name}님, 회원가입이 완료되었습니다!";
    }
}

Step 3. 코드 해설

1. Model=”@registerModel”: EditForm이 registerModel 객체를 추적 대상으로 등록하고 내부 EditContext를 생성합니다.
2. DataAnnotationsValidator: 없으면 어트리뷰트 검사가 전혀 실행되지 않아 OnValidSubmit이 항상 성공으로 처리됩니다.
3. ValidationSummary: 폼 상단에 모든 유효성 오류를 목록으로 표시합니다.
4. @bind-Value: 입력 컴포넌트와 모델 프로퍼티를 양방향 바인딩합니다.
5. ValidationMessage For=”@(() => …)”: 람다 표현식으로 특정 프로퍼티를 지정해 해당 필드의 오류 메시지만 표시합니다.
6. OnValidSubmit: 모든 유효성 검사를 통과한 후에만 HandleValidSubmit이 호출됩니다.

Step 4. 사용자 지정(Custom) 유효성 검사 어트리뷰트

DataAnnotations로 표현하기 어려운 복잡한 규칙은 ValidationAttribute를 상속해 직접 작성할 수 있습니다.

// 한국 휴대폰 번호 형식 검사 어트리뷰트
using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;

public class KoreanPhoneAttribute : ValidationAttribute
{
    protected override ValidationResult? IsValid(
        object? value, ValidationContext validationContext)
    {
        if (value is null || string.IsNullOrEmpty(value.ToString()))
            return ValidationResult.Success; // null 여부는 [Required]가 담당

        string phone = value.ToString()!;
        bool isValid = Regex.IsMatch(phone, @"^010[-]?[0-9]{4}[-]?[0-9]{4}$");

        return isValid
            ? ValidationResult.Success
            : new ValidationResult(
                ErrorMessage ?? "올바른 휴대폰 번호를 입력해 주세요. (예: 010-1234-5678)");
    }
}

// 모델에서 사용
public class ContactModel
{
    [Required]
    [KoreanPhone(ErrorMessage = "휴대폰 번호 형식이 올바르지 않습니다.")]
    public string Phone { get; set; } = "";
}

⚠️ 자주 틀리는 것 / 주의사항

🎯 마무리

Blazor의 EditForm과 DataAnnotations를 조합하면 별도의 유효성 검사 로직 없이도 모델 클래스 선언만으로 강력한 폼 유효성 검사를 구현할 수 있습니다. 모델에 어트리뷰트를 부착하고, EditForm 내에 DataAnnotationsValidator를 배치하며, ValidationMessage로 오류를 표시하는 세 가지 패턴만 숙지해도 실무의 대부분 요구사항을 충족할 수 있습니다.