Validation des données de formulaire avec Blazor

Nous apprendrons comment valider la saisie de l’utilisateur via des formulaires HTML et fournir un retour visuel en cas d’erreur de validation.

Dans le article précédent de cette série Blazor Basics, nous avons appris à créer des formulaires HTML et à capturer des données utilisateur à l’aide de Blazor.

Dans cet article, nous apprendrons comment valider les entrées de l’utilisateur et fournir un retour visuel en cas d’erreur.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Validation de base à l’aide d’annotations de données

L’approche la plus simple pour implémenter la validation de formulaire de base consiste à utiliser des annotations de données.

Le System.ComponentModel.DataAnnotations L’espace de noms est bien connu des développeurs .NET expérimentés et peut également être utilisé pour valider les formulaires Blazor.

Nous créons un formulaire d’inscription d’utilisateur simple avec trois champs : un nom d’utilisateur, un mot de passe et une confirmation de mot de passe. Les deux champs de mot de passe doivent être des champs de saisie de type mot de passe et ne pas afficher la saisie de l’utilisateur à l’écran.

Commençons par la classe de modèle de données.

public class User
{
    [Required]
    [StringLength(16, MinimumLength = 4, 
        ErrorMessage = "The username must be between 4 and 16 characters.")]
    public string? Username { get; set; }

    [Required]
    [StringLength(24, MinimumLength = 10, 
        ErrorMessage = "The password must be between 10 and 24 characters.")]
    public string? Password { get; set; }

    [Required]
    [StringLength(24, MinimumLength = 10, 
        ErrorMessage = "The password must be between 10 and 24 characters.")]
    public string? PasswordConfirmation { get; set; }
}

Nous créons une classe nommée User et ajoutez une propriété pour chaque information que nous souhaitons recevoir de l’utilisateur. Remarquez le les attributs utilisé sur chaque définition de propriété.

Assurez-vous d’ajouter @using System.ComponentModel.DataAnnotations; en haut de votre composant Blazor pour importer l’espace de noms requis.

Nous utilisons le Required attribut pour marquer chaque propriété comme obligatoire. Ensuite, nous utilisons le StringLength attribut pour limiter le nombre de caractères pour le Username et Password propriétés.

Nous fournissons également un texte d’erreur personnalisé comme troisième argument du StringLength annotation de données qui sera affichée si la condition de validation n’est pas remplie.

Ensuite, nous définissons un UserModel propriété qui contient une instance de la classe de données que nous avons définie. Il conservera l’entrée de l’utilisateur.

public User? UserModel { get; set; }

Nous remplaçons le OnInitialized méthode de cycle de vie pour créer et attribuer une instance du User classe au UserModel propriété.

Nous créons également un vide Submit méthode que nous pouvons lier au formulaire.

Le bloc de code complet du UserForm le composant ressemble à ceci :

@code {
    public User? UserModel { get; set; }

    protected override void OnInitialized()
    {
        UserModel = new User();
    }

    public void Submit()
    {
    }

    public class User
    {
        [Required]
        [StringLength(16, MinimumLength = 4, 
            ErrorMessage = "The username must be between 4 and 16 characters.")]
        public string? Username { get; set; }

        [Required]
        [StringLength(24, MinimumLength = 10, 
            ErrorMessage = "The password must be between 10 and 24 characters.")]
        public string? Password { get; set; }

        [Required]
        [StringLength(24, MinimumLength = 10, 
            ErrorMessage = "The password must be between 10 and 24 characters.")]
        public string? PasswordConfirmation { get; set; }
    }
}

Ensuite, nous créons le formulaire à l’aide du code de modèle de composant Blazor suivant :

<EditForm Model="@UserModel" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputText @bind-Value="UserModel!.Username" />
    <InputText type="password" @bind-Value="UserModel!.Password" />
    <InputText type="password" @bind-Value="UserModel!.PasswordConfirmation" />
    <button type="submit">Register</button>
</EditForm>

