BlazorASP.NET Core formuláře a ověřování

Rozhraní Blazor podporuje webové formuláře s ověřováním pomocí komponenty EditForm vázané na model, který používá datové poznámky.

Chcete-li EditForm předvést, jak komponenta funguje s ověřováním datových poznámek, zvažte následující ExampleModel typ. Vlastnost je označena jako povinná a určuje limit maximální délky Name RequiredAttribute řetězce a StringLengthAttribute chybovou zprávu.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Formulář je definován pomocí Blazor komponenty EditForm architektury. Následující komponenta ukazuje typické prvky, komponenty a kód pro vykreslení webového formuláře pomocí komponenty, která Razor Razor je EditForm svázaná s předchozím ExampleModel typem.

Pages/FormExample1.razor:

@page "/form-example-1"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample1> Logger

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

    <InputText id="name" @bind-Value="exampleModel.Name" />

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

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

V předchozí FormExample1 komponentě:

• Komponenta EditForm se vykreslí tam, kde <EditForm> se prvek zobrazí.
• Model se vytvoří v bloku komponenty @code a uchová se v privátním poli ( exampleModel ). Pole je EditForm.Model přiřazeno k atributu elementu ( Model <EditForm> ).
• Komponenta InputText ( ) je vstupní id="name" komponenta pro úpravy řetězcových hodnot. Atribut @bind-Value direktivy váže exampleModel.Name vlastnost modelu na vlastnost InputText Value komponenty.
• Metoda HandleValidSubmit je přiřazena metodě OnValidSubmit . Obslužná rutina je volána, pokud formulář projde ověřením.
• Validátor datových poznámek ( DataAnnotationsValidator † komponenta ) připojí podporu ověřování pomocí datových poznámek:
  • Pokud je pole formuláře při výběru tlačítka prázdné, zobrazí se chyba v souhrnu ověření ( součást <input> Submit ) (" ") a ValidationSummary není ‡ The Name field is required. HandleValidSubmit volána.
  • Pokud pole formuláře obsahuje více než deset znaků při výběru tlačítka, zobrazí se v souhrnu ověření <input> Submit chyba (" ") a Name is too long. není HandleValidSubmit volána.
  • Pokud pole formuláře obsahuje platnou hodnotu při výběru <input> Submit tlačítka, je HandleValidSubmit volána hodnota .

†Komponenta DataAnnotationsValidator je prokrytá v části Komponenta validátoru. ‡Komponenta ValidationSummary je probádá v části Součásti Souhrn ověření a Ověřovací zpráva. Další informace o vazbě vlastností najdete v tématu BlazorASP.NET Core datová vazba .

Vytvoření vazby formuláře

Vytvoří EditForm na základě přiřazené instance modelu EditContext kaskádovou hodnotu pro ostatní komponenty ve formuláři. Sleduje EditContext metadata o procesu úprav, včetně polí, která byla změněna, a aktuální ověřovací zprávy. Přiřazení k nebo může EditForm.Model vytvořit EditForm.EditContext vazbu formuláře k datům.

Přiřazení k EditForm.Model :

<EditForm Model="@exampleModel" ...>

@code {
    private ExampleModel exampleModel = new() { ... };
}

Přiřazení k EditForm.EditContext :

<EditForm EditContext="@editContext" ...>

@code {
    private ExampleModel exampleModel = new() { ... };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);
    }
}

Přiřaďte EditContext nebo Model EditForm . Přiřazení obou není podporováno a vygeneruje chybu za běhu:

Komponenta vykreslování neošetřených výjimek: EditForm vyžaduje parametr Model nebo parametr EditContext, ale ne obojí.

Zpracování odeslání formuláře

metoda EditForm poskytuje následující zpětná volání pro zpracování odeslání formuláře:

• Slouží OnValidSubmit k přiřazení obslužné rutiny události, která se má spustit, když je odeslán formulář s platnými poli.
• Slouží OnInvalidSubmit k přiřazení obslužné rutiny události, která se má spustit, když je odeslán formulář s neplatnými poli.
• Slouží OnSubmit k přiřazení obslužné rutiny události ke spuštění bez ohledu na stav ověřování polí formuláře. Formulář je ověřen voláním v EditContext.Validate metodě obslužné rutiny události. Pokud Validate vrátí hodnotu , formulář je true platný.

Integrované komponenty formuláře

Tato Blazor rozhraní poskytuje integrované komponenty formuláře pro příjem a ověření vstupu uživatele. Vstupy se ověřují, když se změní a když se formulář odeslal. Dostupné vstupní komponenty jsou uvedené v následující tabulce.

Vstupní komponenta	Vykresleno jako…
InputCheckbox	<input type="checkbox">
InputDate<TValue>	<input type="date">
InputFile	<input type="file">
InputNumber<TValue>	<input type="number">
InputRadio<TValue>	<input type="radio">
InputRadioGroup<TValue>	Skupina podřízených skupině InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Další informace o InputFile komponentě najdete v tématu ASP.NET Core Blazor nahrávání souborů .

Všechny vstupní komponenty, včetně EditForm , podporují libovolné atributy. Jakýkoli atribut, který neodpovídá parametru komponenty, se přidá do vykreslených elementů HTML.

Vstupní komponenty poskytují výchozí chování pro ověřování při změně pole, včetně aktualizace třídy šablon stylů CSS pole tak, aby odrážela stav pole jako platný nebo neplatný. Některé komponenty zahrnují užitečnou logiku analýzy. Například a bez InputDate<TValue> problémů InputNumber<TValue> se zpracováním neparseovatelných hodnot zaregistrujte neparseable hodnoty jako chyby ověřování. Typy, které mohou přijímat hodnoty null, podporují také možnost null cílového pole (například pro celé číslo int? s možnou hodnotou null).

Příklad formuláře

Následující typ, který se používá v několika příkladech tohoto článku, definuje rozmanitou sadu vlastností s datovými Starship poznámkami:

• Identifier je povinný, protože je anotován objektem RequiredAttribute . Identifier vyžaduje hodnotu alespoň jednoho znaku, ale ne více než 16 znaků pomocí StringLengthAttribute .
• Description je nepovinný, protože není anotován objektem RequiredAttribute .
• Classification je povinné.
• Výchozí hodnota vlastnosti je nula, ale vyžaduje hodnotu od 1 do MaximumAccommodation 100 000 na její RangeAttribute hodnotu .
• IsValidatedDesign vyžaduje, aby vlastnost byla nastavená na hodnotu, která odpovídá vybranému stavu, když je vlastnost svázaná se zaškrtávacím políčkem true v uživatelském rozhraní ( <input type="checkbox"> ).
• ProductionDate je a DateTime povinné.

Starship.cs:

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

Následující formulář přijímá a ověřuje vstup uživatele pomocí:

• Vlastnosti a ověření definované v předchozím Starship modelu.
• Několik Blazor předdefinových součástí formuláře.

Pages/FormExample2.razor:

@page "/form-example-2"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample2> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

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

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @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>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

v EditForm předchozím příkladu vytvoří na EditContext základě přiřazené instance ( ) a Starship Model="@starship" zpracuje platný formulář. Další příklad ( součást) ukazuje, jak přiřadit k formuláři FormExample3 EditContext a ověřit, kdy je formulář odeslán.

V následujícím příkladu:

• Používá se zkrácená verze předchozího formuláře ( součást), která přijímá pouze hodnotu identifikátoru Starfleet Starship Database FormExample2 hvězdcové lodi. Ostatní vlastnosti Starship obdrží platné výchozí hodnoty při vytvoření instance Starship typu.
• Metoda HandleSubmit se spustí, když Submit je tlačítko vybrané.
• Formulář je ověřen voláním EditContext.Validate v HandleSubmit metodě .
• Protokolování se provádí v závislosti na výsledku ověření.

Pages/FormExample3.razor:

@page "/form-example-3"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample3> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new(starship);
    }

    private async Task HandleSubmit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("HandleSubmit called: Form is valid");

            // Process the valid form
            // await ...
            await Task.CompletedTask;
        }
        else
        {
            Logger.LogInformation("HandleSubmit called: Form is INVALID");
        }
    }
}

Výběr více možností s InputSelect komponentou

Vazba podporuje multiple výběr možností s InputSelect<TValue> komponentou . Událost @onchange poskytuje pole vybraných možností prostřednictvím argumentů událostí ( ChangeEventArgs ). Hodnota musí být svázaná s typem pole a vazba na typ pole činí atribut ve multiple InputSelect<TValue> značce volitelný.

V následujícím příkladu musí uživatel vybrat alespoň dvě klasifikace hvězdiců, ale ne více než tři klasifikace.

Pages/BindMultipleWithInputSelect.razor:

@page "/bind-multiple-with-inputselect"
@using System.ComponentModel.DataAnnotations 
@using Microsoft.Extensions.Logging
@inject ILogger<BindMultipleWithInputSelect> Logger 

<h1>Bind Multiple <code>InputSelect</code>Example</h1>

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Select classifications (Minimum: 2, Maximum: 3):
            <InputSelect @bind-Value="starship.SelectedClassification">
                <option value="@Classification.Exploration">Exploration</option>
                <option value="@Classification.Diplomacy">Diplomacy</option>
                <option value="@Classification.Defense">Defense</option>
                <option value="@Classification.Research">Research</option>
            </InputSelect>
        </label>
    </p>

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

<p>
    Selected Classifications: 
    @string.Join(", ", starship.SelectedClassification)
</p>

@code {
    private EditContext editContext;
    private Starship starship = new();

    protected override void OnInitialized()
    {
        editContext = new(starship);
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");
    }

    private class Starship
    {
        [Required, MinLength(2), MaxLength(3)]
        public Classification[] SelectedClassification { get; set; } =
            new[] { Classification.Diplomacy };
    }

    private enum Classification { Exploration, Diplomacy, Defense, Research }
}

Informace o tom, jak se zpracovávají prázdné řetězce a hodnoty v datové vazbě, najdete v části Možnosti vazby na null hodnoty objektů InputSelect null jazyka C#.

Možnosti InputSelect vazby na hodnoty objektů jazyka null C#

Informace o tom, jak se zpracovávají prázdné řetězce a hodnoty null v datové vazbě, najdete v tématu BlazorASP.NET Core datová vazba .

Podpora zobrazovaný název

Několik integrovaných komponent podporuje zobrazované názvy pomocí InputBase<TValue>.DisplayName parametru .

Ve formuláři ( součást) části Formulář příkladu není v produkčním datu nové hvězdné lodi Starfleet Starship Database zobrazovaný FormExample2 název:

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" />
</label>

Pokud pole obsahuje neplatné datum, kdy se formulář odeslal, chybová zpráva nezobrazí popisný název. Název pole " " nemá mezeru mezi " " a " " , když se ProductionDate Production zobrazí v Date souhrnu ověření:

Pole ProductionDate musí být datum.

Nastavte vlastnost na popisný název s mezerou mezi slovy " " a DisplayName Production " Date ":

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               DisplayName="Production Date" />
</label>

Souhrn ověření zobrazí popisný název, když je hodnota pole neplatná:

Pole Production Date (Datum výroby) musí být datum.

Podpora šablon chybových zpráv

InputDate<TValue>InputNumber<TValue>a podporují šablony chybových zpráv:

• InputDate<TValue>.ParsingErrorMessage
• InputNumber<TValue>.ParsingErrorMessage

Ve formuláři ( součást) části Formulář příkladu s přiřazeným popisný zobrazovaný název pole vytvoří chybovou zprávu pomocí následující Starfleet Starship Database FormExample2 výchozí šablony chybové Production Date zprávy:

The {0} field must be a date.

Pozice zástupného symbolu je místo, kde se hodnota vlastnosti zobrazí, když se chyba {0} DisplayName zobrazí uživateli.

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               DisplayName="Production Date" />
</label>

Pole Production Date (Datum výroby) musí být datum.

Přiřazení vlastní šablony k ParsingErrorMessage poskytnutí vlastní zprávy:

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               DisplayName="Production Date" 
               ParsingErrorMessage="The {0} field has an incorrect date value." />
</label>

Pole provozní datum má nesprávnou hodnotu data.

Základní ověřování

V základních scénářích ověřování formuláře EditForm může instance pomocí deklarovaného EditContext a ValidationMessageStore Instances ověřovat pole formuláře. Obslužná rutina OnValidationRequested události pro událost provádění EditContext vlastní ověřovací logiky. Výsledek obslužné rutiny aktualizuje ValidationMessageStore instanci.

Základní ověřování formuláře je užitečné v případech, kdy je model formuláře definován v rámci součásti hostující formulář, a to buď jako členy přímo na komponentu, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se třída nezávislého modelu používá napříč několika komponentami.

V následující FormExample4 součásti HandleValidationRequested obslužná rutina vymaže všechny existující ověřovací zprávy voláním ValidationMessageStore.Clear před ověřením formuláře.

Pages/FormExample4.razor:

@page "/form-example-4"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample4> Logger

<h2>Ship Holodecks</h2>

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <label>
        Type 1:
        <InputCheckbox @bind-Value="holodeck.Type1" />
    </label>

    <label>
        Type 2:
        <InputCheckbox @bind-Value="holodeck.Type2" />
    </label>

    <button type="submit">Update</button>

    <ValidationMessage For="() => holodeck.Options" />

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private EditContext? editContext;
    private Holodeck holodeck = new();
    private ValidationMessageStore? messageStore;

    protected override void OnInitialized()
    {
        editContext = new(holodeck);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object? sender, 
        ValidationRequestedEventArgs args)
    {
        messageStore?.Clear();

        // Custom validation logic
        if (!holodeck.Options)
        {
            messageStore?.Add(() => holodeck.Options, "Select at least one.");
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called: Processing the form");

        // Process the form
    }

    public class Holodeck
    {
        public bool Type1 { get; set; }
        public bool Type2 { get; set; }
        public bool Options => Type1 || Type2;
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnValidationRequested -= HandleValidationRequested;
        }
    }
}

Komponenta pro ověřování datových poznámek a vlastní ověření

DataAnnotationsValidatorKomponenta připojí k kaskádě ověřování datových poznámek EditContext . Povolení ověřování datových poznámek vyžaduje DataAnnotationsValidator komponentu. Chcete-li použít jiný systém ověřování než datové poznámky, použijte místo komponenty vlastní implementaci DataAnnotationsValidator . Implementace rozhraní pro DataAnnotationsValidator jsou k dispozici pro kontrolu v referenčním zdroji:

• DataAnnotationsValidator
• AddDataAnnotationsValidation.

Blazor provádí dva typy ověřování:

• Ověřování polí se provede, když se karty uživatele nacházejí v poli. Při ověřování pole DataAnnotationsValidator přidruží součást všechny hlášené výsledky ověření k poli.
• Ověřování modelu se provede, když uživatel formulář odešle. Při ověřování modelu se DataAnnotationsValidator Komponenta pokusí určit pole na základě názvu člena, který sestavy výsledků ověření. Výsledky ověření, které nejsou přidruženy k jednotlivým členům, jsou přidruženy k modelu, nikoli poli.

