Share via

Procédure pas à pas : validation des entrées d'utilisateur dans une page Web Forms

  • Article

Mise à jour : novembre 2007

Cette procédure pas à pas illustre comment utiliser des contrôles du validateur ASP.NET pour vérifier les entrées d'utilisateur dans une page Web. Vous devez utiliser quelques contrôles qui exécutent automatiquement tout le contrôle, ne requérant aucun code. Vous créerez également un validateur personnalisé avec du code qui illustre comment vous pouvez ajouter votre propre logique à l'infrastructure de validation dans la page. Enfin, vous apprendrez à valider sous certaines conditions l'entrée d'utilisateur, selon les choix que l'utilisateur fait dans une page.

Dans la procédure pas à pas, vous créerez une page pour un site Web qui permet aux visiteurs de demander une réservation. Étant donné que le but de la procédure pas à pas est d'illustrer la validation, la nature de la réservation n'est pas importante (ce serait le cas, par exemple, pour un restaurant, une salle de réunion, etc.), et la page ne traite pas réellement la réservation.

La page que vous créez invitera l'utilisateur à fournir une adresse de messagerie, le nombre de personnes à réserver et une date par défaut. La page permet également à l'utilisateur de demander une confirmation par téléphone de la réservation. (La valeur par défaut de cette page, si implémenté, serait une confirmation par courrier électronique.)

Note de sécurité :

Par défaut, la page Web Forms vérifie automatiquement qu'aucun utilisateur malveillant n'essaie d'envoyer un script à votre application. Pour plus d'informations, consultez Vue d'ensemble des attaques de script.

Au cours de cette procédure pas à pas, vous apprendrez à :

  • utiliser les contrôles du validateur pour vérifier l'entrée d'utilisateur dans une page Web ASP.NET ;

  • mettre en forme l'affichage des messages d'erreur de validation ;

  • créer une validation personnalisée en écrivant du code.

Composants requis

Pour exécuter cette procédure pas à pas, vous avez besoin de :

  • Visual Studio et du .NET Framework

Création du site et de la page Web

Dans la première partie de cette procédure pas à pas, vous créerez un site Web et une page dans lesquels vous pourrez utiliser les styles.

Si vous avez déjà créé un site Web dans Microsoft Visual Studio (par exemple, à l'aide de la rubrique Procédure pas à pas : création d'une page Web de base dans Visual Web Developer), vous pouvez utiliser ce site et passer à l'étape « Ajout de contrôles » de cette procédure. Sinon, créez un site et une page Web en suivant ces étapes.

Pour créer un site Web de système de fichiers

  1. Ouvrez Visual Studio.

  2. Dans le menu Fichier, cliquez sur Nouveausite Web.

    La boîte de dialogue Nouveau site Web s'affiche.

  3. Dans la liste Langage, cliquez sur le langage de programmation que vous préférez utiliser.

    Le langage de programmation que vous choisissez sera la valeur par défaut pour votre site Web, mais vous pouvez définir individuellement les langages de programmation pour chaque page.

  4. Sous Modèles Visual Studio installés, cliquez sur Site Web ASP.NET.

  5. Dans la zone Emplacement, entrez le nom du dossier dans lequel vous souhaitez conserver les pages de votre site Web.

    Par exemple, tapez le nom du dossier C:\SitesWeb.

  6. Cliquez sur OK.

    Visual Studio crée le dossier et une page nommée Default.aspx.

Ajout de contrôles

Vous utiliserez seulement quelques contrôles pour inviter l'utilisateur à fournir les informations requises pour la réservation.