Avec une dizaine de lignes de code, on peut définir un formulaire, le lier au UserModel propriété, lier le OnValidSubmit et afficher trois champs de saisie.

Notez l’utilisation de @bind-Value pour le InputText composant qui lie le champ à une propriété définie dans la section code du composant Blazor.

Nous ajoutons le DataAnnotationsValidator composant au sein du EditForm composant pour activer les annotations de données pour la validation de la saisie du formulaire.

Le ValidationSummary composant situé en dessous du DataAnnotationsValidator Le composant affiche un résumé de toutes les erreurs de validation. Nous les examinerons prochainement. Vous pouvez le placer n’importe où dans le EditForm composant.

L’ensemble du composant, y compris quelques divs et CSS supplémentaires pour lui donner une apparence décente, ressemble à ceci :

@using System.ComponentModel.DataAnnotations;

<h3>Register User</h3>

<EditForm Model="@UserModel" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div>
        <label style="width: 200px">
            Username:
            <InputText @bind-Value="UserModel!.Username" />
        </label>
    </div>
    <div>
        <label style="width: 200px">
            Password:
            <InputText type="password" @bind-Value="UserModel!.Password" />
        </label>
    </div>
    <div>
        <label style="width: 200px">
            Password Confirmation:
            <InputText type="password" @bind-Value="UserModel!.PasswordConfirmation" />
        </label>
    </div>
    <div style="margin-top: 10px;">
        <button type="submit">Register</button>
    </div>
</EditForm>

@code {
    public User? UserModel { get; set; }

    protected override void OnInitialized()
    {
        UserModel = new User();
    }

    public void Submit()
    {
    }

    public class User
    {
        [Required]
        [StringLength(16, MinimumLength = 4, 
            ErrorMessage = "The username must be between 4 and 16 characters.")]
        public string? Username { get; set; }

        [Required]
        [StringLength(24, MinimumLength = 10, 
            ErrorMessage = "The password must be between 10 and 24 characters.")]
        public string? Password { get; set; }

        [Required]
        [StringLength(24, MinimumLength = 10, 
            ErrorMessage = "The password must be between 10 and 24 characters.")]
        public string? PasswordConfirmation { get; set; }
    }
}

Maintenant, créons et exécutons l’application et testons le formulaire.

Le formulaire contient les trois champs de saisie définis pour un nom d’utilisateur, un mot de passe et une confirmation de mot de passe.

Lorsque nous saisissons un nom d’utilisateur répondant aux exigences de validation, le champ devient vert. C’est un comportement par défaut que nous pourrions modifier dans le code.

Lorsque nous saisissons un mot de passe trop court, nous obtenons le message d’erreur personnalisé défini dans le StringLength attribut d’annotation de données pour le champ de mot de passe.

Le ValidationSummary Le composant n’offre pas beaucoup d’options de personnalisation. Si vous préférez un comportement personnalisé, vous devez accéder au EditContext et implémentez un présentateur d’erreurs personnalisé.

Implémentation d’une règle de validation personnalisée

Si vous souhaitez implémenter des règles de validation personnalisées, vous pouvez hériter du ValidationAttribute tapez le System.ComponentModel.DataAnnotations espace de noms et implémenter son IsValid méthode.

Considérez l’implémentation suivante :

using System.ComponentModel.DataAnnotations;

namespace BlazorFormValidation;

public class SupportedUsername : ValidationAttribute
{
    protected override ValidationResult IsValid(object value,
        ValidationContext validationContext)
    {
        var username = (string)value;
        if (username == "Bill Gates")
        {
            return new ValidationResult(
                "You cannot use the reserved username 'Bill Gates'.",
                new[] { validationContext.MemberName });
        }

        return ValidationResult.Success!;
    }
}

Nous créons une classe héritant de ValidationAttribute classe du System.ComponentModel.DataAnnotations espace de noms.

Ensuite, nous remplaçons le IsValid méthode de la classe de base. Nous convertissons d’abord la valeur en type chaîne et l’attribuons à une variable avant de vérifier le contenu pour « Bill Gates ».