Komponenty validátoru

Komponenty validátoru podporují ověřování formuláře, a to tak, že spravují ValidationMessageStore pro formulář EditContext .

BlazorRozhraní poskytuje DataAnnotationsValidator komponentu pro připojení podpory ověřování k formulářům na základě ověřovacích atributů (datové poznámky). Můžete vytvořit vlastní komponenty validátoru pro zpracování zpráv ověřování pro různé formuláře na stejné stránce nebo v jiném formuláři v různých krocích zpracování formuláře (například ověřování na straně klienta následovaný ověřováním na straně serveru). Příklad komponenty validátoru zobrazený v této části se CustomValidation používá v následujících částech tohoto článku:

• Ověřování obchodní logiky pomocí komponenty validátoru
• Ověřování serveru pomocí komponenty validátoru

Vytvořit komponentu validátoru z ComponentBase :

• Formulář EditContext je kaskádový parametr součásti.
• Při inicializaci komponenty validátoru se vytvoří nový, ValidationMessageStore který udržuje aktuální seznam chyb formuláře.
• Úložiště zpráv přijímá chyby, když kód vývojáře v součásti formuláře volá DisplayErrors metodu. Chyby jsou předány DisplayErrors metodě v Dictionary<string, List<string>> . Ve slovníku je klíč názvem pole formuláře, které obsahuje jednu nebo více chyb. Hodnota je seznam chyb.
• Zprávy jsou vymazány, pokud došlo k některé z následujících:
  • Ověřování je požadováno EditContext při OnValidationRequested vyvolání události. Všechny chyby jsou vymazány.
  • Při vyvolání události se změní pole ve formuláři OnFieldChanged . Vymažou se jenom chyby pro toto pole.
  • ClearErrorsMetoda je volána kódem pro vývojáře. Všechny chyby jsou vymazány.

CustomValidation.cs (Pokud se používá v testovací aplikaci, změňte obor názvů BlazorSample tak, aby odpovídal oboru názvů aplikace):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorSample
{
    public class CustomValidation : ComponentBase
    {
        private ValidationMessageStore? messageStore;
    
        [CascadingParameter]
        private EditContext? CurrentEditContext { get; set; }
    
        protected override void OnInitialized()
        {
            if (CurrentEditContext is null)
            {
                throw new InvalidOperationException(
                    $"{nameof(CustomValidation)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(CustomValidation)} " +
                    $"inside an {nameof(EditForm)}.");
            }
    
            messageStore = new(CurrentEditContext);
    
            CurrentEditContext.OnValidationRequested += (s, e) => 
                messageStore?.Clear();
            CurrentEditContext.OnFieldChanged += (s, e) => 
                messageStore?.Clear(e.FieldIdentifier);
        }
    
        public void DisplayErrors(Dictionary<string, List<string>> errors)
        {
            if (CurrentEditContext is not null)
            {
                foreach (var err in errors)
                {
                    messageStore?.Add(CurrentEditContext.Field(err.Key), err.Value);
                }
    
                CurrentEditContext.NotifyValidationStateChanged();
            }
        }
    
        public void ClearErrors()
        {
            messageStore?.Clear();
            CurrentEditContext?.NotifyValidationStateChanged();
        }
    }
}

Ověřování obchodní logiky pomocí komponenty validátoru

Pro obecné ověřování obchodní logiky použijte komponentu validátoru , která přijímá chyby formuláře ve slovníku.

Základní ověřování je užitečné v případech, kdy je model formuláře definován v rámci součásti hostující formulář, a to buď jako členy přímo na komponentu, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se třída nezávislého modelu používá napříč několika komponentami.

V následujícím příkladu:

• Používá se zkrácená verze Starfleet Starship Database formuláře ( FormExample2 komponenty) z oddílu vzorového formuláře , která akceptuje pouze klasifikaci a popis Starship. Ověření datové poznámky není aktivováno při odeslání formuláře, protože DataAnnotationsValidator součást není obsažena ve formuláři.
• CustomValidationSoučást z části komponenty validátoru tohoto článku se používá.
• DescriptionPokud uživatel vybere Defense klasifikaci lodí (), vyžaduje ověření hodnotu pro popis příjemce () Classification .

Když jsou ověřovací zprávy nastaveny v komponentě, přidají se do validátoru ValidationMessageStore a zobrazí se v EditForm souhrnu ověření.

Pages/FormExample5.razor:

@page "/form-example-5"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample5> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Primary Classification:
            <InputSelect @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>
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private CustomValidation? customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        customValidation?.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (starship.Classification == "Defense" &&
                string.IsNullOrEmpty(starship.Description))
        {
            errors.Add(nameof(starship.Description),
                new() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation?.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("HandleValidSubmit called: Processing the form");

            // Process the valid form
        }
    }
}

Ověřování serveru pomocí komponenty validátoru

Ověřování serveru se podporuje kromě ověřování na straně klienta:

• Zpracujte ověřování na straně klienta ve formuláři s DataAnnotationsValidator komponentou.
• Když formulář projde ověřováním na straně klienta ( OnValidSubmit je volán), odešlete EditContext.Model rozhraní API back-end serveru pro zpracování formuláře.
• Ověřování modelu procesu na serveru.
• Rozhraní API serveru zahrnuje integrované ověřování poznámek k datům architektury a vlastní logiku ověřování poskytovanou vývojářem. Pokud ověření projde na serveru, zpracujte formulář a pošlete zpátky stavový kód úspěchu ( 200 - OK ). Pokud se ověření nezdaří, vrátí stavový kód chyby ( 400 - Bad Request ) a chyby ověření pole.
• Buď zakažte formulář při úspěchu nebo zobrazte chyby.

Základní ověřování je užitečné v případech, kdy je model formuláře definován v rámci součásti hostující formulář, a to buď jako členy přímo na komponentu, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se třída nezávislého modelu používá napříč několika komponentami.

Následující příklad je založen na:

• Hostované Blazor WebAssembly řešení vytvořené ze Blazor WebAssembly šablony projektu. Přístup je podporován pro všechna zabezpečená hostovaná Blazor řešení, která jsou popsána v dokumentaci k hostovanému Blazor WebAssembly zabezpečení.
• StarshipModel ( Starship.cs ) z oddílu příklad formuláře .
• CustomValidationKomponenta zobrazená v části komponenty validátoru .

Vložte Starship model ( Starship.cs ) do Shared projektu řešení tak, aby aplikace klienta i serveru mohly model používat. Přidejte nebo aktualizujte obor názvů tak, aby odpovídal oboru názvů sdílené aplikace (například namespace BlazorSample.Shared ). Vzhledem k tomu, že model vyžaduje datové poznámky, přidejte odkaz na balíček pro System.ComponentModel.Annotations do Shared souboru projektu projektu:

<ItemGroup>
  <PackageReference Include="System.ComponentModel.Annotations" Version="{VERSION}" />
</ItemGroup>

chcete-li určit nejnovější verzi balíčku zástupného textu, který není ve verzi preview {VERSION} , podívejte se na historii verzí balíčku na adrese NuGet System.ComponentModel.Annotations . org pro.

V Server projektu přidejte kontroler pro zpracování žádostí o ověření Starship a vrácení neúspěšných ověřovacích zpráv. Aktualizujte obory názvů v posledním using příkazu pro Shared projekt a namespace pro třídu Controller. Kromě ověření poznámek k datům (na straně klienta a na straně serveru) ověří kontroler, že je zadána hodnota pro popis lodi ( Description ), pokud uživatel vybere Defense klasifikaci expedice ( Classification ).

Ověřování pro Defense klasifikaci lodí probíhá pouze na straně serveru v řadiči, protože nadcházející formulář při odeslání formuláře na server neprovede stejné ověření na straně klienta. Ověřování na straně serveru bez ověřování na straně klienta je běžné v aplikacích, které vyžadují ověření soukromé obchodní logiky vstupu uživatele na serveru. Například soukromé informace z dat uložených pro uživatele mohou být vyžadovány k ověření vstupu uživatele. Soukromá data zjevně nelze odeslat klientovi pro ověřování na straně klienta.

Controllers/StarshipValidation.cs:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class StarshipValidationController : ControllerBase
    {
        private readonly ILogger<StarshipValidationController> logger;

        public StarshipValidationController(
            ILogger<StarshipValidationController> logger)
        {
            this.logger = logger;
        }

        static readonly string[] scopeRequiredByApi = new[] { "API.Access" };

        [HttpPost]
        public async Task<IActionResult> Post(Starship starship)
        {
            HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);

            try
            {
                if (starship.Classification == "Defense" && 
                    string.IsNullOrEmpty(starship.Description))
                {
                    ModelState.AddModelError(nameof(starship.Description),
                        "For a 'Defense' ship " +
                        "classification, 'Description' is required.");
                }
                else
                {
                    logger.LogInformation("Processing the form asynchronously");

                    // Process the valid form
                    // async ...

                    return Ok(ModelState);
                }
            }
            catch (Exception ex)
            {
                logger.LogError("Validation Error: {Message}", ex.Message);
            }

            return BadRequest(ModelState);
        }
    }
}

Pokud v hostované aplikaci používáte předchozí kontroler, aktualizujte obor názvů ( ) tak, aby odpovídal oboru názvů Blazor WebAssembly BlazorSample.Server.Controllers kontrolerů aplikace.

Pokud na serveru dojde k chybě ověření vazby modelu, metoda ( ) obvykle vrátí výchozí chybnou odpověď ApiController ApiControllerAttribute požadavku s ValidationProblemDetails . Odpověď obsahuje více dat než jenom chyby ověření, jak je znázorněno v následujícím příkladu, pokud nejsou odeslána všechna pole formuláře a formulář Starfleet Starship Database selže ověření:

{
  "title": "One or more validation errors occurred.",
  "status": 400,
  "errors": {
    "Identifier": ["The Identifier field is required."],
    "Classification": ["The Classification field is required."],
    "IsValidatedDesign": ["This form disallows unapproved ships."],
    "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
  }
}

Pokud rozhraní API serveru vrátí předchozí výchozí odpověď JSON, může klient parsovat odpověď v kódu vývojáře a získat podřízené prvky uzlu pro zpracování chyb ověřování errors formulářů. Pro parsovat soubor je nepohodlné psát vývojářský kód. Ruční analýza JSON vyžaduje, aby se po Dictionary<string, List<string>> zavolání vyvolala ReadFromJsonAsync chyba. V ideálním případě by rozhraní API serveru mělo vracet pouze chyby ověření:

{
  "Identifier": ["The Identifier field is required."],
  "Classification": ["The Classification field is required."],
  "IsValidatedDesign": ["This form disallows unapproved ships."],
  "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
}

Pokud chcete upravit odpověď rozhraní API serveru tak, aby vracela pouze chyby ověřování, změňte delegáta, který se vyvolá u akcí, které jsou v anotované pomocí ApiControllerAttribute Program.cs . Pro koncový bod rozhraní API ( /StarshipValidation ) vraťte s BadRequestObjectResult ModelStateDictionary . U všech ostatních koncových bodů rozhraní API zachováte výchozí chování vrácením výsledku objektu s novou hodnotou ValidationProblemDetails .

Na začátek souboru v aplikaci Microsoft.AspNetCore.Mvc Program.cs přidejte obor Server názvů :

using Microsoft.AspNetCore.Mvc;

V Program.cs souboru vyhledejte AddControllersWithViews rozšiřující metodu a přidejte následující volání ConfigureApiBehaviorOptions metody :

builder.Services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Další informace naleznete v tématu Zpracování chyb ve ASP.NET Core rozhraní API.

V projektu Client přidejte CustomValidation komponentu zobrazenou v části Komponenty validátoru. Aktualizujte obor názvů tak, aby odpovídal aplikaci (například namespace BlazorSample.Client ).

V projektu se formulář aktualizuje, aby se s pomocí komponenty zobrazují chyby ověření Client Starfleet Starship Database CustomValidation serveru. Když rozhraní API serveru vrátí ověřovací zprávy, přičtou se do . CustomValidation ValidationMessageStore Chyby jsou ve formuláři k dispozici pro zobrazení v souhrnu ověření EditContext formuláře.

V následující FormExample6 komponentě aktualizujte obor názvů projektu ( ) na obor názvů Shared @using BlazorSample.Shared sdíleného projektu. Všimněte si, že formulář vyžaduje autorizaci, takže uživatel musí být přihlášený k aplikaci, aby na formulář přecházet.

Pages/FormExample6.razor:

@page "/form-example-6"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<FormExample6> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" disabled="@disabled" />
        </label>
    </p>

    <button type="submit" disabled="@disabled">Submit</button>

    <p style="@messageStyles">
        @message
    </p>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private bool disabled;
    private string message;
    private string messageStyles = "visibility:hidden";
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private async Task HandleValidSubmit(EditContext editContext)
    {
        customValidation.ClearErrors();

        try
        {
            var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

InputText na základě vstupní události

Pomocí komponenty InputText můžete vytvořit vlastní komponentu, která místo input události používá událost change . Použití ověřování input pole triggerů událostí při každém stisknutí klávesy

Následující příklad používá ExampleModel třídu .

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Následující CustomInputText komponenta dědí komponentu architektury a InputText nastaví vazbu událostí na oninput událost.

Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       @bind="CurrentValueAsString" 
       @bind:event="oninput" />

Komponentu CustomInputText je možné použít InputText kdekoli. Následující FormExample7 komponenta používá sdílenou CustomInputText komponentu.

Pages/FormExample7.razor:

@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger

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

    <CustomInputText @bind-Value="exampleModel.Name" />

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

<p>
    CurrentValue: @exampleModel.Name
</p>

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Přepínače

Příklad v této části je založený na formě části Formulář Starfleet Starship Database příkladu v tomto článku.

Přidejte enum do aplikace následující typy. Vytvořte nový soubor, který je bude obsahovat, nebo ho přidejte do Starship.cs souboru.

public class ComponentEnums
{
    public enum Manufacturer { SpaceX, NASA, ULA, VirginGalactic, Unknown }
    public enum Color { ImperialRed, SpacecruiserGreen, StarshipBlue, VoyagerOrange }
    public enum Engine { Ion, Plasma, Fusion, Warp }
}

Z enums přístupných pro:

• Starship model v Starship.cs (například pokud using static ComponentEnums; má třída enums název ComponentEnums ).
• Starfleet Starship Database form (například pokud @using static ComponentEnums má třída výčtů název ComponentEnums ).

Pomocí InputRadio<TValue> komponent můžete vytvořit skupinu InputRadioGroup<TValue> přepínačů. V následujícím příkladu jsou vlastnosti přidány do Starship modelu popsaného v části Formulář příkladu:

[Required]
[Range(typeof(Manufacturer), nameof(Manufacturer.SpaceX), 
    nameof(Manufacturer.VirginGalactic), ErrorMessage = "Pick a manufacturer.")]
public Manufacturer Manufacturer { get; set; } = Manufacturer.Unknown;

[Required, EnumDataType(typeof(Color))]
public Color? Color { get; set; } = null;

[Required, EnumDataType(typeof(Engine))]
public Engine? Engine { get; set; } = null;

Aktualizujte Starfleet Starship Database formulář ( FormExample2 součást) z části Formulář příkladu. Přidejte komponenty, které chcete vytvořit:

• Skupina přepínačů pro výrobce lodí
• Vnořená skupina přepínačů pro barvu motoru a expedice.

<p>
    <InputRadioGroup @bind-Value="starship.Manufacturer">
        Manufacturer:
        <br>
        @foreach (var manufacturer in (Manufacturer[])Enum
            .GetValues(typeof(Manufacturer)))
        {
            <InputRadio Value="manufacturer" />
            <text>&nbsp;</text>@manufacturer<br>
        }
    </InputRadioGroup>
</p>
<p>
    Select one engine and one color. Recommendations are paired but any 
    combination of engine and color is allowed:<br>
    <InputRadioGroup Name="engine" @bind-Value="starship.Engine">
        <InputRadioGroup Name="color" @bind-Value="starship.Color">
            <InputRadio Name="engine" Value="Engine.Ion" />
            Engine: Ion<br>
            <InputRadio Name="color" Value="Color.ImperialRed" />
            Color: Imperial Red<br><br>
            <InputRadio Name="engine" Value="Engine.Plasma" />
            Engine: Plasma<br>
            <InputRadio Name="color" Value="Color.SpacecruiserGreen" />
            Color: Spacecruiser Green<br><br>
            <InputRadio Name="engine" Value="Engine.Fusion" />
            Engine: Fusion<br>
            <InputRadio Name="color" Value="Color.StarshipBlue" />
            Color: Starship Blue<br><br>
            <InputRadio Name="engine" Value="Engine.Warp" />
            Engine: Warp<br>
            <InputRadio Name="color" Value="Color.VoyagerOrange" />
            Color: Voyager Orange
        </InputRadioGroup>
    </InputRadioGroup>
</p>

Součásti Souhrn ověření a Ověřovací zpráva

Tato ValidationSummary komponenta shrnuje všechny ověřovací zprávy, které jsou podobné jako pomocná metoda značky souhrnu ověření:

<ValidationSummary />

Výstupní ověřovací zprávy pro konkrétní model s Model parametrem :

<ValidationSummary Model="@starship" />

Komponenta ValidationMessage<TValue> zobrazí ověřovací zprávy pro konkrétní pole, které je podobné jako pomocná metoda značky ověřovací zprávy. Zadejte pole pro ověření pomocí For atributu a výrazu lambda, který pojmenuje vlastnost modelu:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

Komponenty ValidationMessage<TValue> ValidationSummary a podporují libovolné atributy. Jakýkoli atribut, který neodpovídá parametru komponenty, se přidá do generovaného <div> elementu nebo <ul> .

Řídí styl ověřovacích zpráv v tabulce stylů aplikace ( wwwroot/css/app.css nebo wwwroot/css/site.css ). Výchozí třída validation-message nastaví barvu textu ověřovacích zpráv na červenou:

.validation-message {
    color: red;
}

Vlastní atributy ověřování

Pokud chcete zajistit, aby byl výsledek ověření správně přidružen k poli při použití vlastního atributu ověřování ,při vytváření předejte kontext MemberName ValidationResult ověření.

CustomValidator.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

Vlastní ověřovací atributy třídy CSS

Vlastní ověřovací atributy třídy CSS jsou užitečné při integraci s architekturami CSS, jako je bootstrap.

Následující příklad používá ExampleModel třídu .

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Pokud chcete zadat vlastní ověřovací atributy třídy CSS, začněte poskytnutím stylů CSS pro vlastní ověřování. V následujícím příkladu jsou zadané platné styly ( ) a validField neplatné ( invalidField ).

wwwroot/css/app.css ( Blazor WebAssembly ) nebo wwwroot/css/site.css (Blazor Server):

.validField {
    border-color: lawngreen;
}

.invalidField {
    background-color: tomato;
}

Vytvořte třídu odvozenou z , která kontroluje ověřovací zprávy polí a FieldCssClassProvider použije vhodný platný nebo neplatný styl.

CustomFieldClassProvider.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "validField" : "invalidField";
    }
}

Nastavte třídu jako zprostředkovatele třídy CustomFieldClassProvider CSS pole v instanci formuláře pomocí EditContext SetFieldCssClassProvider .

Pages/FormExample8.razor:

@page "/form-example-8"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample8> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

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

@code {
    private ExampleModel exampleModel = new();
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Předchozí příklad zkontroluje platnost všech polí formuláře a na každé pole použije styl. Pokud má formulář použít vlastní styly jenom na podmnožinu polí, na CustomFieldClassProvider podmínku použijte styly. Následující příklad CustomFieldClassProvider2 použije na pole pouze Name styl. Pro všechna pole s názvy, která se shoduje, se vrátí a Name string.Empty žádný styl se nevyučuje.

CustomFieldClassProvider2.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider2 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        if (fieldIdentifier.FieldName == "Name")
        {
            var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

            return isValid ? "validField" : "invalidField";
        }

        return string.Empty;
    }
}

Do souboru přidejte další ExampleModel vlastnost, například:

[StringLength(10, ErrorMessage = "Description is too long.")]
public string Description { get; set; } 

Přidejte Description do formuláře komponenty ExampleForm7 :

<InputText id="description" @bind-Value="exampleModel.Description" />

Aktualizujte EditContext instanci v metodě komponenty OnInitialized tak, aby se používá nový zprostředkovatel třídy CSS pole:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider2());

Vzhledem k tomu, že se u pole ( nevyu isídí ověřovací třída šablon Description id="description" stylů CSS, nemá žádný styl. Ověřování polí se ale spustí normálně. Pokud je k dispozici více než 10 znaků, souhrn ověření indikuje chybu:

Popis je příliš dlouhý.

V následujícím příkladu:

• Na pole se použije vlastní styl Name CSS.

• Všechna ostatní pole používají logiku podobnou výchozí logice a používají výchozí styly ověřování ŠABLON STYLŮ CSS polí Blazor Blazor s nebo modified valid invalid . Všimněte si, že u výchozích stylů je nemusíte přidávat do šablony stylů aplikace, pokud je aplikace založená na Blazor šabloně projektu. U aplikací, které nejsou založené na šabloně projektu, je možné do šablony stylů aplikace přidat Blazor výchozí styly:

  .valid.modified:not([type=checkbox]) {
      outline: 1px solid #26b050;
  }
  
  .invalid {
      outline: 1px solid red;
  }
  

CustomFieldClassProvider3.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider3 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        if (fieldIdentifier.FieldName == "Name")
        {
            return isValid ? "validField" : "invalidField";
        }
        else
        {
            if (editContext.IsModified(fieldIdentifier))
            {
                return isValid ? "modified valid" : "modified invalid";
            }
            else
            {
                return isValid ? "valid" : "invalid";
            }
        }
    }
}

Aktualizujte EditContext instanci v metodě komponenty tak, aby se používá předchozí poskytovatel třídy CSS OnInitialized pole:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider3());

Pomocí CustomFieldClassProvider3 :

• Pole Name používá vlastní styly šablon stylů CSS pro ověřování aplikace.
• Pole Description používá logiku podobnou logice a Blazor výchozím Blazor stylům ověřování šablon stylů CSS pole.

Blazor Ověřovací balíček datových poznámek

je Microsoft.AspNetCore.Components.DataAnnotations.Validation balíček, který vyplní mezery v prostředí ověřování pomocí DataAnnotationsValidator komponenty . Balíček je momentálně experimentální.

Vnořené modely, typy kolekcí a komplexní typy

Blazor poskytuje podporu pro ověřování vstupu formuláře pomocí datových poznámek s integrovaným DataAnnotationsValidator . DataAnnotationsValidatorPouze ověří vlastnosti nejvyšší úrovně modelu svázaného s formulářem, který není vlastností kolekce nebo komplexního typu.

Chcete-li ověřit celý graf objektu vázaného modelu, včetně vlastností kolekce a komplexního typu, použijte příkaz ObjectGraphDataAnnotationsValidator poskytnutý experimentálním Microsoft.AspNetCore.Components.DataAnnotations.Validation balíčkem:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

Přidávejte do vlastností modelu poznámky [ValidateComplexType] . V následujících třídách modelu ShipDescription obsahuje Třída další datové poznámky pro ověření, když je model svázán s formulářem:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = new();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}

Povolit tlačítko Odeslat na základě ověření formuláře

Chcete-li povolit a zakázat tlačítko Odeslat na základě ověření formuláře, následující příklad:

• Používá zkrácenou verzi předchozího Starfleet Starship Database formuláře ( FormExample2 komponenty), který přijímá pouze hodnotu identifikátoru lodě. Ostatní Starship vlastnosti obdrží platné výchozí hodnoty, když Starship je vytvořena instance typu.
• Pomocí formuláře EditContext přiřadí model při inicializaci komponenty.
• Ověří formulář v OnFieldChanged zpětném volání kontextu a povolí a zakáže tlačítko Odeslat.
• Implementuje IDisposable a zruší odběr obslužné rutiny události v Dispose metodě. Další informace naleznete v tématu RazorASP.NET Core životní cyklus komponenty.

Pages/FormExample9.razor:

@page "/form-example-9"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample9> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private bool formInvalid = false;
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new(starship);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object? sender, FieldChangedEventArgs e)
    {
        if (editContext is not null)
        {
            formInvalid = !editContext.Validate();
            StateHasChanged();
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public void Dispose()
    {
        if (editContext is not null)
        {
            editContext.OnFieldChanged -= HandleFieldChanged;
        }
    }
}

Pokud formulář není předem načten s platnými hodnotami a chcete zakázat Submit tlačítko při načtení formuláře, nastavte formInvalid na true .

Vedlejším účinkem předchozího přístupu je, že souhrn ověření ( ValidationSummary součást) se naplní neplatnými poli poté, co uživatel pracuje s libovolným polem. Vyřešte tento scénář jedním z následujících způsobů:

• Nepoužívejte ValidationSummary komponentu na formuláři.
• Zpřístupní ValidationSummary komponentu, když je vybráno tlačítko Odeslat (například v HandleValidSubmit metodě).

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary style="@displaySummary" />

    ...

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private string displaySummary = "display:none";

    ...

    private void HandleValidSubmit()
    {
        displaySummary = "display:block";
    }
}

Řešení potíží

InvalidOperationException: EditForm vyžaduje parametr modelu nebo parametr EditContext, ale ne obojí.

Potvrďte, že EditForm přiřadí a Model EditContext . U stejného formuláře nepoužívejte obojí.

Při přiřazování k Model Ověřte, zda je vytvořen typ modelu, jak ukazuje následující příklad:

private ExampleModel exampleModel = new();

Další zdroje informací

• ASP.NET Core Blazor nahrávání souborů
• Zabezpečení ASP.NET Core aplikace Blazor WebAssembly pomocí Azure Active Directory
• zabezpečení Blazor WebAssembly hostované aplikace v ASP.NET Core s využitím Azure Active Directory B2C
• Zabezpečení hostované ASP.NET Core Blazor WebAssembly aplikací pomocí Identity Serveru

BlazorRozhraní podporuje WebForms s ověřováním pomocí EditForm komponenty vázané na model, který používá datové poznámky.

Chcete-li předvést EditForm , jak Komponenta funguje s ověřováním datových poznámek , vezměte v úvahu následující ExampleModel typ. NameVlastnost je označena jako povinná RequiredAttribute a určuje StringLengthAttribute maximální limit délky řetězce a chybovou zprávu.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Formulář je definován pomocí Blazor EditForm komponenty rozhraní. Následující Razor Komponenta ukazuje typické prvky, komponenty a Razor kód pro vykreslení WebForm pomocí EditForm komponenty, která je svázána s předchozím ExampleModel typem.

Pages/FormExample1.razor:

@page "/form-example-1"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample1> Logger

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

    <InputText id="name" @bind-Value="exampleModel.Name" />

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

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

V předchozí FormExample1 součásti:

• EditFormKomponenta je vykreslena tam, kde <EditForm> se prvek objeví.
• Model se vytvoří v bloku komponenty a je @code uložený v soukromém poli ( exampleModel ). Pole je přiřazeno EditForm.Model atributu ( Model ) <EditForm> prvku.
• InputTextSoučást ( id="name" ) je vstupní komponenta pro úpravy hodnot řetězců. @bind-ValueAtribut direktiva váže exampleModel.Name vlastnost model na InputText Value vlastnost komponenty.
• HandleValidSubmitMetoda je přiřazena k OnValidSubmit . Obslužná rutina je volána, pokud formulář projde ověřením.
• Validátor datových poznámek ( DataAnnotationsValidator součást † ) připojuje podporu ověřování pomocí datových poznámek:
  • Pokud je <input> pole formuláře ponecháno prázdné, když Submit je vybráno tlačítko, zobrazí se chyba v souhrnu ověření ( ValidationSummary součást ‡ ) (" The Name field is required. ") a není HandleValidSubmit volána.
  • Pokud <input> pole formuláře obsahuje více než deset znaků Submit , je-li vybráno tlačítko, zobrazí se v souhrnu ověření (" Name is too long. ") chyba a není HandleValidSubmit volána.
  • Pokud <input> pole formuláře obsahuje platnou hodnotu Submit , je-li vybráno tlačítko, HandleValidSubmit je zavoláno.

†Tato DataAnnotationsValidator součást je uvedena v části součást validátoru . ‡Tato ValidationSummary součást je popsaná v části Souhrn ověření a součásti zprávy pro ověření . Další informace o vazbách vlastností naleznete v tématu BlazorASP.NET Core datová vazba .

Vytvoření vazby formuláře

EditFormVytvoří EditContext na základě přiřazené instance modelu jako kaskádové hodnoty pro jiné součásti ve formuláři. EditContextSleduje metadata procesu úprav, včetně polí, která byla změněna, a aktuálních zpráv ověření. Přiřazování k EditForm.Model EditForm.EditContext datům nebo může vytvořit vázání formuláře na data.

Přiřazení k EditForm.Model :

<EditForm Model="@exampleModel" ...>

@code {
    private ExampleModel exampleModel = new() { ... };
}

Přiřazení k EditForm.EditContext :

<EditForm EditContext="@editContext" ...>

@code {
    private ExampleModel exampleModel = new() { ... };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);
    }
}

Přiřaďte buď EditContext nebo Model k EditForm . Přiřazení obou není podporované a generuje chybu za běhu:

Neošetřená komponenta vykreslování výjimky: EditForm vyžaduje parametr modelu nebo parametr EditContext, ale ne obojí.

Odeslání formuláře popisovače

EditFormPoskytuje následující zpětná volání pro zpracování odesílání formuláře:

