IFT1148 Saisie de données et validation

Transcription

1 IFT1148 Saisie de données et validation Michael Blondin Direction de l enseignement de service en informatique Université de Montréal Hiver / 51

2 Entrée des données : liste déroulante La liste déroulante permet à l utilisateur de choisir une valeur dans une liste. Pour utiliser une telle liste dans une page Web, il suffit d insérer le contrôle DropDownList à partir de la boîte à outils. 2 / 51

3 Entrée des données : liste déroulante Pour insérer des éléments à la liste, il suffit de cliquer sur le bouton «...» grâce à la propriété Items du menu «Propriétés». Un élément possède les propriétés suivantes : Enabled : indique si l élément est affiché. Selected : indique si l élément est sélectionné par défaut. Text : texte affiché dans la liste. Value : valeur associée à l élément. 3 / 51

4 Entrée des données : liste déroulante Pour accéder à l élément sélectionné au niveau du code, il faut utiliser la propriété SelectedItem. Il est ensuite possible de récupérer le texte et la valeur de l élément grâce aux propriétés Text et Value. La propriété SelectedIndex permet de sélectionner un élément à l aide de son indice. 4 / 51

5 Entrée des données : liste déroulante La propriété Items se comporte comment une List et permet de gérer les éléments de la liste déroulante. L opérateur [] permet donc d accéder aux éléments et les méthodes Add et Remove permettent d insérer et supprimer des éléments. 5 / 51

6 Entrée des données : liste déroulante Les éléments de la liste sont de type ListItem. Pour insérer un élément, il faut donc procéder de l une de ces façons : Syntaxe ListItem element1 = new ListItem("Texte"); ListItem element2 = new ListItem("Texte", "Valeur"); ListItem element3 = new ListItem("Texte", "Valeur", etat); MaListe.Items.Add(element1); // La valeur est identique au texte MaListe.Items.Add(element2); // Actif par defaut MaListe.Items.Add(element3); // Actif seulement si etat est vrai 6 / 51

7 Entrée des données : liste déroulante Les listes déroulantes possèdent un événement SelectedIndexChanged qui est déclenché lorsqu un nouvel élément est sélectionné dans la liste. Cela peut être utile pour mettre le contenu de la page à jour en fonction du choix de l utilisateur (son pays par exemple). 7 / 51

8 Entrée des données : liste ouverte La liste ouverte est similaire à la liste déroulante. Pour parcourir ses éléments, il faut cependant utiliser une barre de défilement. De plus, il est possible de sélectionner plusieurs éléments si nécessaire. Pour utiliser une telle liste dans une page Web, il suffit d insérer le contrôle ListBox à partir de la boîte à outils. 8 / 51

9 Entrée des données : liste ouverte Pour insérer des éléments à la liste, il suffit de cliquer sur le bouton «...» grâce à la propriété Items du menu «Propriétés» comme dans le cas de la liste déroulante. Il est possible d indiquer combien d éléments sont visibles grâce à la propriété Rows. La propriété SelectedItem permet d accéder au premier élément sélectionné. 9 / 51

10 Entrée des données : liste ouverte Il est possible de permettre à l utilisateur de sélectionner plusieurs éléments dans la liste en affectant la valeur Multiple à la propriété SelectionMode. Pour sélectionner plusieurs éléments, l utilisateur doit tenir la touche Ctrl enfoncée et cliquer sur les différents éléments. 10 / 51

11 Entrée des données : liste ouverte Supposons que l on veule récupérer la valeur associée à tous les éléments sélectionnés et les stocker dans une liste, nous pourrions procéder ainsi : Exemple List<string> valeurs = new List<string>(); for (int i = 0; i < Liste.Items.Count; i++) if (Liste.Items[i].Selected) valeurs.add(liste.items[i].value); 11 / 51

12 Entrée des données : liste de cases à cocher La liste de cases à cocher permet de regrouper un ensemble de cases à cocher Pour utiliser une telle liste dans une page Web, il suffit d insérer le contrôle CheckBoxList à partir de la boîte à outils. 12 / 51

13 Entrée des données : liste de cases à cocher Pour insérer des éléments à la liste, il suffit de cliquer sur le bouton «...» grâce à la propriété Items du menu «Propriétés» comme dans le cas des autres listes. Il est possible d indiquer la façon dont les éléments sont affichés grâce aux propriétés suivantes : RepeatColumns : nombre de colonnes utilisées pour présenter les cases. RepeatDirection : direction dans laquelle les éléments sont présentés. TextAlign : alignement du texte par rapport aux cases. 13 / 51