Si le nom d’utilisateur est égal à Bill Gatesnous renvoyons un ValidationResult objet, y compris un message d’erreur personnalisé et des informations sur la propriété de modèle validée.

Si le nom d’utilisateur ne correspond pas à la règle, nous retournons Validation.Successce qui signifie que la règle de validation est passée et qu’aucune erreur ne sera affichée.

Nous pouvons joindre le UsernameSupported attribuer au Username propriété de la classe de modèle User :

[Required]
[SupportedUsername]
[StringLength(16, MinimumLength = 4, 
    ErrorMessage = "The username must be between 4 and 16 characters.")]
public string? Username { get; set; }

Quand nous entrons Bill Gates comme nom d’utilisateur, l’erreur sera affichée.

Indice: Vous pouvez également injecter des services enregistrés auprès du conteneur d’injection de dépendances au démarrage de l’application. Sachez cependant qu’il faut utiliser validationContext.GetRequiredService<MyValidationService>(); au lieu d’utiliser l’injection de constructeur.

Affichage d’un message de validation par champ de saisie

Parfois, vous souhaitez afficher tous les messages d’erreur à la même position sur l’écran. C’est là qu’en utilisant le ValidationSummary le type rend les choses très simples.

Cependant, si vous préférez afficher les erreurs de validation en dessous ou à côté d’un champ de saisie, vous n’avez pas de chance avec le ValidationSummary composant.

Cependant, le ValidationMessage Le composant fournit exactement ce dont nous avons besoin.

Jetez un œil à l’exemple suivant :

<EditForm Model="@UserModel" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    @* <ValidationSummary /> *@
    <div>
        <label style="width: 200px">
            Username:
            <InputText @bind-Value="UserModel!.Username" />
            <ValidationMessage For="@(() => UserModel!.Username)" />
        </label>
    </div>
     @* Code omitted... *@
</EditForm>

Nous commentons ou supprimons le ValidationSummary composant et utilisez plutôt le ValidationMessage composant pour afficher le message d’erreur pour chaque champ de saisie spécifique.

Dans ce cas, nous fixons le For propriété du ValidationMessage à une méthode anonyme, renvoyant la propriété du modèle pour lequel on souhaite afficher l’erreur.

La syntaxe est un peu délicate, mais il est nécessaire de fournir une méthode car le message d’erreur sera évalué au moment de l’exécution.

Notez que vous pouvez déplacer le composant n’importe où dans le EditForm composant. Par exemple, vous pouvez avoir deux champs de saisie et afficher les deux erreurs ensemble après ces deux champs de saisie.

Comparé au ValidationSummary composant, le ValidationMessage Le composant offre beaucoup plus de flexibilité mais nécessite plus de code et une définition plus granulaire.

Nous pouvons voir les différentes erreurs de validation lorsque nous construisons et exécutons à nouveau l’application.

Les messages d’erreur de validation sont désormais affichés sous chaque champ de saisie (selon l’emplacement du ValidationMessage dans le modèle de composant).

Conclusion

La validation des entrées de formulaire est une tâche courante et essentielle des développeurs lors de la création d’applications Web modernes basées sur les données. Blazor propose de nombreuses options différentes pour valider un modèle de données.

Avec annotations de données, nous avons une approche simple mais extensible que nous avons utilisée tout au long de cet article. Cependant, vous pouvez accéder directement au EditContext (enveloppé par le EditForm composant) et gagnez plus de contrôle sur le processus de validation.

Le Documentation Microsoft est un excellent point de départ pour en savoir plus sur les méthodes avancées de mise en œuvre de la validation de formulaires personnalisés.

Tu peux accéder au code utilisé dans cet exemple sur GitHub.

Si vous souhaitez en savoir plus sur le développement de Blazor, vous pouvez regarder mon cours intensif Blazor gratuit sur YouTube. Et restez à l’écoute du blog Telerik pour en savoir plus Les bases du Blazor.