• Použijte OnValidSubmit k přiřazení obslužné rutiny události, která se spustí při odeslání formuláře s platnými poli.
• Použijte OnInvalidSubmit k přiřazení obslužné rutiny události, která se spustí, když se odešle formulář s neplatnými poli.
• Použijte OnSubmit k přiřazení obslužné rutiny události pro spuštění bez ohledu na stav ověření pole formuláře. Formulář se ověří voláním EditContext.Validate v metodě obslužné rutiny události. Pokud se Validate vrátí true , je formulář platný.

Předdefinované součásti formuláře

Rozhraní Blazor poskytuje předdefinované součásti formuláře pro příjem a ověření vstupu uživatele. Vstupy jsou ověřovány při jejich změně a při odeslání formuláře. Dostupné vstupní komponenty jsou uvedené v následující tabulce.

Vstupní komponenta	Vykresleno jako…
InputCheckbox	<input type="checkbox">
InputDate<TValue>	<input type="date">
InputFile	<input type="file">
InputNumber<TValue>	<input type="number">
InputRadio<TValue>	<input type="radio">
InputRadioGroup<TValue>	Skupina podřízených InputRadio<TValue>
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Další informace o InputFile komponentě naleznete v tématu ASP.NET Core Blazor nahrávání souborů .

Všechny vstupní komponenty, včetně EditForm , podporují libovolné atributy. Všechny atributy, které se neshodují s parametrem komponenty, jsou přidány do vykresleného prvku HTML.

Vstupní komponenty poskytují výchozí chování při ověřování při změně pole, včetně aktualizace třídy CSS pole tak, aby odrážely stav pole jako platný nebo neplatný. Některé součásti obsahují užitečnou logiku analýzy. Například InputDate<TValue> a InputNumber<TValue> zpracujte neanalyzovatelné hodnoty tak, že zaregistrujete neanalyzovatelné hodnoty jako chyby ověřování. Typy, které mohou přijmout hodnoty null, podporují také hodnotu null cílového pole (například int? pro celé číslo s možnou hodnotou null).

Příklad formuláře

Následující Starship typ, který se používá v několika příkladech tohoto článku, definuje různé sady vlastností s poznámkami k datům:

• Identifier je vyžadován, protože je opatřen poznámkou RequiredAttribute . Identifier vyžaduje hodnotu alespoň jednoho znaku, ale ne více než 16 znaků pomocí StringLengthAttribute .
• Description je volitelná, protože není opatřena poznámkou s RequiredAttribute .
• Classification je povinné.
• MaximumAccommodationVýchozí hodnota vlastnosti je nula, ale vyžaduje hodnotu od 1 do 100 000 na své RangeAttribute .
• IsValidatedDesign vyžaduje, aby vlastnost měla true hodnotu, která odpovídá vybranému stavu, když je vlastnost svázána se zaškrtávacím políčkem v uživatelském rozhraní ( <input type="checkbox"> ).
• ProductionDate je DateTime a povinný.

Starship.cs:

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

Následující formulář akceptuje a ověřuje vstup uživatele pomocí:

• Vlastnosti a ověření definované v předchozím Starship modelu.
• Několik Blazor vestavěných součástí formuláře.

Pages/FormExample2.razor:

@page "/form-example-2"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample2> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

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

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @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>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

EditFormV předchozím příkladu vytvoří na EditContext základě přiřazené Starship instance ( Model="@starship" ) a zpracuje platný formulář. Následující příklad ( FormExample3 komponenta) ukazuje, jak přiřadit EditContext formulář a ověřit při odeslání formuláře.

V následujícím příkladu:

• Používá se zkrácená verze předcházejícího Starfleet Starship Database formuláře ( FormExample2 komponenty), která přijímá pouze hodnotu identifikátoru Starship. Ostatní Starship vlastnosti obdrží platné výchozí hodnoty, když Starship je vytvořena instance typu.
• HandleSubmitMetoda se spustí, když Submit je vybráno tlačítko.
• Formulář se ověří voláním EditContext.Validate HandleSubmit metody.
• Protokolování se spustí v závislosti na výsledku ověřování.

Pages/FormExample3.razor:

@page "/form-example-3"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample3> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(starship);
    }

    private async Task HandleSubmit()
    {
        if (editContext.Validate())
        {
            Logger.LogInformation("HandleSubmit called: Form is valid");

            // Process the valid form
            // await ...
        }
        else
        {
            Logger.LogInformation("HandleSubmit called: Form is INVALID");
        }
    }
}

Možnosti InputSelect vazby na hodnoty objektů jazyka null C#

Informace o tom, jak se zpracovávají prázdné řetězce a hodnoty null v datové vazbě, najdete v tématu BlazorASP.NET Core datová vazba .

Podpora zobrazovaný název

Několik integrovaných komponent podporuje zobrazované názvy pomocí InputBase<TValue>.DisplayName parametru .

Ve formuláři ( součást) části Formulář příkladu není v produkčním datu nové hvězdné lodi Starfleet Starship Database zobrazovaný FormExample2 název:

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" />
</label>

Pokud pole obsahuje neplatné datum, kdy se formulář odeslal, chybová zpráva nezobrazí popisný název. Název pole " " nemá mezeru mezi " " a " " , když se ProductionDate Production zobrazí v Date souhrnu ověření:

Pole ProductionDate musí být datum.

Nastavte vlastnost na popisný název s mezerou mezi slovy " " a DisplayName Production " Date ":

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               DisplayName="Production Date" />
</label>

Souhrn ověření zobrazí popisný název, když je hodnota pole neplatná:

Pole Production Date (Datum výroby) musí být datum.

Podpora šablon chybových zpráv

InputDate<TValue>InputNumber<TValue>a podporují šablony chybových zpráv:

• InputDate<TValue>.ParsingErrorMessage
• InputNumber<TValue>.ParsingErrorMessage

Ve formuláři ( součást) části Formulář příkladu s přiřazeným popisný zobrazovaný název pole vytvoří chybovou zprávu pomocí následující Starfleet Starship Database FormExample2 výchozí šablony chybové Production Date zprávy:

The {0} field must be a date.

Pozice zástupného symbolu je místo, kde se hodnota vlastnosti zobrazí, když se chyba {0} DisplayName zobrazí uživateli.

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               DisplayName="Production Date" />
</label>

Pole Production Date (Datum výroby) musí být datum.

Pokud chcete zadat vlastní ParsingErrorMessage zprávu, přiřaďte vlastní šablonu k :

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               DisplayName="Production Date" 
               ParsingErrorMessage="The {0} field has an incorrect date value." />
</label>

Pole Production Date (Datum výroby) má nesprávnou hodnotu data.

Základní ověřování

V základních scénářích ověřování formulářů může instance používat deklarované instance a k EditForm EditContext ověření polí ValidationMessageStore formuláře. Obslužná OnValidationRequested rutina události provede EditContext vlastní logiku ověřování. Výsledek obslužné rutiny aktualizuje ValidationMessageStore instanci .

Základní ověření formuláře je užitečné v případech, kdy je model formuláře definován v rámci komponenty hostující formulář, a to buď jako členy přímo v komponentě, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se napříč několika komponentami používá nezávislá třída modelu.

V následující komponentě metoda obslužné rutiny vymaže všechny existující ověřovací zprávy voláním FormExample4 HandleValidationRequested před ValidationMessageStore.Clear ověřením formuláře.

Pages/FormExample4.razor:

@page "/form-example-4"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample4> Logger

<h2>Ship Holodecks</h2>

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <label>
        Type 1:
        <InputCheckbox @bind-Value="holodeck.Type1" />
    </label>

    <label>
        Type 2:
        <InputCheckbox @bind-Value="holodeck.Type2" />
    </label>

    <button type="submit">Update</button>

    <ValidationMessage For="() => holodeck.Options" />

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private EditContext editContext;
    private Holodeck holodeck = new();
    private ValidationMessageStore messageStore;

    protected override void OnInitialized()
    {
        editContext = new(holodeck);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new(editContext);
    }

    private void HandleValidationRequested(object sender, 
        ValidationRequestedEventArgs args)
    {
        messageStore.Clear();

        // Custom validation logic
        if (!holodeck.Options)
        {
            messageStore.Add(() => holodeck.Options, "Select at least one.");
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called: Processing the form");

        // Process the form
    }

    public class Holodeck
    {
        public bool Type1 { get; set; }
        public bool Type2 { get; set; }
        public bool Options => Type1 || Type2;
    }

    public void Dispose()
    {
        editContext.OnValidationRequested -= HandleValidationRequested;
    }
}

Komponenta validátoru datových poznámek a vlastní ověření

Komponenta DataAnnotationsValidator připojí ověření datových poznámek ke kaskádové . EditContext Povolení ověřování datových poznámek vyžaduje DataAnnotationsValidator komponentu . Pokud chcete použít jiný systém ověřování než datové poznámky, použijte místo komponenty vlastní DataAnnotationsValidator implementaci. Implementace architektury pro jsou DataAnnotationsValidator k dispozici ke kontrole v referenčním zdroji:

• DataAnnotationsValidator
• AddDataAnnotationsValidation.

Blazor provádí dva typy ověřování:

• Ověření pole se provádí, když uživatel odsune pole. Během ověřování pole DataAnnotationsValidator komponenta přidruží k poli všechny hlášené výsledky ověření.
• Ověření modelu se provede, když uživatel odešle formulář. Během ověřování modelu se komponenta pokusí určit pole na základě názvu DataAnnotationsValidator člena, který výsledek ověření hlásí. Výsledky ověření, které nejsou přidružené k jednotlivým členům, jsou přidruženy k modelu, nikoli k poli.

Komponenty validátoru

Komponenty validátoru podporují ověřování formulářů tím, ValidationMessageStore že spravují pro formulář EditContext .

Rozhraní Blazor poskytuje komponentu DataAnnotationsValidator pro připojení podpory ověřování k formulářům na základě atributů ověřování (datových poznámek). Můžete vytvořit vlastní komponenty validátoru pro zpracování ověřovacích zpráv pro různé formuláře na stejné stránce nebo ve stejném formuláři v různých krocích zpracování formulářů (například ověření na straně klienta následované ověřením na straně serveru). Příklad komponenty validátoru zobrazený v této části se používá CustomValidation v následujících částech tohoto článku:

• Ověření obchodní logiky pomocí komponenty validátoru
• Ověření serveru pomocí komponenty validátoru

Vytvořte komponentu validátoru z ComponentBase :

• Formulář je EditContext kaskádový parametr komponenty.
• Při inicializaci komponenty validátoru se vytvoří nový, aby se zachoval ValidationMessageStore aktuální seznam chyb formuláře.
• Úložiště zpráv přijímá chyby, když vývojářský kód v komponentě formuláře volá DisplayErrors metodu . Chyby se předá DisplayErrors metodě v Dictionary<string, List<string>> . Ve slovníku je klíč název pole formuláře, které obsahuje jednu nebo více chyb. Hodnota je seznam chyb.
• Zprávy se vyčistí, když dojde k nějaké z následujících událostí:
  • Při vyvolané události EditContext se OnValidationRequested požaduje ověření. Všechny chyby jsou vymazány.
  • Pole se změní ve formuláři při OnFieldChanged vyvolané události. Vymazat se budou jenom chyby pro pole.
  • Metodu ClearErrors volá vývojářský kód. Všechny chyby jsou vymazány.

CustomValidation.cs (Pokud se používá v testovací aplikaci, změňte obor názvů tak, aby odpovídal BlazorSample oboru názvů aplikace):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorSample
{
    public class CustomValidation : ComponentBase
    {
        private ValidationMessageStore messageStore;
    
        [CascadingParameter]
        private EditContext CurrentEditContext { get; set; }
    
        protected override void OnInitialized()
        {
            if (CurrentEditContext == null)
            {
                throw new InvalidOperationException(
                    $"{nameof(CustomValidation)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(CustomValidation)} " +
                    $"inside an {nameof(EditForm)}.");
            }
    
            messageStore = new(CurrentEditContext);
    
            CurrentEditContext.OnValidationRequested += (s, e) => 
                messageStore.Clear();
            CurrentEditContext.OnFieldChanged += (s, e) => 
                messageStore.Clear(e.FieldIdentifier);
        }
    
        public void DisplayErrors(Dictionary<string, List<string>> errors)
        {
            foreach (var err in errors)
            {
                messageStore.Add(CurrentEditContext.Field(err.Key), err.Value);
            }
    
            CurrentEditContext.NotifyValidationStateChanged();
        }
    
        public void ClearErrors()
        {
            messageStore.Clear();
            CurrentEditContext.NotifyValidationStateChanged();
        }
    }
}

Ověření obchodní logiky pomocí komponenty validátoru

Pro obecné ověřování obchodní logiky použijte komponentu validátoru, která přijímá chyby formuláře ve slovníku.

Základní ověření je užitečné v případech, kdy je model formuláře definován v rámci komponenty, která je hostitelem formuláře, buď jako členy přímo v komponentě, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se napříč několika komponentami používá nezávislá třída modelu.

V následujícím příkladu:

• Používá se zkrácená verze formuláře ( součást) z části Formulář příkladu, která přijímá pouze klasifikaci a popis Starfleet Starship Database FormExample2 hvězdičky. Ověření poznámek k datům se nespouštělo při odeslání formuláře, protože komponenta není součástí DataAnnotationsValidator formuláře.
• Používá CustomValidation se komponenta z části Součásti validátoru tohoto článku.
• Ověření vyžaduje hodnotu popisu expedice ( ), pokud uživatel vybere klasifikaci lodí Description Defense ( Classification ).

Když se v komponentě nastaví ověřovací zprávy, přičtou se do validátoru a zobrazí se v ValidationMessageStore EditForm souhrnu ověření.

Pages/FormExample5.razor:

@page "/form-example-5"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample5> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Primary Classification:
            <InputSelect @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>
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        customValidation.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (starship.Classification == "Defense" &&
                string.IsNullOrEmpty(starship.Description))
        {
            errors.Add(nameof(starship.Description),
                new() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("HandleValidSubmit called: Processing the form");

            // Process the valid form
        }
    }
}

Ověření serveru pomocí komponenty validátoru

Kromě ověřování na straně klienta se podporuje ověřování serveru:

• Zpracování ověřování na straně klienta ve formuláři s DataAnnotationsValidator komponentou.
• Když formulář projde ověřením na straně klienta ( je volána), odešle do OnValidSubmit EditContext.Model rozhraní API back-endového serveru pro zpracování formulářů.
• Ověření modelu zpracování na serveru.
• Serverové rozhraní API zahrnuje ověření integrovaných datových poznámek architektury i vlastní logiku ověřování dodanou vývojářem. Pokud ověření projde na serveru, zpracujte formulář a odešlete zpět stavový kód úspěchu ( 200 - OK ). Pokud se ověření nezdaří, vrátí se stavový kód selhání ( ) a 400 - Bad Request chyby ověření pole.
• Buď zakažte formulář při úspěchu, nebo zobrazte chyby.

Základní ověření je užitečné v případech, kdy je model formuláře definován v rámci komponenty, která je hostitelem formuláře, buď jako členy přímo v komponentě, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se napříč několika komponentami používá nezávislá třída modelu.