14 Entrée des données : liste de cases à cocher La gestion des éléments est indentique à celle des listes ouvertes. Supposons qu une page contient une liste de cases à cocher (ListeCases) et une liste ouverte (Liste). Le code suivant ajoute tous les éléments cochés à la liste ouverte : Exemple for (int i = 0; i < ListeCases.Items.Count; i++) { ListItem element = ListeCases.Items[i]; } if (element.selected) Liste.Items.Add(new ListItem(element.Text, element.value)); 14 / 51

15 Entrée des données : liste de cases d option La liste de cases d option est similaire à la liste de cases à cocher. Toutefois, les éléments d une telle liste sont mutuellement exclusifs, ainsi la sélection d un élément entraine la déselection des autres. Pour utiliser une telle liste dans une page Web, il suffit d insérer le contrôle RadioButtonList à partir de la boîte à outils. La gestion des éléments et du style est identique à celle des listes de cases à cocher. 15 / 51

16 Entrée des données : panneau Un panneau permet de regrouper un ensemble de contrôles. Il est pratique pour cacher ou désactiver un groupe de contrôles dans un formulaire. Pour utiliser ce contrôle dans une page Web, il suffit d insérer le contrôle Panel à partir de la boîte à outils. Pour regrouper des contrôles, ceux-ci sont insérés à l intérieur du panneau. 16 / 51

17 Entrée des données : panneau Supposons qu une page contienne une case à cocher ainsi qu un panneau contenant un certain nombre de contrôles. 17 / 51

18 Entrée des données : panneau En ajoutant le code suivant à l événement CheckedChanged : Exemple Panneau.Visible = CaseACocher.Checked; Et en décochant la case à cocher, nous obtenons : 18 / 51

19 Entrée des données : panneau En ajoutant le code suivant à l événement CheckedChanged : Exemple Panneau.Enabled = CaseACocher.Checked; Et en décochant la case à cocher, nous obtenons : 19 / 51

20 Entrée des données : panneau Les panneaux possèdent certaines propriétés intéressantes : GroupingText : titre du panneau. HorizontalAlign : alignement horizontal du contenu. ScrollBars : apparence des barres de défilement. 20 / 51

21 Manipulations de données Puisque les données sont entrées sous forme de chaînes de caractères, il est pratique de connaître quelques façons de les manipuler. Voici quelques propriétés et méthodes intéressantes : Length : longueur de la chaîne. Substring : permet d obtenir une sous-chaîne. ToLower : convertit toutes les lettres en minuscules. ToUpper : convertit toutes les lettres en majuscules. Trim : efface les espaces en début et fin de chaîne. 21 / 51

22 Manipulations de données Voici quelques manipulations de chaînes de caractères : Exemple string foo = "Bonjour!"; string bar = " Salut tout le monde. "; // -- - foo.length; // == 8 foo.tolower(); // == "bonjour!" foo.toupper(); // == "BONJOUR!" bar.trim(); // == "Salut tout le monde." bar.substring(2, 5); // == "Salut" bar.trim().substring(6); // == "tout le monde." 22 / 51

23 Manipulations de données La méthode String.Format permet de simplifier la génération de messages à partir de données variables. Pour ce faire, il suffit d insérer des paramètres substituables dans une chaîne de caractère, grâce à une certaine syntaxe, puis de donner des valeurs à celles-ci à l aide de String.Format. 23 / 51

24 Manipulations de données Voici quelques utilisations de la méthode String.Format : Exemple string foo = "Je me nomme {0} {1}."; string bar = "Je me nomme {0} {1}. Mon prenom est {0}."; string baz = "Je me nomme {1}, {0}. Je suis {2}."; String.Format(foo, "Alan", "Turing"); /* == "Je me nomme Alan Turing." */ String.Format(bar, "Edsger", "Dijkstra"); /* == "Je me nomme Edsger Dijkstra. Mon prenom est Edsger." */ String.Format(baz, "Donald", "Knuth", "informaticien"); /* == "Je me nomme Knuth, Donald. Je suis informaticien." */ 24 / 51

25 Validation ASP.NET possède plusieurs contrôles permettant de valider le format de données. On nomme ces contrôles des validateurs. Un validateur est associé à un contrôle et permet de vérifier que son contenu respecte certains critères. 25 / 51