Pour ajouter des contrôles et du texte

  1. Basculez en mode Design.

  2. Tapez un en-tête de page tel que Envoyer une réservation.

  3. À partir du groupe Standard dans la Boîte à outils, faites glisser les contrôles suivants dans la page et définissez leurs propriétés comme indiqué.

    1. Contrôle

    1. Propriétés

    TextBox

    ID : textEmail

    TextBox

    ID : textNumberInParty

    TextBox

    ID : textPreferredDate

    Button

    ID : buttonSubmit

    Text : Submit Request

    ValidationGroup : AllValidators

    Label

    ID : labelMessage

    Text : (vide)
    Remarque :

    La disposition exacte de la page n'est pas importante.

  4. Tapez le texte en avant-plan des zones de texte servant de légendes.

  5. Double-cliquez sur le bouton Submit Request pour créer un gestionnaire pour son événement Click, puis ajoutez le code en surbrillance suivant :

    Protected Sub buttonSubmit_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
    If Page.IsValid Then      labelMessage.Text = "Your reservation has been processed."    End If
End Sub

    protected void buttonSubmit_Click(object sender, EventArgs e)
{
    if (Page.IsValid)    {      labelMessage.Text = "Your reservation has been processed.";    }
}

    Le gestionnaire de bouton affiche simplement un message ; il n'exécute aucun traitement réel. Toutefois, l'affichage de message vous permettra de tester ultérieurement l'effet de validation dans la procédure pas à pas.

  6. Basculez en mode Design, double-cliquez sur un espace vide dans la page pour créer un gestionnaire Page_Load, puis ajoutez le code en surbrillance suivant :

    Protected Sub Page_Load(ByVal sender As Object, _
    ByVal e As EventArgs)
   labelMessage.Text = ""
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    labelMessage.Text = "";
}

    Ce code efface le message affiché par la page lorsque l'ensemble de la validation passe. Le code permet d'effectuer le test ultérieurement dans la procédure pas à pas.

Ajout d'une validation de base

Pour votre système de réservation imaginaire, vous voudrez exécuter les contrôles de validation suivants :

  • L'adresse de messagerie est requise et doit être au format correct ; par exemple, xyz@example.com. (En règle générale, il est difficile de vérifier qu'une adresse de messagerie existe réellement ; vous pouvez toutefois vérifier qu'elle est conforme au modèle approprié des adresses de messagerie.)

  • Le nombre de personnes est également requis, et il doit s'agir d'une valeur numérique.

  • La date souhaitée est requise.

Vous pouvez ajouter toute cette validation à l'aide de contrôles du validateur qui exécutent tous les contrôles pour vous et affiche automatiquement les erreurs.

Remarque :

Plus tard dans la procédure pas à pas vous ajouterez un autre contrôle pour être sûr que les utilisateurs entrent une date valide.