Následující příklad je založen na:

• Hostované Blazor WebAssembly řešení vytvořené ze Blazor WebAssembly šablony projektu. Přístup je podporován pro všechna zabezpečená hostovaná Blazor řešení, která jsou popsána v dokumentaci k hostovanému Blazor WebAssembly zabezpečení.
• StarshipModel ( Starship.cs ) z oddílu příklad formuláře .
• CustomValidationKomponenta zobrazená v části komponenty validátoru .

Vložte Starship model ( Starship.cs ) do Shared projektu řešení tak, aby aplikace klienta i serveru mohly model používat. Přidejte nebo aktualizujte obor názvů tak, aby odpovídal oboru názvů sdílené aplikace (například namespace BlazorSample.Shared ). Vzhledem k tomu, že model vyžaduje datové poznámky, přidejte odkaz na balíček pro System.ComponentModel.Annotations do Shared souboru projektu projektu:

<ItemGroup>
  <PackageReference Include="System.ComponentModel.Annotations" Version="{VERSION}" />
</ItemGroup>

chcete-li určit nejnovější verzi balíčku zástupného textu, který není ve verzi preview {VERSION} , podívejte se na historii verzí balíčku na adrese NuGet System.ComponentModel.Annotations . org pro.

V Server projektu přidejte kontroler pro zpracování žádostí o ověření Starship a vrácení neúspěšných ověřovacích zpráv. Aktualizujte obory názvů v posledním using příkazu pro Shared projekt a namespace pro třídu Controller. Kromě ověření poznámek k datům (na straně klienta a na straně serveru) ověří kontroler, že je zadána hodnota pro popis lodi ( Description ), pokud uživatel vybere Defense klasifikaci expedice ( Classification ).

Ověřování pro Defense klasifikaci lodí probíhá pouze na straně serveru v řadiči, protože nadcházející formulář při odeslání formuláře na server neprovede stejné ověření na straně klienta. Ověřování na straně serveru bez ověřování na straně klienta je běžné v aplikacích, které vyžadují ověření soukromé obchodní logiky vstupu uživatele na serveru. Například soukromé informace z dat uložených pro uživatele mohou být vyžadovány k ověření vstupu uživatele. Soukromá data zjevně nelze odeslat klientovi pro ověřování na straně klienta.

Controllers/StarshipValidation.cs:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class StarshipValidationController : ControllerBase
    {
        private readonly ILogger<StarshipValidationController> logger;

        public StarshipValidationController(
            ILogger<StarshipValidationController> logger)
        {
            this.logger = logger;
        }

        static readonly string[] scopeRequiredByApi = new[] { "API.Access" };

        [HttpPost]
        public async Task<IActionResult> Post(Starship starship)
        {
            HttpContext.VerifyUserHasAnyAcceptedScope(scopeRequiredByApi);

            try
            {
                if (starship.Classification == "Defense" && 
                    string.IsNullOrEmpty(starship.Description))
                {
                    ModelState.AddModelError(nameof(starship.Description),
                        "For a 'Defense' ship " +
                        "classification, 'Description' is required.");
                }
                else
                {
                    logger.LogInformation("Processing the form asynchronously");

                    // Process the valid form
                    // async ...

                    return Ok(ModelState);
                }
            }
            catch (Exception ex)
            {
                logger.LogError("Validation Error: {Message}", ex.Message);
            }

            return BadRequest(ModelState);
        }
    }
}

Pokud používáte předchozí kontroler v hostované Blazor WebAssembly aplikaci, aktualizujte obor názvů ( BlazorSample.Server.Controllers ) tak, aby odpovídal oboru názvů řadičů aplikace.

Pokud dojde k chybě ověřování vazby modelu na serveru, ApiController ApiControllerAttribute vrátí () obvykle výchozí chybnou odpověď na požadavek s hodnotou ValidationProblemDetails . Odpověď obsahuje více dat než pouze chyby ověřování, jak je znázorněno v následujícím příkladu, pokud Starfleet Starship Database nejsou odeslána všechna pole formuláře a formulář se nezdařil. ověření:

{
  "title": "One or more validation errors occurred.",
  "status": 400,
  "errors": {
    "Identifier": ["The Identifier field is required."],
    "Classification": ["The Classification field is required."],
    "IsValidatedDesign": ["This form disallows unapproved ships."],
    "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
  }
}

Pokud rozhraní API serveru vrátí předchozí výchozí odpověď JSON, je možné, že klient analyzuje odpověď v kódu pro vývojáře, aby získal podřízené položky errors uzlu pro zpracování chyb ověřování formulářů. Pro analýzu souboru není vhodné psát kód pro vývojáře. Ruční analýza JSON vyžaduje, aby při volání vygenerovala Dictionary<string, List<string>> chyby ReadFromJsonAsync . V ideálním případě by mělo serverové rozhraní API vracet pouze chyby ověřování:

{
  "Identifier": ["The Identifier field is required."],
  "Classification": ["The Classification field is required."],
  "IsValidatedDesign": ["This form disallows unapproved ships."],
  "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
}

Chcete-li změnit odpověď rozhraní API serveru tak, aby vracela pouze chyby ověřování, změňte delegáta, který je vyvolán na akcích, které jsou v aplikaci opatřeny poznámkami ApiControllerAttribute Startup.ConfigureServices . Pro koncový bod rozhraní API ( /StarshipValidation ), vraťte a BadRequestObjectResult s ModelStateDictionary . Pro jakékoli jiné koncové body rozhraní API zachovejte výchozí chování vrácením výsledku objektu s novým ValidationProblemDetails .

Přidejte Microsoft.AspNetCore.Mvc obor názvů do horní části Startup.cs souboru v Server aplikaci:

using Microsoft.AspNetCore.Mvc;

V nástroji Startup.ConfigureServices vyhledejte AddControllersWithViews metodu rozšíření a přidejte následující volání do ConfigureApiBehaviorOptions :

services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Další informace naleznete v tématu Zpracování chyb ve ASP.NET Core rozhraní API.

V Client projektu přidejte CustomValidation komponentu zobrazenou v části komponenty validátoru . Aktualizujte obor názvů tak, aby odpovídal aplikaci (například namespace BlazorSample.Client ).

V Client projektu se Starfleet Starship Database formulář aktualizuje, aby se zobrazily chyby ověření serveru s použitím CustomValidation komponenty. Když rozhraní API serveru vrátí ověřovací zprávy, přidají se do CustomValidation komponenty ValidationMessageStore . Chyby jsou k dispozici ve formuláři EditContext pro zobrazení v souhrnu ověření formuláře.

V následující FormExample6 součásti aktualizujte obor názvů Shared projektu ( @using BlazorSample.Shared ) na obor názvů sdíleného projektu. Všimněte si, že formulář vyžaduje autorizaci, takže musí být uživatel přihlášený do aplikace, aby mohl přejít do formuláře.

Pages/FormExample6.razor:

@page "/form-example-6"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<FormExample6> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" disabled="@disabled" />
        </label>
    </p>

    <button type="submit" disabled="@disabled">Submit</button>

    <p style="@messageStyles">
        @message
    </p>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private bool disabled;
    private string message;
    private string messageStyles = "visibility:hidden";
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private async Task HandleValidSubmit(EditContext editContext)
    {
        customValidation.ClearErrors();

        try
        {
            var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

InputText na základě události Input

Pomocí InputText komponenty můžete vytvořit vlastní komponentu, která input místo události používá událost change . inputPro každou klávesovou zkratku použijte ověřování pole triggery událostí.

Následující příklad používá ExampleModel třídu.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Následující CustomInputText Komponenta dědí InputText komponentu rozhraní a nastaví vazbu události na oninput událost.

Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       @bind="CurrentValueAsString" 
       @bind:event="oninput" />

CustomInputTextKomponentu lze použít kdekoli InputText . FormExample7Sdílená komponenta používá následující součást CustomInputText .

Pages/FormExample7.razor:

@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger

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

    <CustomInputText @bind-Value="exampleModel.Name" />

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

<p>
    CurrentValue: @exampleModel.Name
</p>

@code {
    private ExampleModel exampleModel = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Přepínače

Příklad v této části vychází z formuláře v Starfleet Starship Database části příklad formuláře tohoto článku.

Do aplikace přidejte následující enum typy . Vytvořte nový soubor, který chcete uložit, nebo ho přidejte do Starship.cs souboru.

public class ComponentEnums
{
    public enum Manufacturer { SpaceX, NASA, ULA, VirginGalactic, Unknown }
    public enum Color { ImperialRed, SpacecruiserGreen, StarshipBlue, VoyagerOrange }
    public enum Engine { Ion, Plasma, Fusion, Warp }
}

Zpřístupněte enums přístup pro:

• Starship model v Starship.cs (například using static ComponentEnums; Pokud enums je třída pojmenována ComponentEnums ).
• Starfleet Starship Database Form (například, @using static ComponentEnums Pokud se třída výčtů nazývá ComponentEnums ).

Pomocí InputRadio<TValue> komponent s InputRadioGroup<TValue> komponentou vytvořte skupinu přepínačů. V následujícím příkladu jsou přidány vlastnosti do Starship modelu popsaného v části vzorový formulář :

[Required]
[Range(typeof(Manufacturer), nameof(Manufacturer.SpaceX), 
    nameof(Manufacturer.VirginGalactic), ErrorMessage = "Pick a manufacturer.")]
public Manufacturer Manufacturer { get; set; } = Manufacturer.Unknown;

[Required, EnumDataType(typeof(Color))]
public Color? Color { get; set; } = null;

[Required, EnumDataType(typeof(Engine))]
public Engine? Engine { get; set; } = null;

Aktualizujte Starfleet Starship Database formulář ( FormExample2 součást) z oddílu příklad formuláře . Přidejte součásti, které chcete vytvořit:

• Skupina přepínacích tlačítek pro výrobce lodi.
• Vnořená skupina přepínacích tlačítek pro modul a barvu dodávání.

<p>
    <InputRadioGroup @bind-Value="starship.Manufacturer">
        Manufacturer:
        <br>
        @foreach (var manufacturer in (Manufacturer[])Enum
            .GetValues(typeof(Manufacturer)))
        {
            <InputRadio Value="manufacturer" />
            <text>&nbsp;</text>@manufacturer<br>
        }
    </InputRadioGroup>
</p>
<p>
    Select one engine and one color. Recommendations are paired but any 
    combination of engine and color is allowed:<br>
    <InputRadioGroup Name="engine" @bind-Value="starship.Engine">
        <InputRadioGroup Name="color" @bind-Value="starship.Color">
            <InputRadio Name="engine" Value="Engine.Ion" />
            Engine: Ion<br>
            <InputRadio Name="color" Value="Color.ImperialRed" />
            Color: Imperial Red<br><br>
            <InputRadio Name="engine" Value="Engine.Plasma" />
            Engine: Plasma<br>
            <InputRadio Name="color" Value="Color.SpacecruiserGreen" />
            Color: Spacecruiser Green<br><br>
            <InputRadio Name="engine" Value="Engine.Fusion" />
            Engine: Fusion<br>
            <InputRadio Name="color" Value="Color.StarshipBlue" />
            Color: Starship Blue<br><br>
            <InputRadio Name="engine" Value="Engine.Warp" />
            Engine: Warp<br>
            <InputRadio Name="color" Value="Color.VoyagerOrange" />
            Color: Voyager Orange
        </InputRadioGroup>
    </InputRadioGroup>
</p>

Komponenty zprávy pro Shrnutí a ověření

ValidationSummaryKomponenta shrnuje všechny zprávy o ověřování, které se podobají pomocníka značek pro Shrnutí ověření:

<ValidationSummary />

Zprávy ověřování výstupu pro konkrétní model s Model parametrem:

<ValidationSummary Model="@starship" />

ValidationMessage<TValue>Komponenta zobrazí ověřovací zprávy pro konkrétní pole, které se podobá pomocníka značek ověřovací zprávy. Zadejte pole pro ověření s For atributem a výrazem lambda pojmenování vlastnosti modelu:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

ValidationMessage<TValue>Komponenty a ValidationSummary podporují libovolné atributy. Všechny atributy, které se neshodují s parametrem komponenty, jsou přidány do generovaného <div> <ul> prvku nebo.

Řízení stylu ověřovacích zpráv v šabloně stylů aplikace ( wwwroot/css/app.css nebo wwwroot/css/site.css ). Výchozí validation-message třída nastaví barvu textu pro zprávy ověření na červenou:

.validation-message {
    color: red;
}

Vlastní ověřovací atributy

Chcete-li zajistit, aby byl výsledek ověření správně přidružen k poli při použití vlastního ověřovacího atributu, předejte kontext ověření MemberName při vytváření ValidationResult .

CustomValidator.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

Vlastní ověřování atributů třídy CSS

Vlastní ověřování atributů třídy CSS je užitečné při integraci s rozhraními CSS, jako je například bootstrap.

Následující příklad používá ExampleModel třídu.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Chcete-li určit vlastní ověřování atributů třídy CSS, začněte poskytováním stylů CSS pro vlastní ověřování. V následujícím příkladu validField jsou zadány platné () a neplatné invalidField styly ().

wwwroot/css/app.css ( Blazor WebAssembly ) nebo wwwroot/css/site.css (Blazor Server):

.validField {
    border-color: lawngreen;
}

.invalidField {
    background-color: tomato;
}

Vytvořte třídu odvozenou z FieldCssClassProvider těchto kontrol pro zprávy ověřování polí a použijte odpovídající platný nebo neplatný styl.

CustomFieldClassProvider.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, 
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        return isValid ? "validField" : "invalidField";
    }
}

Nastavte CustomFieldClassProvider třídu jako poskytovatele třídy CSS pole v EditContext instanci formuláře s SetFieldCssClassProvider .

Pages/FormExample8.razor:

@page "/form-example-8"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample8> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="exampleModel.Name" />

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

@code {
    private ExampleModel exampleModel = new();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(exampleModel);
        editContext.SetFieldCssClassProvider(new CustomFieldClassProvider());
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Předchozí příklad zkontroluje platnost všech polí formuláře a použije pro každé pole styl. Pokud má formulář použít pouze vlastní styly pro podmnožinu polí, nastavte CustomFieldClassProvider podmíněné styly. Následující CustomFieldClassProvider2 příklad aplikuje na pole pouze styl Name . Pro všechna pole s názvy, které se neshodují, Name string.Empty se vrátí a není použit žádný styl.

CustomFieldClassProvider2.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider2 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        if (fieldIdentifier.FieldName == "Name")
        {
            var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

            return isValid ? "validField" : "invalidField";
        }

        return string.Empty;
    }
}

Přidejte další vlastnost do ExampleModel , například:

[StringLength(10, ErrorMessage = "Description is too long.")]
public string Description { get; set; } 

Přidejte Description do ExampleForm7 formuláře komponenty:

<InputText id="description" @bind-Value="exampleModel.Description" />

Aktualizujte EditContext instanci v OnInitialized metodě komponenty na použití nového pole poskytovatel třídy CSS:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider2());