26 Validation Il existe plusieurs types de validateurs qui permettent de traiter les cas communs : «RequiredFieldValidator» : vérifie si un champ est vide. «RangeValidator» : vérifie si un nombre est dans un intervalle. «CompareValidator» : compare la donnée avec une valeur. «RegularExpressionValidator» : vérifie si la donnée respecte un certain motif de caractères. 26 / 51

27 Validation Pour ajouter un validateur, il suffit d accéder à l onglet «Validation» de la boîte à outils et d insérer le validateur à l endroit désiré sur la page. Il faut ensuite spécifier le contrôle à valider grâce à la propriété ControlToValidate propre à tous les validateurs. 27 / 51

28 Validation Graphiquement, un validateur se comporte comme une étiquette contenant un message d erreur. Il est possible de modifier le message grâce à la propriété ErrorMessage. De plus, la propriété Display indique de quelle façon l étiquette est affichée : Static : Espace utilisé lorsque le message n est pas affiché. Dynamic : Aucun espace utilisé lorsque le message n est pas affiché. None : Jamais affiché. 28 / 51

29 Validation : valeurs requises Le «RequiredFieldValidator» permet de vérifier si une valeur a été entrée dans un champ. Comme son nom l indique, ce validateur est utile pour rendre des champs obligatoires dans un formulaire. 29 / 51

30 Validation : intervalles Le «RangeValidator» permet de vérifier si une valeur est comprise dans un intervalle. Pour spécifier l intervalle, il faut utiliser les propriétés suivantes : MinimumValue : valeur minimale de l intervalle. MaximumValue : valeur maximale de l intervalle. Type : type des données de l intervalle (entier, nombre à virgule flottante, date, valeur monétaire, chaîne de caractères). 30 / 51

31 Validation : comparaisons Le «CompareValidator» permet de vérifier si une comparaison entre deux valeurs est vraie. Par défaut, l opération de comparaison utilisée est l égalité, il est cependant possible de spécifier les opérations suivantes grâce à la propriété Operator : Equal : égal à ( = ). NotEqual : différent de ( ). GreaterThan : plus grand que ( > ). GreaterThanEqual : plus grand ou égal à ( ). LessThan : plus petit que ( < ). LessThanEqual : plus petit ou égal à ( ). 31 / 51

32 Validation : comparaisons Il existe deux façons de spécifier la valeur avec laquelle l entrée doit être comparée. La deuxième valeur peut être constante ou provenir d un deuxième champ. Pour spécifier la valeur, il faut donc utiliser l une de ces deux propriétés : ValueToCompare : valeur constante. ControlToCompare : contrôle contenant la seconde valeur. 32 / 51

33 Validation : comparaisons Le «CompareValidator» permet aussi de vérifier si une valeur est d un certain type. Pour ce faire, il suffit d utiliser l opérateur DataTypeCheck grâce à la propriété Operator. Dans ce cas, la propriété Type détermine le type à valider. 33 / 51

34 Validation : expression régulières Le «RegularExpressionValidator» permet de vérifier si le format d une chaîne de caractères respecte un certain motif. Le motif est spécifier à l aide d une expression régulière grâce à la propriété ValidationExpression. 34 / 51

35 Validation : expression régulières Une expression régulière est une chaîne de caractère qui décrit un ensemble de chaînes de caractères selon une certaine syntaxe. Voici quelques exemples d expressions : Exemple abc ^abc abc$ ^abc$ chaînes contenant abc chaînes débutant par abc chaînes se terminant par abc chaîne abc 35 / 51

36 Validation : expression régulières Voici certains motifs pouvant être réalisés : Syntaxe Motif ^ début de chaîne \d chiffre \s caractère d espacement. caractère (autre qu un caractère de saut de ligne) $ fin de chaîne 36 / 51

37 Validation : expression régulières Il est possible de regrouper un motif à l aide des paranthèses. L opérateur permet d indiquer qu un motif parmi deux est nécessaire. Exemple a b ^(allo) (bonjour)$ ^a(b c)d$ chaînes contenant au moins un a ou un b chaîne allo ou bonjour chaîne abd ou acd 37 / 51

38 Validation : expression régulières Par la suite, il peut être pratique de quantifier le nombre d apparitions d un motif à l aide de ces expressions : Syntaxe Motif * zéro ou plusieurs instances du motif précédent + une ou plusieurs instances du motif précédent? zéro ou une instance du motif précédent {n} n instances du motif précédent {n,} au moins n instances du motif précédent {n,m} entre n à m instances du motif précédent 38 / 51