Pour ajouter la validation de base

  1. Basculez en mode Design. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle RequiredFieldValidator et déposez-le en regard de la zone de texte textEmail.

  2. Définissez les propriétés suivantes du contrôle RequiredFieldValidator :

    Propriété

    Paramètre

    ControlToValidate

    textEmail

    Lie le contrôle du validateur à la zone de texte dont vous souhaitez valider le contenu.

    Display

    Dynamic

    Spécifie que le contrôle est restitué (et occupe de l'espace sur la page) uniquement s'il doit afficher une erreur.

    ErrorMessage

    L'adresse de messagerie est requise.

    Affiche le texte dans un résumé des erreurs que vous configurerez ultérieurement dans la procédure pas à pas.

    Text

    *

    L'astérisque est le signe traditionnel pour indiquer qu'un champ est requis. Ce texte sera affiché uniquement s'il y a une erreur.

    ValidationGroup

    AllValidators

    Comme pour les cases d'option, vous pouvez grouper des validateurs dans les groupes qui sont traités comme unité. Vous obtiendrez plus d'informations sur le regroupement de validateurs ultérieurement dans la procédure pas à pas.

    Vous avez ajouté un test pour vérifier que l'utilisateur entre une adresse de messagerie. Le contrôle du validateur affiche le contrôle et les erreurs en vous demandant d'ajouter le code à la page.

  3. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle RegularExpressionValidator et déposez-le en regard de la zone de texte RequiredFieldValidator que vous venez d'ajouter.

  4. Définissez les propriétés suivantes du contrôle RegularExpressionValidator :

    1. Propriété

    1. Paramètre

    ControlToValidate

    textEmail

    Vous validez une nouvelle fois l'entrée d'utilisateur dans la zone de la messagerie électronique.

    Display

    Dynamique

    ErrorMessage

    Les adresses de messagerie doivent être au format nom@domaine.xyz.

    Message d'erreur plus long.

    Text

    Format non valide !

    Message d'erreur court.

    ValidationGroup

    AllValidators

    Comme pour les cases d'option, vous pouvez grouper des validateurs dans les groupes qui sont traités comme unité. Vous obtiendrez plus d'informations sur le regroupement de validateurs ultérieurement dans la procédure pas à pas.

  5. Lorsque le contrôle RegularExpressionValidator est sélectionné, dans la fenêtre Propriétés, cliquez sur le bouton de sélection dans la zone ValidationExpression.

    Les expressions régulières constituent un langage qui peut être utilisé pour rechercher des modèles précisément définis dans les chaînes. Dans le contrôle RegularExpressionValidator, vous définissez une expression régulière pour le modèle valide - dans ce cas, le modèle d'une adresse de messagerie valide.

    L'Éditeur d'expressions régulières contient une liste d'expressions régulières couramment utilisées afin que vous puissiez utiliser le contrôle du validateur sans en apprendre la syntaxe.

  6. Dans la liste Expressions standard, cliquez sur Adresse de messagerie Internet.

    L'expression régulière d'une adresse de messagerie est placée dans la zone Expression de validation.

  7. Cliquez sur OK pour fermer la boîte de dialogue.

  8. Ajoutez un autre contrôle RequiredFieldValidator, à l'aide des instructions des étapes 1 à 3. Cependant, cette fois-ci, liez-le à la zone de texte textNumberInParty et affectez le message Veuillez indiquer le nombre de personnes à sa propriété ErrorMessage.

  9. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle RangeValidator et déposez-le en regard de la zone de texte RequiredFieldValidator que vous venez d'ajouter.

  10. Définissez les propriétés suivantes du contrôle RangeValidator :

    1. Propriété

    1. Paramètre

    ControlToValidate

    textNumberInParty

    Display

    Dynamique

    ErrorMessage

    Entrez un nombre entre 1 et 20 qui correspond au nombre d'invités.

    MaximumValue

    20

    Dans ce cas, valeur arbitraire, mais élevée.

    MinimumValue

    1

    Dans cette application, une réservation requiert une personne au moins.

    Text

    Entrez un nombre entre 1 et 20.

    Type

    Entier

    ValidationGroup

    AllValidators

    Le contrôle RangeValidator exécute deux fonctions : il garantit que les données qu'un utilisateur entre sont des valeurs numériques, et il vérifie que le nombre est compris entre les valeurs minimales et maximales spécifiées.

Test de la page

Vous pouvez maintenant tester les contrôles du validateur dont vous disposez.

Pour tester la validation de base

  1. Appuyez sur CTRL+F5 pour exécuter la page.

  2. Lorsque la page apparaît dans le navigateur, cliquez sur le bouton Submit Request.

    Plusieurs erreurs de validation sont affichées, car vous n'avez pas rempli certains champs obligatoires. Notez que les erreurs de validation sont affichées immédiatement — la page n'est pas envoyée. Par défaut, les contrôles du validateur injectent du code ECMAScript (JavaScript) côté client dans la page pour exécuter le contrôle de validation dans le navigateur. Cela donne aux utilisateurs des commentaires immédiats sur les erreurs de validation ; sans le script client, le contrôle des erreurs de validation nécessiterait un aller-retour vers le serveur, ce qui demanderait du temps à certains moments. En fait, vous ne pouvez pas envoyer la page tant que la validation côté client n'a pas tout vérifié. (Comme mesure de précaution, le même contrôle de validation est encore exécuté lors de l'envoi de la page.)

  3. Vérifiez la validation sur la zone de texte textEmail en tapant une adresse de messagerie non valide, puis une adresse de messagerie valide telle que la vôtre.

  4. Vérifiez que vous pouvez entrer uniquement des valeurs numériques comprises entre 1 et 20 dans la zone de texte Nombre de personnes participant.

  5. Lorsque vous avez entré des valeurs valides, cliquez sur le bouton Submit Request. Si la validation passe pour tous les contrôles, le message Your reservation has been processed s'affichera.

  6. Après avoir confirmé que la validation fonctionne comme prévu, fermez le navigateur.