Vzhledem k tomu, že třída ověřování CSS není aplikována na Description pole ( id="description" ), není ve stylu. Ověřování polí se však spouští normálně. Pokud je k dispozici více než 10 znaků, bude souhrn ověření označovat chybu:

Popis je příliš dlouhý.

V následujícím příkladu:

• Vlastní styl CSS se aplikuje na Name pole.

• Všechna ostatní pole používají logiku podobnou Blazor výchozí logice a používají Blazor výchozí pole stylů CSS pro ověřování pomocí modified valid nebo invalid . Všimněte si, že pro výchozí styly není nutné je přidávat do šablony stylů aplikace, pokud je aplikace založena na Blazor šabloně projektu. Pro aplikace, které nejsou založené na Blazor šabloně projektu, můžete do šablony stylů aplikace přidat výchozí styly:

  .valid.modified:not([type=checkbox]) {
      outline: 1px solid #26b050;
  }
  
  .invalid {
      outline: 1px solid red;
  }
  

CustomFieldClassProvider3.cs:

using System.Linq;
using Microsoft.AspNetCore.Components.Forms;

public class CustomFieldClassProvider3 : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext,
        in FieldIdentifier fieldIdentifier)
    {
        var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

        if (fieldIdentifier.FieldName == "Name")
        {
            return isValid ? "validField" : "invalidField";
        }
        else
        {
            if (editContext.IsModified(fieldIdentifier))
            {
                return isValid ? "modified valid" : "modified invalid";
            }
            else
            {
                return isValid ? "valid" : "invalid";
            }
        }
    }
}

Aktualizujte EditContext instanci v OnInitialized metodě komponenty tak, aby používala předchozí pole poskytovatel tříd CSS:

editContext.SetFieldCssClassProvider(new CustomFieldClassProvider3());

Používá se CustomFieldClassProvider3 :

• Toto Name pole používá styly CSS pro vlastní ověření aplikace.
• DescriptionPole používá logiku podobnou Blazor logice a Blazor výchozí styly pro ověřování CSS.

Blazor balíček pro ověření datových poznámek

Microsoft.AspNetCore.Components.DataAnnotations.ValidationJe balíček, který vyplní prodlevy při ověřování pomocí DataAnnotationsValidator komponenty. Balíček je momentálně experimentální.

Vnořené modely, typy kolekcí a komplexní typy

Blazor poskytuje podporu pro ověřování vstupu formuláře pomocí datových poznámek s integrovaným DataAnnotationsValidator . DataAnnotationsValidatorPouze ověří vlastnosti nejvyšší úrovně modelu svázaného s formulářem, který není vlastností kolekce nebo komplexního typu.

Chcete-li ověřit celý graf objektu vázaného modelu, včetně vlastností kolekce a komplexního typu, použijte příkaz ObjectGraphDataAnnotationsValidator poskytnutý experimentálním Microsoft.AspNetCore.Components.DataAnnotations.Validation balíčkem:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

Přidávejte do vlastností modelu poznámky [ValidateComplexType] . V následujících třídách modelu ShipDescription obsahuje Třída další datové poznámky pro ověření, když je model svázán s formulářem:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = new();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}

Povolit tlačítko Odeslat na základě ověření formuláře

Chcete-li povolit a zakázat tlačítko Odeslat na základě ověření formuláře, následující příklad:

• Používá zkrácenou verzi předchozího Starfleet Starship Database formuláře ( FormExample2 komponenty), který přijímá pouze hodnotu identifikátoru lodě. Ostatní Starship vlastnosti obdrží platné výchozí hodnoty, když Starship je vytvořena instance typu.
• Pomocí formuláře EditContext přiřadí model při inicializaci komponenty.
• Ověří formulář v OnFieldChanged zpětném volání kontextu a povolí a zakáže tlačítko Odeslat.
• Implementuje IDisposable a zruší odběr obslužné rutiny události v Dispose metodě. Další informace naleznete v tématu RazorASP.NET Core životní cyklus komponenty.

Pages/FormExample9.razor:

@page "/form-example-9"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample9> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private Starship starship = 
        new()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private bool formInvalid = false;
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new(starship);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        formInvalid = !editContext.Validate();
        StateHasChanged();
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public void Dispose()
    {
        editContext.OnFieldChanged -= HandleFieldChanged;
    }
}

Pokud formulář není předem načten s platnými hodnotami a chcete zakázat Submit tlačítko při načtení formuláře, nastavte formInvalid na true .

Vedlejším účinkem předchozího přístupu je, že souhrn ověření ( ValidationSummary součást) se naplní neplatnými poli poté, co uživatel pracuje s libovolným polem. Vyřešte tento scénář jedním z následujících způsobů:

• Nepoužívejte ValidationSummary komponentu na formuláři.
• Zpřístupní ValidationSummary komponentu, když je vybráno tlačítko Odeslat (například v HandleValidSubmit metodě).

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary style="@displaySummary" />

    ...

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private string displaySummary = "display:none";

    ...

    private void HandleValidSubmit()
    {
        displaySummary = "display:block";
    }
}

Řešení potíží

InvalidOperationException: EditForm vyžaduje parametr modelu nebo parametr EditContext, ale ne obojí.

Potvrďte, že EditForm přiřadí a Model EditContext . U stejného formuláře nepoužívejte obojí.

Při přiřazování k Model Ověřte, zda je vytvořen typ modelu, jak ukazuje následující příklad:

private ExampleModel exampleModel = new();

Další zdroje informací

• ASP.NET Core Blazor nahrávání souborů
• Zabezpečení ASP.NET Core aplikace Blazor WebAssembly pomocí Azure Active Directory
• zabezpečení Blazor WebAssembly hostované aplikace v ASP.NET Core s využitím Azure Active Directory B2C
• Zabezpečení hostované ASP.NET Core Blazor WebAssembly aplikací pomocí Identity Serveru

BlazorRozhraní podporuje WebForms s ověřováním pomocí EditForm komponenty vázané na model, který používá datové poznámky.

Chcete-li předvést EditForm , jak Komponenta funguje s ověřováním datových poznámek , vezměte v úvahu následující ExampleModel typ. NameVlastnost je označena jako povinná RequiredAttribute a určuje StringLengthAttribute maximální limit délky řetězce a chybovou zprávu.

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Formulář je definován pomocí Blazor EditForm komponenty rozhraní. Následující Razor Komponenta ukazuje typické prvky, komponenty a Razor kód pro vykreslení WebForm pomocí EditForm komponenty, která je svázána s předchozím ExampleModel typem.

Pages/FormExample1.razor:

@page "/form-example-1"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample1> Logger

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

    <InputText id="name" @bind-Value="exampleModel.Name" />

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

@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

V předchozí FormExample1 součásti:

• EditFormKomponenta je vykreslena tam, kde <EditForm> se prvek objeví.
• Model se vytvoří v bloku komponenty a je @code uložený v soukromém poli ( exampleModel ). Pole je přiřazeno EditForm.Model atributu ( Model ) <EditForm> prvku.
• InputTextSoučást ( id="name" ) je vstupní komponenta pro úpravy hodnot řetězců. @bind-ValueAtribut direktiva váže exampleModel.Name vlastnost model na InputText Value vlastnost komponenty.
• HandleValidSubmitMetoda je přiřazena k OnValidSubmit . Obslužná rutina je volána, pokud formulář projde ověřením.
• Validátor datových poznámek ( DataAnnotationsValidator součást † ) připojuje podporu ověřování pomocí datových poznámek:
  • Pokud je <input> pole formuláře ponecháno prázdné, když Submit je vybráno tlačítko, zobrazí se chyba v souhrnu ověření ( ValidationSummary součást ‡ ) (" The Name field is required. ") a není HandleValidSubmit volána.
  • Pokud <input> pole formuláře obsahuje více než deset znaků Submit , je-li vybráno tlačítko, zobrazí se v souhrnu ověření (" Name is too long. ") chyba a není HandleValidSubmit volána.
  • Pokud <input> pole formuláře obsahuje platnou hodnotu Submit , je-li vybráno tlačítko, HandleValidSubmit je zavoláno.

†Tato DataAnnotationsValidator součást je uvedena v části součást validátoru . ‡Tato ValidationSummary součást je popsaná v části Souhrn ověření a součásti zprávy pro ověření . Další informace o vazbách vlastností naleznete v tématu BlazorASP.NET Core datová vazba .

Vytvoření vazby formuláře

EditFormVytvoří EditContext na základě přiřazené instance modelu jako kaskádové hodnoty pro jiné součásti ve formuláři. EditContextSleduje metadata procesu úprav, včetně polí, která byla změněna, a aktuálních zpráv ověření. Přiřazování k EditForm.Model EditForm.EditContext datům nebo může vytvořit vázání formuláře na data.

Přiřazení k EditForm.Model :

<EditForm Model="@exampleModel" ...>

@code {
    private ExampleModel exampleModel = new ExampleModel() { ... };
}

Přiřazení k EditForm.EditContext :

<EditForm EditContext="@editContext" ...>

@code {
    private ExampleModel exampleModel = new ExampleModel() { ... };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(exampleModel);
    }
}

Přiřaďte buď EditContext nebo Model k EditForm . Přiřazení obou není podporované a generuje chybu za běhu:

Neošetřená komponenta vykreslování výjimky: EditForm vyžaduje parametr modelu nebo parametr EditContext, ale ne obojí.

Odeslání formuláře popisovače

EditFormPoskytuje následující zpětná volání pro zpracování odesílání formuláře:

• Použijte OnValidSubmit k přiřazení obslužné rutiny události, která se spustí při odeslání formuláře s platnými poli.
• Použijte OnInvalidSubmit k přiřazení obslužné rutiny události, která se spustí, když se odešle formulář s neplatnými poli.
• Použijte OnSubmit k přiřazení obslužné rutiny události pro spuštění bez ohledu na stav ověření pole formuláře. Formulář se ověří voláním EditContext.Validate v metodě obslužné rutiny události. Pokud se Validate vrátí true , je formulář platný.

Předdefinované součásti formuláře

Rozhraní Blazor poskytuje předdefinované součásti formuláře pro příjem a ověření vstupu uživatele. Vstupy jsou ověřovány při jejich změně a při odeslání formuláře. Dostupné vstupní komponenty jsou uvedené v následující tabulce.

Vstupní komponenta	Vykresleno jako…
InputCheckbox	<input type="checkbox">
InputDate<TValue>	<input type="date">
InputNumber<TValue>	<input type="number">
InputSelect<TValue>	<select>
InputText	<input>
InputTextArea	<textarea>

Všechny vstupní komponenty, včetně EditForm , podporují libovolné atributy. Všechny atributy, které se neshodují s parametrem komponenty, jsou přidány do vykresleného prvku HTML.

Vstupní komponenty poskytují výchozí chování při ověřování při změně pole, včetně aktualizace třídy CSS pole tak, aby odrážely stav pole jako platný nebo neplatný. Některé součásti obsahují užitečnou logiku analýzy. Například InputDate<TValue> a InputNumber<TValue> zpracujte neanalyzovatelné hodnoty tak, že zaregistrujete neanalyzovatelné hodnoty jako chyby ověřování. Typy, které mohou přijímat hodnoty null, podporují také možnost null cílového pole (například pro celé číslo int? s možnou hodnotou null).

Příklad formuláře

Následující typ, který se používá v několika příkladech tohoto článku, definuje rozmanitou sadu vlastností s datovými Starship poznámkami:

• Identifier je povinný, protože je anotován objektem RequiredAttribute . Identifier vyžaduje hodnotu alespoň jednoho znaku, ale ne více než 16 znaků pomocí StringLengthAttribute .
• Description je nepovinný, protože není anotován objektem RequiredAttribute .
• Classification je povinné.
• Výchozí hodnota vlastnosti je nula, ale vyžaduje hodnotu od 1 do MaximumAccommodation 100 000 na hodnotu RangeAttribute .
• IsValidatedDesign vyžaduje, aby vlastnost byla nastavená na hodnotu, která odpovídá vybranému stavu, když je vlastnost svázaná se zaškrtávacím políčkem true v uživatelském rozhraní ( <input type="checkbox"> ).
• ProductionDate je a DateTime povinné.

Starship.cs:

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

Následující formulář přijímá a ověřuje vstup uživatele pomocí:

• Vlastnosti a ověření definované v předchozím Starship modelu.
• Několik Blazor předdefinových součástí formuláře.

Pages/FormExample2.razor:

@page "/form-example-2"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample2> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

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

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @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>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = new Starship() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

v EditForm předchozím příkladu vytvoří na EditContext základě přiřazené instance ( ) a Starship Model="@starship" zpracuje platný formulář. Další příklad ( součást) ukazuje, jak přiřadit k formuláři FormExample3 EditContext a ověřit, kdy je formulář odeslán.

V následujícím příkladu:

• Používá se zkrácená verze předchozího formuláře ( součást), která přijímá pouze hodnotu identifikátoru Starfleet Starship Database FormExample2 hvězdcové lodi. Ostatní vlastnosti Starship obdrží platné výchozí hodnoty při vytvoření instance Starship typu.
• Metoda HandleSubmit se spustí, když Submit je tlačítko vybrané.
• Formulář je ověřen voláním EditContext.Validate v HandleSubmit metodě .
• Protokolování se spustí v závislosti na výsledku ověření.

Pages/FormExample3.razor:

@page "/form-example-3"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample3> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private Starship starship = 
        new Starship()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(starship);
    }

    private async Task HandleSubmit()
    {
        if (editContext.Validate())
        {
            Logger.LogInformation("HandleSubmit called: Form is valid");

            // Process the valid form
            // await ...
        }
        else
        {
            Logger.LogInformation("HandleSubmit called: Form is INVALID");
        }
    }
}

Možnosti InputSelect vazby na hodnoty objektů jazyka null C#

Informace o tom, jak se zpracovávají prázdné řetězce a hodnoty null v datové vazbě, najdete v tématu BlazorASP.NET Core datová vazba .

Podpora šablon chybových zpráv

InputDate<TValue>InputNumber<TValue>a podporují šablony chybových zpráv:

• InputDate<TValue>.ParsingErrorMessage
• InputNumber<TValue>.ParsingErrorMessage

Ve formuláři Starfleet Starship Database ( FormExample2 součást) části Formulář příkladu se používá výchozí šablona chybové zprávy:

The {0} field must be a date.

Pozice zástupného symbolu je místo, kde se hodnota vlastnosti zobrazí, když se chyba {0} DisplayName zobrazí uživateli.

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" />
</label>

Pole ProductionDate musí být datum.

Pokud chcete zadat vlastní ParsingErrorMessage zprávu, přiřaďte vlastní šablonu k :

<label>
    Production Date:
    <InputDate @bind-Value="starship.ProductionDate" 
               ParsingErrorMessage="The {0} field has an incorrect date value." />
</label>

Pole ProductionDate má nesprávnou hodnotu data.

Základní ověřování