39 Validation : expression régulières Voici quelques exemples plus d expressions plus complexes : Exemple ^a(a b)*$ (ab){5,} ^\d+(,\d+)?$ chaînes débutant par a et contenant seulement des a,b chaînes contenant ababababab nombres entiers et à virgule flottante 39 / 51

40 Validation : expression régulières Il est possible de spécifier des ensembles de caractères à l aide de ces motifs : Syntaxe Motif [...] un caractère contenu dans [] [^...] un caractère non contenu dans [] [a-z] une lettre minuscule entre a et z [A-Z] une lettre majuscule entre A et Z [0-9] un chiffre entre 0 et 9 Notez que pour les trois derniers motifs, il est possible de remplacer z, Z et 9 par des symboles plus petits. 40 / 51

41 Validation : expression régulières Voici quelques exemples plus d expressions plus complexes : Exemple ^a[a-z]*a$ ^[A-Z]{1}[a-z]*$ mots en minuscule débutant et se terminant par a mots débutant par une majuscule 41 / 51

42 Validation : expression régulières Le «RegularExpressionValidator» possède plusieurs expressions régulières complexes prédéféfinies. Pour les obtenir, il suffit de cliquer sur le bouton «...» dans la propriété ValidationExpression du validateur grâce au menu «Propriétés». Voici quelques exemples d expressions disponibles : Adresse de courriel Numéro de téléphone Adresse URL 42 / 51

43 Validation : validateurs personnalisés Le «CustomValidator» permet d effectuer une validation personnalisée de son choix. Pour ce faire, une méthode doit être codée et associée au validateur. Ce type de validateur possède un événement nommé ServerValidate qui est apppelé lorsqu une validation est effectuée du côté serveur. 43 / 51

44 Validation : validateurs personnalisés La méthode associée à l événement ServerValidate possède deux paramètres. Pour obtenir la valeur à valider, il suffit d accéder à la chaîne de caractères args.value. Lorsque la validation est terminée, il est nécessaire d indiquer le résultat grâce à la propriété booléeene args.isvalid (true si réussie, false sinon). 44 / 51

45 Validation : validateurs personnalisés Il est possible d accéder au validateur ayant déclenché l événement de validation. Pour ce faire, il faut utiliser le paramètre source. Il est cependant nécessaire de convertir ce paramètre en CustomValidator. Par exemple, pour obtenir le nom du validateur et du contrôle validé, il suffit d utiliser le code suivant : Exemple CustomValidator validateur = (CustomValidator)source; string nomvalidateur = validateur.id; string nomcontrole = validateur.controltovalidate; 45 / 51

46 Validation : validateurs personnalisés Pour que plusieurs validateurs personnalisés utilisent le même code de validation, il suffit de créer une seule méthode et de l associer à l événement ServerValidate de tous les validateurs désirés. 46 / 51

47 Validation Avant d exécuter du code, il peut être souhaitable de vérifier que les données contenues sur une page sont valides. Pour ce faire, il suffit de vérifier si Page.IsValid est vraie. Notez qu en dehors d un événement de validateur personnalisé, cette propriété ne peut être lue qu après avoir appelé explicitement la méthode Page.Validate(). 47 / 51

48 Validation : côté client Tous les validateurs permettent d effectuer la validation côté client et côté serveur. L avantage principal de la validation côté client est qu il n est pas nécessaire de rafraîchir la page (en complétant un formulaire) pour obtenir la validation. Cependant, la validation côté serveur est cruciale puisqu il est toujours possible pour un utilisateur malicieux de contourner le code exécuté côté client. 48 / 51

49 Validation : côté client Pour activer (ou désactiver) la validation côté client, il suffit d utiliser la propriété EnableClientScript propre à tous les validateurs. Dans le cas des validateurs non personnalisés, il n est pas nécessaire de coder quoique ce soit puisque tout est généré automatiquement. Il faut cependant écrire le code de validation pour les validateurs personnalisés. 49 / 51

50 Validation : côté client La validation côté client d un validateur personnalisé doit être spécifiée dans une fonction JavaScript possédant la signature suivante : Syntaxe function FonctionDeValidation(source, args) { // Code ici } Il est toujours possible d obtenir la valeur à valider et d indiquer le résultat grâce à args.value et args.isvalid. 50 / 51

51 Validation : côté client Le nom de la fonction JavaScript doit être spécifié dans la propriété ClientValidationFunction. La fonction quant à elle doit être spécifiée dans le code HTML grâce à la balise suivante : Syntaxe <script type="text/javascript">... </script> ou via un fichier de script. 51 / 51