Si la validation ne fonctionne pas comme prévu, vérifiez de nouveau que vous avez créé tous les paramètres de propriété répertoriés ci-dessus et que vous avez exécuté la page une nouvelle fois.

Autres techniques pour afficher des informations d'erreur

Par défaut, les contrôles du validateur affichent du texte d'erreur sur place ; c'est-à-dire qu'ils affichent la valeur de la propriété Text du contrôle à l'emplacement du contrôle dans la page. À certains moments, vous pouvez souhaiter afficher des informations d'erreur de différentes façons. Les contrôles du validateur ASP.NET vous fournissent ces options supplémentaires :

  • Résumé de toutes les erreurs de validation en un seul emplacement. Vous pouvez l'ajouter ou le remplacer par l'affichage des erreurs sur place. L'affichage des résumés d'erreur vous permet également d'afficher de plus longs messages d'erreur.

  • Affichage d'un message contextuel dans le navigateur avec les informations sur l'erreur. Cette option fonctionne uniquement sur les navigateurs activés par script.

Vous pouvez ajouter ces deux options d'affichage à l'aide du contrôle ValidationSummary. Dans cette partie de la procédure pas à pas, vous ajouterez les deux options d'affichage à la page.

Pour afficher des informations de validation de différentes manières

  1. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle ValidationSummary sur la page.

  2. Affectez à la propriété ValidationGroup du contrôle ValidationSummary la valeur AllValidators.

  3. Exécutez la page.

  4. Exécutez le même test que précédemment dans la procédure pas à pas.

    Pour chaque erreur, des informations sur l'erreur s'afficheront à deux emplacements. Un message d'erreur court (valeur de propriété Text du validateur) s'affiche à l'emplacement du contrôle du validateur. Le message d'erreur plus long (valeur de propriété du contrôle ErrorMessage) s'affiche dans le contrôle ValidationSummary.

  5. Fermez le navigateur.

  6. Affectez à la propriété ShowMessageBox du contrôle ValidationSummary la valeur true.

  7. Exécutez la page.

  8. Exécutez les mêmes tests.

    Cette fois-ci, chaque erreur résulte en un message contextuel dans le navigateur.

  9. Fermez le navigateur.

Ajout d'une validation personnalisée pour vérifier l'entrée de la date

Les contrôles de validation ASP.NET n'incluent pas de contrôle qui vérifie automatiquement si une date est valide. Toutefois, vous pouvez utiliser le contrôle CustomValidator à cette fin. Le validateur personnalisé vous permet d'écrire votre propre code de validation pour vérifier les conditions que votre application requiert. Dans cette procédure pas à pas, vous utiliserez le CustomValidator pour vérifier que la valeur que l'utilisateur entre dans la zone de texte textPreferredDate peut être convertie en une valeur de date.

Vous ajouterez deux blocs de code de validation personnalisé. Le premier est le code de validation personnalisé qui s'exécute lorsque la page est envoyée. Vous devez toujours avoir une logique de validation côté serveur pour un contrôle CustomValidator. Vous écrirez également du script côté client (ECMAScript ou JavaScript) qui exécute un contrôle semblable dans le navigateur, afin que l'utilisateur puisse recevoir les commentaires immédiatement.