V základních scénářích ověřování formulářů může instance používat deklarované instance a k EditForm EditContext ověření polí ValidationMessageStore formuláře. Obslužná OnValidationRequested rutina události provede EditContext vlastní logiku ověřování. Výsledek obslužné rutiny aktualizuje ValidationMessageStore instanci .

Základní ověření formuláře je užitečné v případech, kdy je model formuláře definován v rámci komponenty, která je hostitelem formuláře, buď jako členy přímo v komponentě, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se napříč několika komponentami používá nezávislá třída modelu.

V následující komponentě metoda obslužné rutiny vymaže všechny existující ověřovací zprávy voláním FormExample4 HandleValidationRequested před ValidationMessageStore.Clear ověřením formuláře.

Pages/FormExample4.razor:

@page "/form-example-4"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample4> Logger

<h2>Ship Holodecks</h2>

<EditForm EditContext="editContext" OnValidSubmit="@HandleValidSubmit">
    <label>
        Type 1:
        <InputCheckbox @bind-Value="holodeck.Type1" />
    </label>

    <label>
        Type 2:
        <InputCheckbox @bind-Value="holodeck.Type2" />
    </label>

    <button type="submit">Update</button>

    <ValidationMessage For="() => holodeck.Options" />

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private EditContext editContext;
    private Holodeck holodeck = new Holodeck();
    private ValidationMessageStore messageStore;

    protected override void OnInitialized()
    {
        editContext = new EditContext(holodeck);
        editContext.OnValidationRequested += HandleValidationRequested;
        messageStore = new ValidationMessageStore(editContext);
    }

    private void HandleValidationRequested(object sender, 
        ValidationRequestedEventArgs args)
    {
        messageStore.Clear();

        // Custom validation logic
        if (!holodeck.Options)
        {
            messageStore.Add(() => holodeck.Options, "Select at least one.");
        }
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called: Processing the form");

        // Process the form
    }

    public class Holodeck
    {
        public bool Type1 { get; set; }
        public bool Type2 { get; set; }
        public bool Options => Type1 || Type2;
    }

    public void Dispose()
    {
        editContext.OnValidationRequested -= HandleValidationRequested;
    }
}

Komponenta validátoru datových poznámek a vlastní ověření

Komponenta DataAnnotationsValidator připojí ověření datových poznámek ke kaskádové . EditContext Povolení ověřování datových poznámek vyžaduje DataAnnotationsValidator komponentu . Pokud chcete použít jiný systém ověřování než datové poznámky, použijte místo komponenty vlastní DataAnnotationsValidator implementaci. Implementace architektury pro jsou DataAnnotationsValidator k dispozici ke kontrole v referenčním zdroji:

• DataAnnotationsValidator
• AddDataAnnotationsValidation.

Blazor provádí dva typy ověřování:

• Ověření pole se provádí, když uživatel odsune pole. Během ověřování pole DataAnnotationsValidator komponenta přidruží k poli všechny hlášené výsledky ověření.
• Ověření modelu se provede, když uživatel odešle formulář. Během ověřování modelu se komponenta pokusí určit pole na základě názvu DataAnnotationsValidator člena, který výsledek ověření hlásí. Výsledky ověření, které nejsou přidružené k jednotlivým členům, jsou přidruženy k modelu, nikoli k poli.

Komponenty validátoru

Komponenty validátoru podporují ověřování formulářů tím, ValidationMessageStore že spravují pro formulář EditContext .

Rozhraní Blazor poskytuje DataAnnotationsValidator komponentu pro připojení podpory ověřování k formulářům na základě atributů ověřování (datových poznámek). Můžete vytvořit vlastní komponenty validátoru pro zpracování ověřovacích zpráv pro různé formuláře na stejné stránce nebo ve stejném formuláři v různých krocích zpracování formulářů (například ověření na straně klienta následované ověřením na straně serveru). Příklad komponenty validátoru zobrazený v této části se používá CustomValidation v následujících částech tohoto článku:

• Ověření obchodní logiky pomocí komponenty validátoru
• Ověření serveru pomocí komponenty validátoru

Vytvořte komponentu validátoru z ComponentBase :

• Formulář je EditContext kaskádový parametr komponenty.
• Při inicializaci komponenty validátoru se vytvoří nový, aby se zachoval ValidationMessageStore aktuální seznam chyb formuláře.
• Úložiště zpráv přijímá chyby, když vývojářský kód v komponentě formuláře volá DisplayErrors metodu . Chyby se předá DisplayErrors metodě v Dictionary<string, List<string>> . Ve slovníku je klíč název pole formuláře, které obsahuje jednu nebo více chyb. Hodnota je seznam chyb.
• Zprávy jsou vymazány, pokud došlo k nějaké z následujících událostí:
  • Při vyvolané události EditContext se OnValidationRequested požaduje ověření. Všechny chyby jsou vymazány.
  • Pole se změní ve formuláři při OnFieldChanged vyvolané události. Vymazat se budou jenom chyby pro pole.
  • Metodu ClearErrors volá vývojářský kód. Všechny chyby jsou vymazány.

CustomValidation.cs (Pokud se používá v testovací aplikaci, změňte obor názvů tak, aby odpovídal BlazorSample oboru názvů aplikace):

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorSample
{
    public class CustomValidation : ComponentBase
    {
        private ValidationMessageStore messageStore;
    
        [CascadingParameter]
        private EditContext CurrentEditContext { get; set; }
    
        protected override void OnInitialized()
        {
            if (CurrentEditContext == null)
            {
                throw new InvalidOperationException(
                    $"{nameof(CustomValidation)} requires a cascading " +
                    $"parameter of type {nameof(EditContext)}. " +
                    $"For example, you can use {nameof(CustomValidation)} " +
                    $"inside an {nameof(EditForm)}.");
            }
    
            messageStore = new ValidationMessageStore(CurrentEditContext);
    
            CurrentEditContext.OnValidationRequested += (s, e) => 
                messageStore.Clear();
            CurrentEditContext.OnFieldChanged += (s, e) => 
                messageStore.Clear(e.FieldIdentifier);
        }
    
        public void DisplayErrors(Dictionary<string, List<string>> errors)
        {
            foreach (var err in errors)
            {
                messageStore.Add(CurrentEditContext.Field(err.Key), err.Value);
            }
    
            CurrentEditContext.NotifyValidationStateChanged();
        }
    
        public void ClearErrors()
        {
            messageStore.Clear();
            CurrentEditContext.NotifyValidationStateChanged();
        }
    }
}

Ověření obchodní logiky pomocí komponenty validátoru

Pro obecné ověřování obchodní logiky použijte komponentu validátoru, která přijímá chyby formuláře ve slovníku.

Základní ověření je užitečné v případech, kdy je model formuláře definován v rámci komponenty, která je hostitelem formuláře, buď jako členy přímo v komponentě, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se napříč několika komponentami používá nezávislá třída modelu.

V následujícím příkladu:

• Používá se zkrácená verze formuláře ( součást) z části Formulář příkladu, která přijímá pouze klasifikaci a popis Starfleet Starship Database FormExample2 hvězdičky. Ověření poznámek k datům se nespouštělo při odeslání formuláře, protože komponenta není součástí DataAnnotationsValidator formuláře.
• Používá CustomValidation se komponenta z části Součásti validátoru tohoto článku.
• Ověření vyžaduje hodnotu popisu expedice ( ), pokud uživatel vybere klasifikaci lodí Description Defense ( Classification ).

Když se v komponentě nastaví ověřovací zprávy, přičtou se do validátoru a zobrazí se v ValidationMessageStore EditForm souhrnu ověření.

Pages/FormExample5.razor:

@page "/form-example-5"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample5> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Primary Classification:
            <InputSelect @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>
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" />
        </label>
    </p>

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

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private CustomValidation customValidation;
    private Starship starship = new Starship() { ProductionDate = DateTime.UtcNow };

    private void HandleValidSubmit()
    {
        customValidation.ClearErrors();

        var errors = new Dictionary<string, List<string>>();

        if (starship.Classification == "Defense" &&
                string.IsNullOrEmpty(starship.Description))
        {
            errors.Add(nameof(starship.Description),
                new List<string>() { "For a 'Defense' ship classification, " +
                "'Description' is required." });
        }

        if (errors.Any())
        {
            customValidation.DisplayErrors(errors);
        }
        else
        {
            Logger.LogInformation("HandleValidSubmit called: Processing the form");

            // Process the valid form
        }
    }
}

Ověření serveru pomocí komponenty validátoru

Kromě ověřování na straně klienta se podporuje ověřování serveru:

• Zpracování ověřování na straně klienta ve formuláři s DataAnnotationsValidator komponentou.
• Když formulář projde ověřením na straně klienta ( je volána), odešle do OnValidSubmit EditContext.Model rozhraní API back-endového serveru pro zpracování formulářů.
• Ověření modelu zpracování na serveru.
• Serverové rozhraní API zahrnuje ověření integrovaných datových poznámek architektury i vlastní logiku ověřování dodanou vývojářem. Pokud ověření projde na serveru, zpracujte formulář a odešlete zpět stavový kód úspěchu ( 200 - OK ). Pokud se ověření nezdaří, vrátí se stavový kód selhání ( ) a 400 - Bad Request chyby ověření pole.
• Buď zakažte formulář při úspěchu, nebo zobrazte chyby.

Základní ověření je užitečné v případech, kdy je model formuláře definován v rámci komponenty, která je hostitelem formuláře, buď jako členy přímo v komponentě, nebo v podtřídě. Použití komponenty validátoru se doporučuje v případě, že se napříč několika komponentami používá nezávislá třída modelu.

Následující příklad je založený na:

• Hostované Blazor WebAssembly řešení vytvořené ze šablony Blazor WebAssembly projektu. Tento přístup se podporuje u všech zabezpečených hostovaných Blazor řešení popsaných v dokumentaci k Blazor WebAssembly hostovanému zabezpečení.
• Model Starship ( ) z části Formulář Starship.cs příkladu.
• Komponenta CustomValidation zobrazená v části Komponenty validátoru.

Umístěte model ( ) do projektu řešení, aby ho mohli používat klientské i Starship Starship.cs Shared serverové aplikace. Přidejte nebo aktualizujte obor názvů tak, aby odpovídal oboru názvů sdílené aplikace (například namespace BlazorSample.Shared ). Vzhledem k tomu, že model vyžaduje datové poznámky, přidejte do souboru projektu projektu odkaz System.ComponentModel.Annotations Shared na balíček pro :

<ItemGroup>
  <PackageReference Include="System.ComponentModel.Annotations" Version="{VERSION}" />
</ItemGroup>

Pokud chcete pro zástupný symbol určit nejnovější verzi balíčku, která není verzí Preview, podívejte se na stránku Historie verzí balíčku {VERSION} na NuGet.org System.ComponentModel.Annotations pro .

V projektu přidejte kontroler, který bude zpracovávat žádosti o ověření Server hvězdičky a vracet neúspěšné ověřovací zprávy. Aktualizujte obory názvů v posledním using příkazu pro projekt a pro třídu Shared namespace kontroleru. Kromě ověření datových poznámek (na straně klienta a na straně serveru) kontroler ověří, jestli je pro popis expedice () poskytnuta hodnota, pokud uživatel vybere klasifikaci lodí Description Defense ( Classification ).

Ověření klasifikace expedice probíhá pouze na straně serveru v kontroleru, protože nadcházející formulář nebude při odeslání formuláře na server provádět stejnou ověřovací Defense klasifikaci na straně klienta. Ověřování na straně serveru bez ověřování na straně klienta je běžné v aplikacích, které vyžadují ověření privátní obchodní logiky vstupu uživatele na serveru. Například k ověření vstupu uživatele se můžou zadat soukromé informace z dat uložených pro uživatele. Soukromá data samozřejmě není možné odeslat klientovi k ověření na straně klienta.

Controllers/StarshipValidation.cs:

using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;
using BlazorSample.Shared;

namespace BlazorSample.Server.Controllers
{
    [Authorize]
    [ApiController]
    [Route("[controller]")]
    public class StarshipValidationController : ControllerBase
    {
        private readonly ILogger<StarshipValidationController> logger;

        public StarshipValidationController(
            ILogger<StarshipValidationController> logger)
        {
            this.logger = logger;
        }

        [HttpPost]
        public async Task<IActionResult> Post(Starship starship)
        {
            try
            {
                if (starship.Classification == "Defense" && 
                    string.IsNullOrEmpty(starship.Description))
                {
                    ModelState.AddModelError(nameof(starship.Description),
                        "For a 'Defense' ship " +
                        "classification, 'Description' is required.");
                }
                else
                {
                    logger.LogInformation("Processing the form asynchronously");

                    // Process the valid form
                    // async ...

                    return Ok(ModelState);
                }
            }
            catch (Exception ex)
            {
                logger.LogError("Validation Error: {Message}", ex.Message);
            }

            return BadRequest(ModelState);
        }
    }
}

Pokud v hostované aplikaci používáte předchozí kontroler, aktualizujte obor názvů ( ) tak, aby odpovídal oboru názvů Blazor WebAssembly BlazorSample.Server.Controllers kontrolerů aplikace.

Pokud na serveru dojde k chybě ověření vazby modelu, metoda ( ) obvykle vrátí výchozí chybnou odpověď ApiController ApiControllerAttribute požadavku s ValidationProblemDetails . Odpověď obsahuje více dat než jenom chyby ověření, jak je znázorněno v následujícím příkladu, pokud nejsou odeslána všechna pole formuláře a formulář Starfleet Starship Database selže ověření:

{
  "title": "One or more validation errors occurred.",
  "status": 400,
  "errors": {
    "Identifier": ["The Identifier field is required."],
    "Classification": ["The Classification field is required."],
    "IsValidatedDesign": ["This form disallows unapproved ships."],
    "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
  }
}

Pokud rozhraní API serveru vrátí předchozí výchozí odpověď JSON, může klient parsovat odpověď v kódu vývojáře a získat podřízené prvky uzlu pro zpracování chyb ověřování errors formulářů. Pro parsovat soubor je nepohodlné psát vývojářský kód. Ruční analýza JSON vyžaduje, aby se po Dictionary<string, List<string>> zavolání vyvolala ReadFromJsonAsync chyba. V ideálním případě by rozhraní API serveru mělo vracet pouze chyby ověření:

{
  "Identifier": ["The Identifier field is required."],
  "Classification": ["The Classification field is required."],
  "IsValidatedDesign": ["This form disallows unapproved ships."],
  "MaximumAccommodation": ["Accommodation invalid (1-100000)."]
}

Pokud chcete upravit odpověď rozhraní API serveru tak, aby vracela pouze chyby ověřování, změňte delegáta, který se vyvolá u akcí, které jsou v anotované pomocí ApiControllerAttribute Startup.ConfigureServices . Pro koncový bod rozhraní API ( /StarshipValidation ) vraťte s BadRequestObjectResult ModelStateDictionary . U všech ostatních koncových bodů rozhraní API zachováte výchozí chování vrácením výsledku objektu s novou hodnotou ValidationProblemDetails .