Pour utiliser un contrôle CustomValidator pour vérifier la validité d'une date

  1. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle CustomValidator sur la page et positionnez-le en regard de la zone de texte textPreferredDate.

  2. Définissez les propriétés suivantes du contrôle CustomValidator :

    Propriété

    Paramètre

    ControlToValidate

    textPreferredDate

    Display

    Dynamic

    ErrorMessage

    Entrez une date au format jj/MM/aaaa.

    Text

    Format de date non valide (requiert jj/MM/aaaa).

    ValidationGroup

    AllValidators

  3. Double-cliquez sur le contrôle CustomValidator pour créer un gestionnaire pour son événement ServerValidate, puis ajoutez le code en surbrillance suivant :

    Protected Sub CustomValidator1_ServerValidate( _
   ByVal source As Object, _
   ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs)
   Try      DateTime.ParseExact(args.Value, "d", _         System.Globalization.DateTimeFormatInfo.InvariantInfo)      args.IsValid = True   Catch      args.IsValid = False   End Try
End Sub

    protected void CustomValidator1_ServerValidate(object source, 
    ServerValidateEventArgs args)
{
    try    {        DateTime.ParseExact(args.Value, "d",            System.Globalization.DateTimeFormatInfo.InvariantInfo);        args.IsValid = true;    }    catch    {       args.IsValid = false;    }
}

    Ce code s'exécute lorsque l'utilisateur envoie la page. Le code interagit avec le contrôle du validateur à l'aide de l'objet ServerValidateEventArgs (args) passé dans le gestionnaire. La valeur que l'utilisateur a entrée dans la zone de texte textPreferredDate est passée comme la propriété Value de l'objet args. Après avoir vérifié si l'entrée d'utilisateur est valide, vous affectez true ou false à la propriété IsValid de l'objet args. Si vous lui affectez la valeur false, le validateur affiche son message d'erreur.

    Dans cet exemple, le code utilise un bloc try-catch pour déterminer si l'entrée d'utilisateur peut être convertie en un objet DateTime. Si l'utilisateur entre une valeur non valide (toute valeur qui ne soit pas conforme à une date au format j/m/aaaa), la méthode ParseExact de l'objet DateTime lève une exception et le bloc Catch est exécuté.

    Remarque :

    La valeur du paramètre provider de la méthode DateTime.ParseExact est indépendante de la culture. Si vous devez utiliser la culture actuelle, vous pouvez affecter à la propriété provider la valeur null.

  4. Dans le gestionnaire Button_Click, ajoutez le code en surbrillance suivant :

    Protected Sub buttonSubmit_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs)
   If Page.IsValid Then
      labelMessage.Text = "Your reservation has been processed."
   Else     labelMessage.Text = "Page is not valid."End If
End Sub

    protected void buttonSubmit_Click(object sender, EventArgs e)
{
    if(Page.IsValid)    {
        labelMessage.Text = "Your reservation has been processed.";
    }    else    {        labelMessage.Text = "Page is not valid.";    }
}

    Lorsque vous utilisez un contrôle CustomValidator, vous devez vérifier la propriété Page.IsValid dans tout traitement côté serveur pour vous assurer que tous les contrôles de validation sont passés. La propriété IsValid retourne l'état cumulatif de tous les contrôles du validateur sur la page. Cette propriété est utilisée pour s'assurer que tous les contrôles de validation ont passé les traitements côté serveur.

Vous avez maintenant ajouté le code côté serveur pour le contrôle CustomValidator pour vérifier la validité de la date. Comme cette procédure pas à pas l'indique ci-dessus, les contrôles du validateur vérifient également l'entrée d'un utilisateur à l'aide du script client. Vous pouvez également ajouter le script client au contrôle CustomValidator. En effet, vous écrivez un script client qui duplique la logique que votre validation côté serveur exécute. L'écriture du code de validation personnalisé côté client n'est pas toujours pratique (par exemple, si le code personnalisé valide l'entrée d'un utilisateur en consultant une base de données côté serveur). Toutefois, dans ce cas, vous pouvez créer un code côté client qui exécute pour l'essentiel le même contrôle que votre code côté serveur.

Pour ajouter le script client au contrôle CustomValidator

  1. Ouvrez ou basculez vers Default.aspx.

  2. Dans l'élément <head> de la page, ajoutez le bloc de script client suivant :

    <script language="javascript">
function validateDate(oSrc, args)
{
  var iDay, iMonth, iYear;
  var arrValues;
  arrValues = args.Value.split("/");
  iMonth = arrValues[0];
  iDay = arrValues[1];
  iYear = arrValues[2];

  var testDate = new Date(iYear, iMonth - 1, iDay);
  if ((testDate.getDate() != iDay) ||
      (testDate.getMonth() != iMonth - 1) ||
      (testDate.getFullYear() != iYear))
  {
     args.IsValid = false;
     return;
  }

  return true;
}</script>
    Remarque :

    ECMAScript (JavaScript) respecte la casse ; entrez le code exactement comme il apparaît.

    Ce code est similaire au contrôle de validation côté serveur, mais pas aussi strict. L'entrée d'utilisateur est passée dans la fonction en tant que propriété Value de l'objet args, et vous pouvez définir la propriété IsValid de l'objet pour indiquer si la valeur passe la validation. Dans cet exemple, le code effectue un contrôle pour vérifier que des dates numériques valides sont entrées.

    Notez que le code de la validation personnalisée est légèrement différent dans le script client que dans le code serveur. ECMAScript ne fournit pas exactement les mêmes fonctionnalités que le .NET Framework. Par conséquent, ECMAScript analyse le texte entré au lieu du code ParseExact que vous utilisez sur le serveur pour vérifier la date. Toutefois, les deux contrôles de validation (client et serveur) sont assez similaires pour fournir les fonctionnalités dont vous avez besoin.

  3. Placez le point d'insertion dans l'élément <asp:customvalidator> pour le sélectionner.

  4. Dans la fenêtre Propriétés, affectez la valeur validateDate à la propriété ClientValidationFunction du contrôle, valeur qui représente le nom de la fonction ECMAScript que vous venez de créer.

    Vous venez d'ajouter un contrôle de validation personnalisé qui fonctionne dans le script client pour vérifier immédiatement l'entrée d'utilisateur, puis une nouvelle fois lorsque la page est envoyée au serveur.

Test de la validation personnalisée

Vous pouvez maintenant tester si votre validation personnalisée fonctionne correctement.

Pour tester la validation personnalisée

  1. Désactivez temporairement la validation côté client en affectant false à la propriété EnableClientScript du contrôle CustomValidator.

  2. Appuyez sur CTRL+F5 pour exécuter la page.

  3. Indiquez une adresse de messagerie et le nombre d'invités afin que la validation passe pour ces champs.

  4. Dans la zone de texte de date, entrez une chaîne qui n'est pas une date puis cliquez sur le bouton Submit Request.

    Votre page exécute un aller-retour vers le serveur Web, où la validation côté serveur échoue. Le test sur IsValid échoue et labelMessage le message "Page is not valid" (Page non valide) s'affiche.

  5. Remplissez une valeur de date valide (telle que 17/11/2005) et cliquez sur le bouton.

    Cette fois, la valeur de date passe la validation, donc le message de confirmation créé dans le gestionnaire Click du bouton s'affiche.

  6. Fermez le navigateur.

  7. Réactivez la validation côté client en affectant de nouveau true à la propriété EnableClientScript du contrôle CustomValidator.

  8. Exécutez une nouvelle fois la page et entrez des valeurs valides pour l'adresse de messagerie et le nombre d'invités.

    Entrez une valeur de date non valide dans la zone de texte de date puis appuyez sur la touche TAB. (Ne cliquez pas sur le bouton.)

    Dès que la zone de texte de date perd le focus, le script de validation côté client s'exécute et un message d'erreur s'affiche.

    Remarque :

    Si vous utilisez l'option Saisie semi-automatique dans Internet Explorer, la sélection d'une valeur dans la liste remplira une valeur dans la zone de texte, mais le validateur côté client ne s'exécutera pas.

  9. Cliquez sur le bouton Submit Request.

    Étant donné que la validation côté client de la zone de texte de date a échoué, la page n'est pas envoyée.

  10. Corrigez la valeur de date et appuyez de nouveau sur la touche TAB.

    Le message d'erreur disparaît. Vous pouvez à présent envoyer le formulaire.