Na začátek souboru v aplikaci Microsoft.AspNetCore.Mvc Startup.cs přidejte obor Server názvů :

using Microsoft.AspNetCore.Mvc;

V Startup.ConfigureServices souboru vyhledejte AddControllersWithViews rozšiřující metodu a přidejte následující volání ConfigureApiBehaviorOptions metody :

services.AddControllersWithViews()
    .ConfigureApiBehaviorOptions(options =>
    {
        options.InvalidModelStateResponseFactory = context =>
        {
            if (context.HttpContext.Request.Path == "/StarshipValidation")
            {
                return new BadRequestObjectResult(context.ModelState);
            }
            else
            {
                return new BadRequestObjectResult(
                    new ValidationProblemDetails(context.ModelState));
            }
        };
    });

Další informace naleznete v tématu Zpracování chyb ve ASP.NET Core rozhraní API.

V projektu Client přidejte CustomValidation komponentu zobrazenou v části Komponenty validátoru. Aktualizujte obor názvů tak, aby odpovídal aplikaci (například namespace BlazorSample.Client ).

V projektu se formulář aktualizuje, aby se s pomocí komponenty zobrazují chyby ověření Client Starfleet Starship Database CustomValidation serveru. Když rozhraní API serveru vrátí ověřovací zprávy, přičtou se do . CustomValidation ValidationMessageStore Chyby jsou ve formuláři k dispozici pro zobrazení v souhrnu ověření EditContext formuláře.

V následující FormExample6 komponentě aktualizujte obor názvů projektu ( ) na obor názvů Shared @using BlazorSample.Shared sdíleného projektu. Všimněte si, že formulář vyžaduje autorizaci, takže uživatel musí být přihlášený k aplikaci, aby na formulář přecházet.

Pages/FormExample6.razor:

@page "/form-example-6"
@using System.Net
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.Extensions.Logging
@using BlazorSample.Shared
@attribute [Authorize]
@inject HttpClient Http
@inject ILogger<FormExample6> Logger

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <CustomValidation @ref="customValidation" />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Description (optional):
            <InputTextArea @bind-Value="starship.Description" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Primary Classification:
            <InputSelect @bind-Value="starship.Classification" disabled="@disabled">
                <option value="">Select classification ...</option>
                <option value="Exploration">Exploration</option>
                <option value="Diplomacy">Diplomacy</option>
                <option value="Defense">Defense</option>
            </InputSelect>
        </label>
    </p>
    <p>
        <label>
            Maximum Accommodation:
            <InputNumber @bind-Value="starship.MaximumAccommodation" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Engineering Approval:
            <InputCheckbox @bind-Value="starship.IsValidatedDesign" 
                disabled="@disabled" />
        </label>
    </p>
    <p>
        <label>
            Production Date:
            <InputDate @bind-Value="starship.ProductionDate" disabled="@disabled" />
        </label>
    </p>

    <button type="submit" disabled="@disabled">Submit</button>

    <p style="@messageStyles">
        @message
    </p>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>,
        &copy;1966-2019 CBS Studios, Inc. and
        <a href="https://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@code {
    private bool disabled;
    private string message;
    private string messageStyles = "visibility:hidden";
    private CustomValidation customValidation;
    private Starship starship = new() { ProductionDate = DateTime.UtcNow };

    private async Task HandleValidSubmit(EditContext editContext)
    {
        customValidation.ClearErrors();

        try
        {
            var response = await Http.PostAsJsonAsync<Starship>(
                "StarshipValidation", (Starship)editContext.Model);

            var errors = await response.Content
                .ReadFromJsonAsync<Dictionary<string, List<string>>>();

            if (response.StatusCode == HttpStatusCode.BadRequest && 
                errors.Any())
            {
                customValidation.DisplayErrors(errors);
            }
            else if (!response.IsSuccessStatusCode)
            {
                throw new HttpRequestException(
                    $"Validation failed. Status Code: {response.StatusCode}");
            }
            else
            {
                disabled = true;
                messageStyles = "color:green";
                message = "The form has been processed.";
            }
        }
        catch (AccessTokenNotAvailableException ex)
        {
            ex.Redirect();
        }
        catch (Exception ex)
        {
            Logger.LogError("Form processing error: {Message}", ex.Message);
            disabled = true;
            messageStyles = "color:red";
            message = "There was an error processing the form.";
        }
    }
}

InputText na základě vstupní události

Pomocí komponenty InputText můžete vytvořit vlastní komponentu, která místo input události používá událost change . Použití ověřování input pole triggerů událostí při každém stisknutí klávesy

Následující příklad používá ExampleModel třídu .

ExampleModel.cs:

using System.ComponentModel.DataAnnotations;

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

Následující CustomInputText komponenta dědí komponentu architektury a InputText nastaví vazbu událostí na oninput událost.

Shared/CustomInputText.razor:

@inherits InputText

<input @attributes="AdditionalAttributes" 
       class="@CssClass" 
       @bind="CurrentValueAsString" 
       @bind:event="oninput" />

Komponentu CustomInputText je možné použít InputText kdekoli. Následující FormExample7 komponenta používá sdílenou CustomInputText komponentu.

Pages/FormExample7.razor:

@page "/form-example-7"
@using Microsoft.Extensions.Logging
@inject ILogger<FormExample7> Logger

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

    <CustomInputText @bind-Value="exampleModel.Name" />

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

<p>
    CurrentValue: @exampleModel.Name
</p>

@code {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }
}

Přepínače

Při práci s přepínači ve formuláři se datová vazba zpracovává jinak než jiné prvky, protože přepínač se vyhodnocuje jako skupina. Hodnota každého přepínače je pevná, ale hodnota skupiny přepínačů je hodnota vybraného přepínačového tlačítka. Následující příklad ukazuje, jak:

• Zpracování datových vazeb pro skupinu přepínačů
• Podpora ověřování pomocí vlastní InputRadio<TValue> komponenty

Shared/InputRadio.razor:

@using System.Globalization
@inherits InputBase<TValue>
@typeparam TValue

<input @attributes="AdditionalAttributes" type="radio" value="@SelectedValue" 
       checked="@(SelectedValue.Equals(Value))" @onchange="OnChange" />

@code {
    [Parameter]
    public TValue SelectedValue { get; set; }

    private void OnChange(ChangeEventArgs args)
    {
        CurrentValueAsString = args.Value.ToString();
    }

    protected override bool TryParseValueFromString(string value, 
        out TValue result, out string errorMessage)
    {
        var success = BindConverter.TryConvertTo<TValue>(
            value, CultureInfo.CurrentCulture, out var parsedValue);
        if (success)
        {
            result = parsedValue;
            errorMessage = null;

            return true;
        }
        else
        {
            result = default;
            errorMessage = $"{FieldIdentifier.FieldName} field isn't valid.";

            return false;
        }
    }
}

Další informace o parametrech obecného typu ( @typeparam ) najdete v následujících článcích:

• RazorReferenční informace k syntaxi pro ASP.NET Core
• RazorASP.NET Core Součásti
• ASP.NET Core Blazor komponenty se šablonami

Následující RadioButtonExample komponenta používá předchozí InputRadio komponentu k získání a ověření hodnocení od uživatele:

Pages/RadioButtonExample.razor:

@page "/radio-button-example"
@using System.ComponentModel.DataAnnotations
@using Microsoft.Extensions.Logging
@inject ILogger<RadioButtonExample> Logger

<h1>Radio Button Example</h1>

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

    @for (int i = 1; i <= 5; i++)
    {
        <label>
            <InputRadio name="rate" SelectedValue="@i" @bind-Value="model.Rating" />
            @i
        </label>
    }

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

<p>You chose: @model.Rating</p>

@code {
    private Model model = new();

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public class Model
    {
        [Range(1, 5)]
        public int Rating { get; set; }
    }
}

Součásti Souhrn ověření a Ověřovací zpráva

Tato ValidationSummary komponenta shrnuje všechny ověřovací zprávy, které jsou podobné jako pomocná metoda značky souhrnu ověření:

<ValidationSummary />

Výstupní ověřovací zprávy pro konkrétní model s Model parametrem :

<ValidationSummary Model="@starship" />

Komponenta ValidationMessage<TValue> zobrazí ověřovací zprávy pro konkrétní pole, které je podobné jako pomocná metoda značky ověřovací zprávy. Zadejte pole pro ověření pomocí For atributu a výrazu lambda, který pojmenuje vlastnost modelu:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

Komponenty ValidationMessage<TValue> ValidationSummary a podporují libovolné atributy. Jakýkoli atribut, který neodpovídá parametru komponenty, se přidá do generovaného <div> elementu nebo <ul> .

Řídí styl ověřovacích zpráv v tabulce stylů aplikace ( wwwroot/css/app.css nebo wwwroot/css/site.css ). Výchozí třída validation-message nastaví barvu textu ověřovacích zpráv na červenou:

.validation-message {
    color: red;
}

Vlastní atributy ověřování

Pokud chcete zajistit, aby byl výsledek ověření správně přidružen k poli při použití vlastního atributu ověřování ,při vytváření předejte kontext MemberName ValidationResult ověření.

CustomValidator.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class CustomValidator : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, 
        ValidationContext validationContext)
    {
        ...

        return new ValidationResult("Validation message to user.",
            new[] { validationContext.MemberName });
    }
}

Blazor Ověřovací balíček datových poznámek

je Microsoft.AspNetCore.Components.DataAnnotations.Validation balíček, který vyplní mezery v prostředí ověřování pomocí DataAnnotationsValidator komponenty . Balíček je momentálně experimentální.

Atribut [CompareProperty]

CompareAttributeNefunguje dobře s DataAnnotationsValidator komponentou, protože nepřiřazuje výsledek ověření k určitému členu. To může vést k nekonzistentnímu chování mezi ověřováním na úrovni polí a při ověřování celého modelu při odeslání. Microsoft.AspNetCore.Components.DataAnnotations.Validation Experimentální balíček zavádí další ověřovací atribut, který tato ComparePropertyAttribute omezení funguje. V Blazor aplikaci [CompareProperty] je přímá náhrada za [Compare] atribut.

Vnořené modely, typy kolekcí a komplexní typy

Blazor poskytuje podporu pro ověřování vstupu formuláře pomocí datových poznámek s integrovaným DataAnnotationsValidator . DataAnnotationsValidatorPouze ověří vlastnosti nejvyšší úrovně modelu svázaného s formulářem, který není vlastností kolekce nebo komplexního typu.

Chcete-li ověřit celý graf objektu vázaného modelu, včetně vlastností kolekce a komplexního typu, použijte příkaz ObjectGraphDataAnnotationsValidator poskytnutý experimentálním Microsoft.AspNetCore.Components.DataAnnotations.Validation balíčkem:

<EditForm Model="@model" OnValidSubmit="@HandleValidSubmit">
    <ObjectGraphDataAnnotationsValidator />
    ...
</EditForm>

Přidávejte do vlastností modelu poznámky [ValidateComplexType] . V následujících třídách modelu ShipDescription obsahuje Třída další datové poznámky pro ověření, když je model svázán s formulářem:

Starship.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    ...

    [ValidateComplexType]
    public ShipDescription ShipDescription { get; set; } = 
        new ShipDescription();

    ...
}

ShipDescription.cs:

using System;
using System.ComponentModel.DataAnnotations;

public class ShipDescription
{
    [Required]
    [StringLength(40, ErrorMessage = "Description too long (40 char).")]
    public string ShortDescription { get; set; }

    [Required]
    [StringLength(240, ErrorMessage = "Description too long (240 char).")]
    public string LongDescription { get; set; }
}

Povolit tlačítko Odeslat na základě ověření formuláře

Chcete-li povolit a zakázat tlačítko Odeslat na základě ověření formuláře, následující příklad:

• Používá zkrácenou verzi předchozího Starfleet Starship Database formuláře ( FormExample2 komponenty), který přijímá pouze hodnotu identifikátoru lodě. Ostatní Starship vlastnosti obdrží platné výchozí hodnoty, když Starship je vytvořena instance typu.
• Pomocí formuláře EditContext přiřadí model při inicializaci komponenty.
• Ověří formulář v OnFieldChanged zpětném volání kontextu a povolí a zakáže tlačítko Odeslat.
• Implementuje IDisposable a zruší odběr obslužné rutiny události v Dispose metodě. Další informace naleznete v tématu RazorASP.NET Core životní cyklus komponenty.

Pages/FormExample9.razor:

@page "/form-example-9"
@using Microsoft.Extensions.Logging
@implements IDisposable
@inject ILogger<FormExample9> Logger

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label>
            Identifier:
            <InputText @bind-Value="starship.Identifier" />
        </label>
    </p>

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private Starship starship = 
        new Starship()
        {
            Identifier = "NCC-1701",
            Classification = "Exploration",
            MaximumAccommodation = 150,
            IsValidatedDesign = true,
            ProductionDate = new DateTime(2245, 4, 11)
        };
    private bool formInvalid = false;
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(starship);
        editContext.OnFieldChanged += HandleFieldChanged;
    }

    private void HandleFieldChanged(object sender, FieldChangedEventArgs e)
    {
        formInvalid = !editContext.Validate();
        StateHasChanged();
    }

    private void HandleValidSubmit()
    {
        Logger.LogInformation("HandleValidSubmit called");

        // Process the valid form
    }

    public void Dispose()
    {
        editContext.OnFieldChanged -= HandleFieldChanged;
    }
}

Pokud formulář není předem načten s platnými hodnotami a chcete zakázat Submit tlačítko při načtení formuláře, nastavte formInvalid na true .

Vedlejším účinkem předchozího přístupu je, že souhrn ověření ( ValidationSummary součást) se naplní neplatnými poli poté, co uživatel pracuje s libovolným polem. Vyřešte tento scénář jedním z následujících způsobů:

• Nepoužívejte ValidationSummary komponentu na formuláři.
• Zpřístupní ValidationSummary komponentu, když je vybráno tlačítko Odeslat (například v HandleValidSubmit metodě).

<EditForm EditContext="@editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary style="@displaySummary" />

    ...

    <button type="submit" disabled="@formInvalid">Submit</button>
</EditForm>

@code {
    private string displaySummary = "display:none";

    ...

    private void HandleValidSubmit()
    {
        displaySummary = "display:block";
    }
}

Řešení potíží

InvalidOperationException: EditForm vyžaduje parametr modelu nebo parametr EditContext, ale ne obojí.

Potvrďte, že EditForm přiřadí a Model EditContext . U stejného formuláře nepoužívejte obojí.

Při přiřazování k Model Ověřte, zda je vytvořen typ modelu, jak ukazuje následující příklad:

private ExampleModel exampleModel = new ExampleModel();

Další materiály

• Zabezpečení ASP.NET Core aplikace Blazor WebAssembly pomocí Azure Active Directory
• zabezpečení Blazor WebAssembly hostované aplikace v ASP.NET Core s využitím Azure Active Directory B2C
• Zabezpečení hostované ASP.NET Core Blazor WebAssembly aplikací pomocí Identity Serveru