Ajout de contrôles facultatifs avec validation conditionnelle

Dans la dernière partie de la procédure pas à pas, vous ajouterez des informations facultatives au formulaire de réservation. Les utilisateurs peuvent activer une case pour indiquer qu'ils souhaitent une confirmation par téléphone de leur réservation. Dans ce cas, ils doivent entrer leur numéro de téléphone. Par conséquent, la page contiendra deux contrôles supplémentaires : une case à cocher et une zone de texte.

Comme précédemment, vous utiliserez une validation pour vérifier les entrées d'utilisateur. Vous utiliserez un contrôle RequiredFieldValidator pour vous assurer que les utilisateurs entrent un numéro de téléphone, et un contrôle RegularExpressionValidator pour vérifier son format. Le numéro de téléphone est facultatif; vous devez vérifier le numéro de téléphone seulement si l'utilisateur a activé la case à cocher Confirm reservation by phone. Vous écrirez par conséquent du code simple qui active ou désactive la validation du numéro de téléphone selon l'état de la case à cocher.

Pour ajouter une validation conditionnelle

  1. À partir du groupe Standard de la Boîte à outils, faites glisser un contrôle CheckBox sur la page et définissez les propriétés suivantes :

    Propriété

    Paramètre

    ID

    checkPhoneConfirmation

    AutoPostBack

    True

    Lorsque l'utilisateur clique sur la case à cocher, la page exécutera un aller-retour et activera conditionnellement la zone de texte et la validation.

    CausesValidation

    False

    Un clic sur le CheckBox n'entraînera pas automatiquement la validation.

    Text

    Confirmer la réservation par téléphone.

  2. Faites glisser un contrôle TextBox sur la page sous le contrôle CheckBox et définissez les propriétés suivantes :

    1. Propriété

    1. Paramètres

    ID

    textPhoneNumber

    Enabled

    False

    La zone de texte ne sera pas activée tant que l'utilisateur ne cliquera pas sur la case à cocher.

  3. Tapez du texte comme Numéro de téléphone : en regard de la zone de texte du numéro de téléphone qui sert de légende.

  4. À partir du groupe Validation de la Boîte à outils, faites glisser un contrôle RequiredFieldValidator sur la page et définissez les propriétés suivantes :

    Propriété

    Paramètre

    ID

    validatorRequiredPhoneNumber

    Vous n'avez pas défini l'ID des contrôles de validateur ci-dessus, vous ferez dans ce cas référence au contrôle du validateur dans le code, il est donc utile de lui donner un identificateur mnémonique.

    ControlToValidate

    textPhoneNumber

    Display

    Dynamic

    ErrorMessage

    Vous devez fournir un numéro de téléphone.

    Text

    *

    ValidationGroup

    (Laisser vide)

    Si cette propriété est vide, le validateur n'appartient pas au groupe AllValidators que vous avez établi pour les autres contrôles de validateur sur la page. En conséquence, par défaut, ce validateur n'est pas contrôlé lorsqu'un clic est effectué sur le contrôle buttonSubmit.

  5. Faites glisser un contrôle RegularExpressionValidator sur la page et définissez les propriétés suivantes :

    Propriété

    Paramètre

    ID

    validatorRegExPhoneNumber

    ControlToValidate

    textPhoneNumber

    Display

    Dynamic

    ErrorMessage

    Le format du numéro de téléphone n'est pas valide

    Text

    Format non valide !

    ValidationExpression

    (Utilisez la boîte de dialogue Éditeur d'expressions régulière pour sélectionner Numéro de téléphone américain ou une autre expression de numéro de téléphone.)

    ValidationGroup

    (Laisser vide)

  6. Double-cliquez sur le contrôle checkPhoneConfirmation pour créer un gestionnaire pour son événement CheckedChanged, puis ajoutez le code en surbrillance suivant :

    Protected Sub checkPhoneConfirmation_CheckedChanged( _
   ByVal sender As Object, _
   ByVal e As System.EventArgs)
   If checkPhoneConfirmation.Checked = True Then      textPhoneNumber.Enabled = True      validatorRequiredPhoneNumber.ValidationGroup = "AllValidators"      validatorRegExPhoneNumber.ValidationGroup = "AllValidators"   Else      textPhoneNumber.Enabled = False      validatorRequiredPhoneNumber.ValidationGroup = ""      validatorRegExPhoneNumber.ValidationGroup = ""   End If
End Sub

    protected void checkPhoneConfirmation_CheckedChanged(
    object sender, EventArgs e)
{
    if(checkPhoneConfirmation.Checked)    {        textPhoneNumber.Enabled = true;        validatorRequiredPhoneNumber.ValidationGroup =             "AllValidators";        validatorRegExPhoneNumber.ValidationGroup = "AllValidators";    }    else    {        textPhoneNumber.Enabled = false;        validatorRequiredPhoneNumber.ValidationGroup = "";        validatorRegExPhoneNumber.ValidationGroup = "";    }
}

    Lorsque l'utilisateur active la case à cocher, les deux validateurs associés à la zone de texte sont ajoutés au groupe de validation auquel les autres contrôles de validateur appartiennent. Par conséquent, tous les validateurs sur la page, y compris ceux du numéro de téléphone, sont contrôlés lorsque l'utilisateur envoie la page. Si l'utilisateur désactive la case à cocher, les validateurs sont supprimés du groupe et ne sont donc pas traités lorsqu'un clic est effectué sur le bouton Submit Request.

Test de la validation conditionnelle

Vous pouvez maintenant tester si la validation conditionnelle fonctionne correctement.

Pour tester la validation conditionnelle

  1. Appuyez sur CTRL+F5 pour exécuter la page.

  2. Entrez des informations valides pour l'adresse de messagerie, le nombre d'invités et la date.

  3. Cliquez sur Submit Request.

    La page est envoyée et le message de confirmation s'affiche.

  4. Activez la case à cocher Confirmer la réservation par téléphone.

  5. Cliquez de nouveau sur Submit Request.

    Cette fois, un message d'erreur (un astérisque à côté de la zone de texte de téléphone) s'affiche. Lorsque vous avez cliqué sur la case à cocher, vous avez activé la validation de la zone de texte.

  6. Entrez un numéro de téléphone non valide puis cliquez de nouveau sur Submit Request pour confirmer que la zone de texte n'acceptera pas de numéro de téléphone non valide.

  7. Entrez un numéro de téléphone correctement mis en forme et cliquez sur le bouton Envoyer pour confirmer que le validateur de contrôle accepte des données dont le format est correct.

    Remarque :

    Si vous avez sélectionné Numéro de téléphone américain dans l'Éditeur d'expressions régulières pour la propriété ValidationExpression du contrôle RegularExpressionValidator, un numéro de téléphone correctement mis en forme se compose de l'indicatif (champ facultatif de 3 caractères numériques, placés entre parenthèses ou suivis d'un tiret), suivi d'un ensemble de 3 caractères numériques, d'un tiret, puis d'un ensemble de 4 caractères numériques. (425) 555-0123, 425-555-0123 ou 555-0123 sont des exemples valides.

Étapes suivantes

La validation que vous venez d'ajouter à la page Web Forms illustre les concepts de base des contrôles de validation Web.

Un aspect important de la validation est de comprendre comment elle augmente la sécurité de votre site Web. Pour plus d'informations, consultez Vue d'ensemble des menaces de sécurité des applications Web.

Voir aussi

Concepts

Vue d'ensemble des attaques de script

Référence

Validation des entrées d'utilisateur dans des pages Web ASP.NET