Transcription
1. Introduction du cours - Validation des formulaires: Bienvenue, bienvenue, bienvenue dans un autre cours. Je suis super, super excité. Je m'appelle Clyde. Je vais être votre instructeur et cela fait partie d'une série entière autour des formulaires. Nous avons parcouru un long chemin, mais c'est super intéressant parce que nous allons parler la validation côté client et juste prendre recul et réfléchir à pourquoi la validation est importante. Si vous n'avez pas de validation sur un formulaire, que va-t-il se passer ? C' est vrai. L'utilisateur va remplir un formulaire. L' utilisateur va appuyer sur le bouton de soumission, la fille de formulaire va vers le serveur. Et sur le serveur, vous allez avoir une validation nous avions besoin de supposer que la veine du serveur trouve une erreur qui va devoir émettre une réponse au navigateur disant à l'utilisateur n'est pas l'ère et l'ensemble du processus doit répéter. C' est très inefficace. Et c'est exactement pourquoi nous avons une validation côté client. Mais ce que vous ne savez peut-être pas, c'est qu'il existe deux types de validation côté client. Nous avons une invalidation par boulon et par Bolton ne signifie pas seulement les deux dans le navigateur. Par exemple, une entrée de type d'e-mail a certaines exigences et exigences qui doivent être satisfaites pour le navigateur puisse permettre à l'utilisateur de soumettre avant. C' est donc une validation intégrée. Le deuxième type de validation côté client est la validation JavaScript. Oui, nous devons coder du JavaScript, mais ne vous inquiétez pas, je vais vous montrer comment le faire. Et nous allons utiliser l'API de validation de contrainte. Ça va être fascinant. Donc, ce cours est vraiment pour tous les niveaux de vous avez vécu que vous venez de commencer. Ne t'inquiète pas, c'est pour toi. Vous serez en mesure de suivre et vous apprendrez quelque chose de nouveau. Assez de lard, de lard. Allons-y. Rendez-vous à la toute première conférence.
2. Deux types de validation côté du client: Super, super excitant, n'est-ce pas ? Parce que maintenant nous allons parler de forme, Fondation. Et ça ne va pas être si compliqué d'une section. Je veux dire, vous en savez déjà beaucoup, nous avons couvert
beaucoup, beaucoup de cas de validation frontale, mais je veux juste en parler un peu plus en détail. Donc, comme vous le savez, avant de soumettre des données au serveur, vous devez vous assurer que tous les contrôles de formulaire requis ou complète dans le bon format. Et ça s'appelle quoi, 100 pour cent. C' est ce qu'on appelle la validation côté client. Et la validation côté client permet de s'assurer que les données soumises correspondent aux exigences énoncées dans les différents contrôles de formulaire. Et tout au long de ce cours, nous avons discuté des concepts de base et utilisé nombreux exemples de validation de formulaire côté client. On avait des attributs de mesquinerie. Nous mettons l'attribut requis sur divers contrôles de formulaire. Sur certains contrôles de forme numérique, nous avions les attributs Min, max attributs, et cetera, et cetera. Nous avons vraiment fait beaucoup, beaucoup d'exemples dans ce cours. Quelque chose dont vous devez vous souvenir cependant, en tant que client, validation n'est qu'une vérification initiale et c'est une fonctionnalité importante pour une bonne expérience utilisateur. Pourquoi ? Eh bien, pensez-y. Si vous pouvez attraper des données non valides côté client
, l'utilisateur peut les corriger immédiatement. Ce que je veux dire par là, c'est que si vous n'
avez pas de validation côté client, que va-t-il se passer ? C' est vrai. La fille va devenir semblait au serveur, puis le serveur va effectuer ses vérifications et il ne sera que Dane être rejeté, puis il doit revenir tout le chemin à travers le fil au client et seulement alors le client peut le réparer. En d'autres termes, vous causeriez un retard inutile en ayant un aller-retour
au serveur, puis de retour au côté client pour demander à l'utilisateur de réparer la fille. La validation côté client est donc une vérification initiale et améliore l'expérience utilisateur que validation côté client trop confiante ne devrait pas être considérée comme une mesure de sécurité exhaustive. Votre application doit toujours effectuer des contrôles de sécurité sur n'importe quel formulaire, certaines métadonnées côté serveur et côté client. Parce que la validation côté client est trop facile à désactiver, trop facile à contourner par les pirates informatiques. Les utilisateurs malveillants peuvent toujours facilement voir les mauvaises données jusqu'à votre serveur. Vous devriez toujours avoir une validation côté client, mais vous ne pouvez pas vous en fier de manière exhaustive. Est-ce que ça a du sens ? D'accord. D'accord. Eh bien, l'autre chose que
je veux mentionner est que nous avons une validation côté client, et ce sont deux types différents de validation côté client. Quels sont ces différents types ? Eh bien, nous avons une validation native, non ? Également connu sous le nom de validation de formulaire intégrée. Et puis nous avons aussi ce droit, la validation JavaScript. Quelles sont les différences plus tard la validation est fournie par le navigateur, qui est fourni par la spécification HTML. Et la validation native ne nécessite pas beaucoup, le cas échéant, JavaScript, car vous n'avez pas à écrire du code JavaScript personnalisé ou personnalisé. La validation par boulon dans le formulaire a généralement de meilleures performances que JavaScript. Mais bien sûr, l'inconvénient est que ce n'est pas aussi personnalisable que JavaScript, ce qui m'amène à la validation JavaScript. Qu'est-ce que c'est ? C' est juste la validation que vous devez écrire en JavaScript. Le principal avantage est qu'il est complètement personnalisable, mais bien sûr, vous devez tout créer. Vous devez savoir comment écrire JavaScript ou vous devez utiliser une bibliothèque. Alors on y va. Il n'y a que le résumé de haut niveau de la validation du formulaire. Et en particulier en regardant les deux différents types de validation côté client.
3. Validation intégrée: Bienvenue, retour. Je suis super, super excité, comme vous vous en souviendrez dans la conférence précédente, nous avons discuté qu'il existe deux types de validation côté client. Tu te souviens de ce qu'ils étaient ? Le premier était la validation de formulaire intégrée et le deuxième type de validation
JavaScript, nous allons regarder JavaScript sous peu. Mais avant de le faire, je veux juste discuter de la validation de boulon dans la
forme un peu plus en détail. Alors allons y entrer. L' une des fonctionnalités les plus importantes ou les plus significatives de HTML5 Form Controls est la possibilité de valider, d'
utiliser une fille sans compter sur JavaScript. Et comment cela se fait ? Eh bien, c'est fait en utilisant des attributs de validation sur divers éléments de formulaire. Nous en avons vu beaucoup d'exemples dans le cours. Mais pour récapituler, certains de l'attribut requis spécifie avec un champ complet doit être rempli avant que le formulaire puisse être soumis au serveur. Nous avons aussi un lien MAN. Et la chose suivante, assez intuitivement jour spécifier la longueur minimale et maximale des chaînes de données textuelles. On a Minimax. C' est à propos de quoi ? Faire ? Intuitivement, il spécifie les valeurs minimales et maximales des types d'entrée numériques, comme le type de nombre, par exemple. Et puis nous avons cet attribut de type. Cet attribut de type était incroyable, n'est-ce pas ? Parce que cela spécifie si la fille doit être un numéro, adresse
e-mail ou un autre type spécifique. Et nous pouvons devenir plus complexes avec une validation côté client intégrée. Nous pouvons utiliser les attributs du brevet. Vous allez voir un exemple sous peu, mais cela spécifie une expression régulière qui définit un motif. L' inter fille doit suivre. Un joli que quelques-uns d'entre eux que nous avons regardé. Nous avons examiné plus de ces attributs sont importants car si la fille entrée dans un champ de formulaire suit toutes les règles spécifiées par ces attributs va être considéré comme valide et le navigateur permettra à l'utilisateur de soumettre le formulaire sur le serveur. Il fait des saints. Donc, quand un élément est valide, les choses suivantes vont se produire. Tout d'abord, l'élément va correspondre à la pseudo-classe CSA vérifiée, ce qui vous permet d'appliquer un style spécifique aux éléments valides. Nous avons vu de nombreux exemples d'utilisation de cela dans le cours. Et la deuxième chose qui va se produire quand un élément est valide est que le navigateur soumettra le formulaire lorsque l'utilisateur essaie d'envoyer la fille. Bien sûr, à condition qu'il n'y ait rien qui les empêche de le faire. Comme lorsque vous avez utilisé, par exemple, quand un élément est valide. Tout Clyde, que se passe-t-il quand un élément est invalide ? Et remarquez mon côté, évident, mais beaucoup à résumer. Il va tout solidifier avec appris. De même que l'état valide, lorsqu'un élément est invalide, deux choses vont se produire. Tout d'abord, l'élément va correspondre à la pseudo classe CSS non valide. Et parfois, il va correspondre à d'autres pseudo-classes d'interface utilisateur aussi. Par exemple, hors de portée. Et tout cela dépend du type d'IRA, la beauté d'avoir cette pseudo-classe invalide, bien sûr, est que vous pouvez appliquer un style spécifique, deux éléments qui sont dans l'entrée. La deuxième chose qui va se produire est que si l'utilisateur essaie de fille, le navigateur va bloquer le formulaire de soumission et le navigateur affichera un message d'erreur natif. Très, très utile. Avant de passer à autre chose, je veux juste que vous sachiez qu'il s'agit plusieurs époques qui empêcheront le formulaire d'être soumis. Et nous allons regarder certains de ces plus courts, surtout quand nous regardons l'utilisation de JavaScript. Mais de toute façon, nous mettons différents types de ER est comme une mauvaise entrée à courte valeur de non-correspondance de type, plage de discordance raide
manquante, underflow, et cetera, et cetera. Il y a beaucoup de domaines différents associés à différents types d'entrées. Et lorsque ces erreurs se produisent, le navigateur ne soumettra pas le formulaire ou non. C' est donc ce qui se passe lorsqu'un élément correspond à l'état non valide. Mais l'un des plus communs. Et on l'a vu dans les cours. Quoi ? C'est vrai, C'est l'attribut requis. Et quand nous avons cet attribut requis sur l'élément de formulaire, il va correspondre à la pseudo-classe requise. Qu' est-ce que cela signifie ? Eh bien, cela signifie que le contrôle de formulaire en tant que valeur qui est vide et le message
interne va être affiché lorsque l'utilisateur essaie de soumettre le formulaire. Et bien sûr, nous savons que la pseudo-classe invalide va également correspondre. C' est assez parlant, je veux passer à l'éditeur de texte. Cordons à une entrée de tactiques à sa cible. Ils nécessitaient une pseudo-classe, l'invalide et la pseudo-classe valide. Vous verrez à quel point c'est facile. Et nous pouvons continuer avec cette conférence. Alors faisons vite ça maintenant.
4. Exemple rapide - Cours pseudo valides, invalide et requis: Comme toujours, commençons par un fichier vide. On va avoir une section en tête dans la section style. Mais pour l'instant, nous allons juste tirer notre formulaire très vite, non ? Donc, dans le corps, prenons une forme. Nous n'avons pas besoin d'un attribut d'action. Nous ne sommes pas encore inquiets de le soumettre à un serveur. Nous allons avoir un attribut label ici. Et donnez-lui juste une valeur d'attribut complète de choisir. Préférez-vous une banane ou un moment joyeux ? Non, je sais que c'est aléatoire. Je veux juste vous donner un exemple. Et puis bien sûr, le pour avoir une entrée avec un attribut de type est défini sur texte. ai eu. Et puis nous pouvons lui donner un attribut de nom de nos semblables. Et je lui donne un attribut de nom de notre genre, parce que si nous ne le faisons pas, il ne sera pas soumis au serveur. Rappelez-vous, pour que les données soient soumises au serveur, nous avons besoin de paires de valeurs de nom. Donc, le nom que nous donnons aux chaises sont comme, Nous savons que la valeur id doit correspondre à la valeur de quatre attributs de choisir. La dernière chose que je veux faire est d'ajouter un bouton de type soumis. On peut juste l'avoir, l'enregistrer, rafraîchir le navigateur. Et on y va. Nous avons littéralement nos contributions. Comme je l'ai mentionné dans la conférence, l'
une des fonctionnalités de validation HTML5 les plus simples est les attributs requis. Et pour rendre une entrée obligatoire, nous avons juste besoin d'ajouter cet attribut à l'élément, non ? Parce qu'en ce moment l'utilisateur peut soumettre ce formulaire. J' aime être ajouté à l'URL, mais il n'y a pas de valeur. Si nous voulons le rendre nécessaire, tout ce que nous avons à faire est d'ajouter l'attribut requis à cet élément d'entrée. C' est un attribut booléen. Nous n'avons pas à lui attribuer une valeur. Soit il est là, soit pas. Maintenant, si l'utilisateur tente de soumettre, le navigateur l'empêchera de le faire. Et ce qui est vraiment cool, c'est que lorsque cet attribut est défini, l'élément va correspondre à la pseudo-classe de l'interface utilisateur requise et correspondre à cela, qu'il y ait ou non une valeur. Et rappelez-vous le formulaire vin Submit, il va afficher un message d'erreur lorsque la valeur est manquante, lorsque la valeur est vide, et tandis que les valeurs vides, l'entrée va également être considérée comme non valide, correspondant à la pseudo-classe de l'interface utilisateur non valide. Donc, en ce moment, quand un utilisateur essaie de soumettre, remarquez comment les enfants de la boîte de saisie se concentrent et nous obtenons ce message d'erreur affiché par le navigateur. Permettez-moi de prouver que certaines de ces pseudo-classes fonctionnent. Tout d'abord, ce que nous pouvons faire est que nous pouvons cibler l'élément d'entrée où son état est invalide. Et cela devrait être très simple ici, deux pixels, bordure rouge solide, et c'est le point de départ par défaut. La valeur par défaut lorsque nous avons un attribut obligatoire sur un élément est qu' il va correspondre à l'état non valide parce que son attribut value est vide, n'est-ce pas ? Mais une fois que l'utilisateur commence à taper, disons qu'ils veulent une banane, ce n'est plus rouge. Aka ce n'est pas invalide et l'utilisateur annule avec le formulaire. Mais bien sûr, une fois qu'il est soumis, il revient à cet état invalide. Quelles sont les autres choses que je peux vous montrer ? Pourquoi ne pas cibler l'entrée, n'est-ce pas ? Nous, son état est invalide. Mais rappelez-vous, j'ai dit qu'il allait aussi correspondre à l'état requis. Alors comment on a ciblé ça ? Et nous pouvons donner à cela un style d'image de fond cool. On peut lui donner un gradient linéaire. Disons le rose et le vert clair. Sauvegardez ça. Alors on y va. Nous savons maintenant qu'il correspond à l'état requis et qu'il correspond à l'état non valide en même temps. Pouvez-vous voir comment le rose coule de haut en bas ? Si vous ne voulez pas cela, par exemple, avec cette méthode de gradient linéaire, nous pouvons juste dire ici à droite. Et bien sûr, ça va aller de gauche à droite. Maintenant, le rose a commencé le gradient de levage Julie se transformant en vert de gauche à droite. Et c'est juste un peu d'info. Et puis enfin, nous pouvons également cibler l'entrée, mais cette fois quand c'est l'état est valide et liste donne juste une bordure de deux pixels, vert solide. Très bien, nous gardons ça quand l'utilisateur commence à taper Banana. Pouvons-nous voir, ou peux-tu voir qu'il y a une bordure verte ? Bien sûr, c'est difficile à voir parce que nous avons aussi un contour, ce contour noir. Alors pourquoi ne pas supprimer le contour, le mettre à zéro. L' utilisateur commence à taper la banane, et nous y allons. Nous savons maintenant que c'est valide. Tu dois, être en train de profiter de ce qui est si intéressant. Et c'est tellement amusant une fois qu'il clique, comme il devient juste très intuitif, très facile de commencer à coiffer vos formes d'une manière très, très amusante. Bird de toute façon, ce sont les pseudo-classes de validation intégrées simples, mais ils sont plus. Et en particulier celle que je veux discuter avec vous maintenant. Alors revenons à la conférence.
5. L'attribut du motif: Vas-y, je t'ai dit que ce n'était pas si mal, n'est-ce pas ? Mais maintenant, je veux entrer dans une validation intégrée un peu plus complexe. Je veux maintenant regarder les attributs theta1. Et cet attribut de modèle est une autre fonctionnalité de validation très utile. Et qu'est-ce qu'il attend ? C' est vrai, il attend une expression régulière comme valeur. Qu' est-ce qu'une expression régulière ? Expressions régulières ou regex, est juste un motif qui peut être utilisé pour faire correspondre une combinaison de caractères dans des chaînes de texte. est quoi exactement les plates-formes ? Eh bien, c'est un sujet très compliqué et c'est au-delà de la portée de ce cours pour moi de l'obtenir. Gardez juste à l'esprit que chaque fournisseur de navigateur a son propre moteur regex, le morceau d'expression de wiggle du logiciel qui est capable de traiter les expressions régulières. Et tout ce que l'expression régulière essaie de faire,
c'est qu'elle essaie de faire correspondre un motif à une chaîne donnée. Alors Clyde, qu'est-ce que ce moteur d'expression régulière pol ? Eh bien, cela dépend du navigateur que vous utilisez. Donc, quand nous regardons Chrome, Chrome utilise le moteur V8 quand il exécute JavaScript. Et les développeurs ont mis tant d'efforts là-dedans, ils ont en quelque sorte ignoré la construction de leur propre code personnalisé pour les expressions régulières. C' était jusqu'à il y a quelques années. Donc maintenant Google Chrome utilise le propre moteur regex appelé boucles d'oreilles. Une autre chose que je veux vous mentionner est que tous les types d'entrée
avec un certain modèle n'ont pas besoin d'avoir les attributs de brevet spécifiés. Par exemple, nous avons vu que le type de poids d'entrée est défini sur e-mail. Dans ce cas, nous n'avons pas besoin d'écrire personnalisé theta1 RegEx. On peut si on veut, mais on n'a pas à le faire. Pourquoi ne devrions-nous pas le faire ? Parce que le navigateur ne connaît pas Baja lorsque nous utilisons l'entrée de type e-mail, navigateur utilise déjà un e-mail bien formé theta1. Bref, je voulais juste le mentionner avant de passer à autre chose, revenons-y. Comme je l'ai mentionné, Rick x sont assez complexes, alors n'avez pas l'intention de les enseigner de façon exhaustive dans ce cours. Mais je veux juste vous donner quelques exemples. Avoir une charge pour vous donner une idée de base de leur fonctionnement. Ok, donc quels sont les modèles qu'on peut spécifier ? Eh bien, oui, je vais juste trois exemples très simples. Si nous avons juste le caractère x, continuons à correspondre à un caractère. C' est que x ne doit pas être x, x, juste x. Si nous spécifions le modèle x, y, cela va correspondre à x suivi de Y. Et puis bien sûr, retrouver leur propre syntaxe. Nous pouvons utiliser en ligne pour spécifier tout. Donc, nous pouvons dire x ou y. Et cela va correspondre à un caractère, qui est x ou y. Et ils sont nombreux, beaucoup plus de possibilités et d'exemples qui sont encore couverts, mais ce qui précède ne sont que quelques exemples simples pour vous obtenir démarré. Et pendant que nous sommes sur ce sujet, pourquoi avons-nous repris cet exemple que nous avons fait plus tôt ? Et pourquoi ne pas mettre votre propre animal de compagnie un attribut là juste pour voir comment cela fonctionne avec nos pseudo-classes invalides et vérifiées. Jetons un coup d'oeil maintenant. Nous en sommes de retour à notre exemple original. Et ici, nous demandons à l'utilisateur s'il préférerait une banane ou un joyeux. Donc, je ne veux pas que l'utilisateur puisse rien écrire et soumettre cela dès maintenant. Ils peuvent le faire valoir. Alors, comment pouvons-nous faire ça ? Eh bien, dès que vous commencez à penser à un modèle, ding, ding, ding, nous pouvons penser à des expressions régulières. Donc, ici, nous sommes allés pour limiter l'écriture de l'utilisateur. Cerise. Orban honneur, les écrivains sont les seules choses que nous voulons que l'utilisateur puisse faire. Alors pourquoi ne pas faire ça ? Et débarrassons-nous du gradient. Je veux juste supprimer un peu de bruit. Nous allons juste avoir la pseudo-classe non valide et valide ici. Comment peut-on le faire ? Eh bien, tout d'abord, laissez-moi juste agrandir ça. La première chose que nous pouvons faire, bien sûr, est d'ajouter ces attributs de brevet à notre entrée de texte de type. Tout est un texte et nous savons que la valeur de cet attribut de modèle est une expression régulière. Pour qu'on puisse le faire. On pourrait dire que l'expression régulière doit être banane, cerise. Nous pourrions le faire savoureux, obtenu notre navigateur. On ne peut taper ici rien. Et on peut voir qu'il a toujours le style invalide appliqué à lui, non ? Il est supprimé, le contour. Sauvez-le, commencez à taper de l'herbe. Nous avons toujours la classe invalide. Ouais, c'est super joyeux. Nous avons toujours la perte invalide. Pourquoi c'est ça ? Oh, c'est parce que désolé. J' ai encore mis un espace. Retirons juste l'espace. On ne veut pas d'espace. Sauvez-le. Si on tape des cerises, on y va. C' est vert. Si l'utilisateur tape banane, il est vert et autorisé à soumettre. Mais il y a un problème avec cela dans le sens où l'utilisateur pourrait faire un B majuscule, mais pas dans cela ne va pas fonctionner. Alors, quelles plates-formes, vous devez être très explicite. Et ce que nous pourrions définir ici au début avant de simplement définir un petit b est un jeu de caractères et un état de caractère est juste défini dans RegEx avec les crochets. C' est fondamentalement une alternative, cette ligne droite, d'accord, donc on pourrait dire, eh bien quels caractères sont autorisés, soit un petit b ou un gros B. Et puis, bien sûr, nous ne voulons pas d'autre B. Et puis nous pouvons faire de même avec le C. Donc, nous définissons un caractère. L' utilisateur peut taper soit un petit c pour grand C. Maintenant, si nous sauvegardons cela et que l'utilisateur tape cherry avec un C majuscule, il va être valide. C' est génial ? C' est facile, non ? Ce n'est pas du tout un code difficile. Nous venons d'inclure l'attribut de brevet. Nous avons maintenant implémenté notre propre validation intégrée côté client. Qui est amusant, n'est-ce pas ? Si bien joué ? J' ai eu beaucoup de, beaucoup de plaisir dans cette conférence en regardant Bolt en validation. Rappelez-vous les deux types de validation en bolt et JavaScript ? Nous avons examiné les plus courants dans les deux types d'annotation dans cette conférence. Mais maintenant, qu'avons-nous commencé à sauter dans un peu de JavaScript un, la validation hors script fonctionne. Rendez-vous à la prochaine conférence.
6. Validation de JavaScript: Je suis excité par cette conférence parce que dans cette conférence, nous allons passer de validation intégrée
HTML5 à la validation JavaScript. Et par validation JavaScript, je veux dire simplement utiliser javascript pour valider votre formulaire. Et laissez-moi être clair, vous devez utiliser JavaScript si vous voulez prendre le contrôle de l'apparence et de la sensation des messages d'erreur
natifs ou pour traiter les navigateurs hérités qui ne prennent pas en charge la validation de formulaire intégrée HTML. Et si vous ne savez pas ce qu'est JavaScript ou comment il fonctionne, où il vient. Alors s'il vous plaît vérifier mes cercles de grand-mère JavaScript complets. Mais ne vous inquiétez pas, ce sera assez simple dans cette conférence. Donc, même si vous ne savez pas comment JavaScript fonctionne, vous devriez être capable de suivre, d'accord ? Ok, alors comment ça marche ? Eh bien avec les formulaires, il est courant d'utiliser JavaScript avec l'API de validation de contrainte. Mais ne vous inquiétez pas, cela est fourni pour déranger le navigateur. La plupart des navigateurs prennent aujourd'hui en charge l'API de validation de contrainte. Vous pouvez le voir comme un siège de méthodes et propriétés qui nous sont données automatiquement par le navigateur. Et il y a beaucoup d'API Web différentes disponibles pour nous par le navigateur, comme l'API Fetch quand nous avons affaire à l'âge. Qu' en est-il de l'API WebSockets ? Et le DOM ? Donc, cette API de validation de contrainte est juste l'un des nombreux, ou IPO. Comment pouvons-nous utiliser cette API de validation de contrainte ? Serons-nous limité dans son utilisation sur un élément de formulaire interfaces Dom. Donc, ce que je veux dire par ceci est que nous ne pouvons utiliser l'API de contrainte que sur les interfaces suivantes. Et chaque interface représente un élément différent. Par exemple, l'interface de l'élément
de bouton HTML, représente bien sûr l'élément de brevet et ainsi de suite et ainsi de suite. C'est assez intuitif. Donc, ce qui est vraiment cool, mes chers étudiants, c'est que lorsque nous traitons de ces éléments, avec l'élément d'entrée, par
exemple, nous avons accès à l'API de validation de contrainte automatiquement. On n'a rien à faire aussi. Ok, étui de planeur, donc nous avons accès à l'API de validation des contraintes. Mais qu'est-ce que cela signifie dans la pratique ? Qu' est-ce que ça nous donne ? Eh bien, cela nous donne certaines propriétés et méthodes automatiquement. Par exemple, nous pouvons accéder à la propriété de message de validation. Qu' est-ce que ça ? Eh bien, c'est une propriété en lecture seule qui renvoie une validité. En d'autres termes, il va retourner le message d'erreur décrivant les contraintes de validation que le contrôle ne satisfait pas. Si la valeur de l'élément satisfait toutes ses contraintes, ok, c'est valide, alors cela va juste retourner une chaîne vide. Nous avons aussi cet objet de validité. C' est vraiment utile. Et cela renvoie un objet d'état de validité qui contient plusieurs propriétés décrivant l'état de validité de l'élément réel. Quel type de propriétés pouvons-nous accéder, où nous pouvons accéder à la propriété de non-correspondance de modèle qui renvoie true si la valeur ne
correspond pas à l'attribut de motif spécifié et qu'elle va correspondre false si elle correspond. Et rappelez-vous les droits que la valeur ne correspond pas à l'attribut pattern, nous allons également correspondre à la pseudo-classe CSS non valide. Donc beaucoup d'entre eux vont travailler en tandem. Donc, permettez-moi de dire que encore une fois, cette incompatibilité de modèle retournera vrai si la valeur ne correspond pas à l'attribut de motif spécifié, nous allons obtenir cette ère de non-correspondance de modèle et le formulaire sera empêché d'être soumis au serveur. Mais en même temps, parce que les modèles ne sont pas appariés, nous savons que la pseudo classe CSS invalide est également en jeu. C' est assez intéressant. Et une autre propriété de cet objet de validité est trop longue. Propriété qui renvoie true si la valeur est plus longue que la longueur maximale spécifiée par l'attribut longueur maximale. Encore une fois, si c'est vrai, les éléments vont également correspondre à la pseudo classe CSS non valide. Très semblable à trop court. Cela va retourner true si la valeur est plus courte que la longueur minimale spécifiée par l'attribut hommes length et range overflow, range underflow day. Très similaire. Ils vont retourner true si la valeur est supérieure à la valeur maximale spécifiée par l'attribut max. Ou bien sûr, si nous avons affaire à la plage et que le liquide va retourner vrai si la valeur est inférieure au minimum spécifié par l'attribut men. Mais ce qui est intéressant et comment ces messages d'erreur de débordement de
plage et de sous-flux de plage est que nous allons avoir quelques pseudo-classes qui sont appariées dans vous devinez lesquelles utiliseront les pseudo-classes invalides qui vont s'appliquer. Mais maintenant, nous avons aussi la pseudo-classe hors de portée qui vont s'appliquer. Assez intéressant, non ? Une autre propriété de cet objet de validité est cette propriété de non-correspondance de type ou message d'erreur. Cela va retourner true si la valeur n'est pas dans la syntaxe requise. Par exemple, si nous avons une entrée avec un attribut de type à asseoir, à e-mail ou à URL, et que l'utilisateur ne tape pas dans le bon format si cela est valide, si elle renvoie true, nous savons que la pseudo classe CSS non valide est également va postuler. Et puis nous avons cette propriété valide qui renvoie true si l'élément répond à toutes ses contraintes de validation et est donc considéré comme valide. Donc, quand ceux valides sont vrais, nous savons que les pseudo-classes CSS valides. Nous allons postuler. Et dernier mais non le moindre, que se passe-t-il lorsque nous avons cet attribut requis sur un élément sera dans ce cas, nous avons cette propriété manquante de valeur, et le cou va retourner vrai si l'élément a un qu'aucune valeur n'a été spécifiée. Crew, je la connais, je sais que c'est une tonne, non ? C' est très, très utile. Mais vous me connaissez, les actions parlent plus fort que les mots. Alors pourquoi je n'irais pas vite à la console. Regardons un exemple rapide. Laissez-moi accéder à cet objet d'état de validité et vous montrer ses propriétés. Espérons que cela deviendra plus intuitif pour vous. Jetons un coup d'oeil. sommes donc un exemple très, très simple. Je viens d'envelopper et d'entrer des poids, type de ville prend une forme. Et bien sûr, nous avons un modèle de types de MET, qui est la valeur par défaut en passant. Donc on n'a même pas besoin de ça. Et bien sûr en ce moment, l'utilisateur peut taper n'importe quoi et soumettre n'importe quoi. n'y a pas de contraintes de validation. Mais je veux vous montrer comment fonctionne cette API de validation de contrainte. Rappelez-vous qu'il ne s'applique qu'à certaines interfaces. Et l'une de ces interfaces et s'applique à était l'interface d'élément d'entrée HTML, qui nous donne accès à cette API sur l'élément d'entrée directement. Alors, comment ça marche ? Rappelez-vous les deux types de validation côté client. Nous avons eu la validation intégrée, qui est juste HTML5. Mais nous avons aussi le deuxième type et qui utilise JavaScript. Et pour utiliser JavaScript, nous devons écrire tout ce que les balises de script. D'ici. Qu' est-ce qu'on fait ? Eh bien, nous devons saisir cet élément d'entrée. Je ne veux pas pour accéder à l'API de validation de contrainte. Alors, comment saisons-nous cette entrée ? Nous allons juste le définir dans une variable, tous les textes. Et commençons par accéder à notre objet document. Ici, nous pouvons obtenir des éléments par nom de balise. Le nom de la balise que nous voulons obtenir est important, non ? Et cela renvoie une collection si vous avez fait mon noyau DOM. Nous accédons donc au premier élément de la collection, qui est cet élément d'entrée lui-même. Et ce qui est vraiment cool. Ce qui est vraiment cool, c'est qu'on l'a fait à peu près. Vous savez quoi, au lieu d'appeler un texte, laissez-moi l'appeler saisie de texte parce que c'est ce que c'est. Et ce que nous pouvons faire maintenant, c'est que nous pouvons accéder directement à cette API de validation de contrainte. On n'a rien à faire d'autre. C' est vraiment, vraiment cool. Pour que nous puissions saisir notre saisie de texte. Et quelles sont quelques-unes des propriétés dont j'ai parlé ? Eh bien, celui qui est très important pour nous, c'est que les objets de validité sont importants pour nous. Et pour le voir, pourquoi ne pas simplement consigner l'écran par console. C' est tout ce qu'on a à faire. Allez à la spécification du navigateur, ce document. Allons à la console. Et voici ces objets d'état de validité. À quel point ce sont les étudiants de Medea ? Oui, des droits très, très cool. Et ce sont quelques-unes des propriétés
de messages internes qui sont affichées dans cet objet d'état de capacité, n'est-ce pas ? J' ai parlé de certaines de ces inadéquation
trop longue, trop courte. Sa propriété valide est définie sur true maintenant car elle n'a pas les attributs requis dessus. Pourquoi avons-nous mis l'attribut requis dessus ? Allons dans nos entrées hébergées attribut requis ici. Maintenant, nous avons encore cet objet multi-états, mais maintenant il est valide. La propriété est définie sur false. Ce n'est plus vrai. Et bien sûr, nous avons aussi cette valeur de propriété manquante. Et rappelez-vous que renvoie true si l'élément a un attribut requis que aucune valeur. Tellement amusant, n'est-ce pas ? Et c'est tout ce que je veux te montrer pour l'instant. Je voulais juste te montrer comment voir physiquement ces validities. Objets, dessinez-le. Maintenant, nous ne discutons encore que des propriétés des contraintes. En outre, API est juste un autre que je veux mentionner à vous et Lina veulent passer à un certain important make it. Donc ce saut dans la région.
7. Validation JavaScript - Objets: D' accord. Je t'ai dit que ce n'était pas si difficile, non ? Et j'espère que ça deviendra plus intuitif. Allons passer à autre chose. Parce que ce ne sont pas les seules propriétés disponibles pour nous par l'API de validation de contrainte. Nous en avons d'autres. Par exemple, nous avons également ceci, nous allons valider correctement. Et cela va valider la propriété est fondamentalement juste nous dire si l'élément concerné, si le contrôle de formulaire concerné sera validé lorsque le formulaire est soumis. En d'autres termes, c'est juste une propriété qui nous dit si une entrée peut ou non être validée. C' est vrai si elle peut être validée et false si ce n'est pas le cas, Quand l'approvisionnement serait-il une fois que les validateurs de laine vont être faux comme si l'élément d'entrée est désactivé. Rappelez-vous que nous les avons regardés avant. Quand il est désactivé, il ne va pas être validé vent soumis au serveur, est-ce que cela a du sens ? Nous avons donc vraiment examiné certaines propriétés sur l'API de validation de contrainte. Et je veux passer à autre chose maintenant. Je veux regarder pas les propriétés, mais je veux regarder certaines méthodes disponibles pour nous. Les méthodes, en passant, sont comme une fonction. C' est quelque chose qui est fait. C'est un mot qui fait. C' est comme un verbe, alors que les propriétés ressemblent plus à un bras. La première méthode que je veux discuter est cette méthode de validité de poulet renvoie true si la valeur de l'élément n'a pas de problèmes de validité. Et bien sûr, ça va retourner faux. Sinon, si l'élément n'est pas valide, cette méthode va également déclencher un événement non valide sur l'élément lui-même. Nous avons aussi d'autres méthodes. Nous avons également cette méthode de validité personnalisée sit. Et l'argument qu'il prend est juste le message. Il vous permet de spécifier un message d'erreur personnalisé à l'élément. C' est génial ? Et parce que c'est tellement génial, je veux en discuter un peu plus sur pourquoi en a discuté plus ? Parce que l'utilisation de cette méthode, la méthode de validité personnalisée Sixth est
l'un des cas d'utilisation les plus courants de l'API de validation de contrainte. Comme je l'ai mentionné, il vous permet juste d'utiliser JavaScript pour définir un échec de validation et un message d'erreur personnalisé. Parce que nous allons y faire face, messages d'erreur
automatisés du navigateur ont leurs inconvénients. Ils ne sont pas très faciles à comprendre. Parfois, ils ne vous disent pas assez d'informations. C' est beaucoup plus agréable de nous asseoir. Et oui, tu l'as deviné. Saute dans l'éditeur de texte et regardons un exemple d' utilisation
de la méthode de validité personnalisée SETT. J' ai hâte de voir maintenant.
8. Méthode setCustomValidity - Exemple: D' accord. D'accord. D'accord. Maintenant, je veux parler de cette méthode de validité personnalisée sit. C' est une méthode si importante. Ensuite, je voudrais regarder quelques exemples. Et c'est l'exemple que nous avons examiné précédemment. Nous avons juste eu un type de texte d'entrée. C' est tout ce qu'on avait. Et qu'est-ce que nous venons de voir comment cela fonctionne la validité personnalisée sur ce site-là. Donc en ce moment, nous allons supprimer nécessaire. Donc, il n'y a pas de contrainte ou de validation intégrée. Et maintenant ce que je veux faire, c'est que je veux accéder à cette méthode. Nous accédons donc à notre saisie de texte ici. Nous pouvons quitter l'API de validation de contrainte directement. On n'a rien à faire de spécial. Mais cette fois, je veux accéder admis. La méthode est appelée validité personnalisée sit. Et je veux que vous remarquiez quelque chose quand je commencerai à faire ça, je vais taper notre erreur en disant que c'est une époque qui ne s'arrête jamais. Et si nous sauvegardons cela et nous obtenons notre formulaire, si maintenant l'utilisateur essaie de soumettre, nous allons obtenir une erreur. Parce que cela est fondamentalement dire au navigateur que cela prend le champ d'entrée est maintenant dans l'état d'erreur et net. Nous voulons montrer un message d'erreur et bien sûr qu'il ne s'arrête jamais, non ? L' utilisateur n'est pas en mesure de soumettre ce formulaire. C' est donc un aspect important de l'utilisation de cette méthode. Lorsque vous l'utilisez, il va rendre cette entrée ou n'importe quel élément que vous utilisez ou le mettez, cela va la rendre invalide. Et je peux vous le prouver ici. Pourquoi ne pas styliser la pseudo-classe invalide. Prenons notre contribution. Stylisez l'état invalide et nous pouvons juste lui donner une bordure rouge, bordure, un pixel, rouge solide. Et maintenant, vous pouvez voir que l'état par défaut est invalide car nous avons défini ce message d'erreur de validité personnalisé, nous disons fondamentalement au navigateur que ce n'est pas valide. Alors le client, comment faire pour qu'il ne soit pas invalide ? Will, si vous asseyez la valeur pour terminer la chaîne vide, il est à nouveau valide. Donc, si maintenant nous accédons à notre variable d'entrée de texte à nouveau, qui est cet élément d'entrée lui-même, nous pouvons accéder à la méthode de validité personnalisée de la ville à nouveau, mais cette fois il suffit de le définir à une chaîne vide. Si nous faisons cela, sauvegardez, il est maintenant valide. On n'a plus cette erreur. L' utilisateur ne peut pas taper et soumettre. Ok, Clyde, je comprends, je comprends. Mais comment l'utiliser concrètement dans un sens pratique ? Eh bien, pourquoi avons-nous regardé un exemple en ce moment, nous allons changer cette entrée de type, prend une entrée de type e-mail. Et s'il y a une époque dans le format de cet e-mail, pourquoi n'affichons-nous pas notre propre message d'erreur personnalisé ? Comme c'est génial, ça va être tellement amusant. Le Cp peut lui donner un coup d'envoi. Alors arrêtez la vidéo, voyez si vous pouvez l'
essayer, puis découpons ensemble. Tu lui as donné un coup de pouce ? Je l'espère. Mais si ce n'est pas le cas, ne vous inquiétez pas, faisons-le maintenant ensemble. La première chose que je veux faire est que je veux supprimer cette entrée de texte de type, ok ? Et nous voulons remplacer ces entrées par des entrées de type e-mail. C' est ce qu'on veut faire. On peut lui donner un nom de mâle. On peut lui donner une carte d'identité de mâle. Et parce que nous lui donnons une carte d'identité de mâle alors que nous spécifions ici l'étiquette de mâle. Et nous pouvons dire, s'il vous plaît donnez-moi une adresse e-mail valide, n'est-ce pas ? Très, très simple. Donc maintenant, nous avons un e-mail, mais si l'utilisateur essaie de soumettre simplement du texte aléatoire, nous obtenons ce message d'erreur par le navigateur, mais peut-être que nous voulons notre propre message d'erreur personnalisé. On n'aime pas le navigateur. Comment on le fait ? Eh bien, laissez-nous maintenant coder du JavaScript. Ce n'est plus une entrée de texte, c'est juste la variable finale comme une entrée d'e-mail. Supprimons tout le reste, la suppression du bruit. Donc nous y voilà. Nous avons notre élément d'entrée de courrier électronique. Ce que nous pouvons faire maintenant, c'est que nous pouvons ajouter un écouteur d'événement. Nous pouvons saisir notre entrée par e-mail. Existe la méthode add event Listener. L' événement que nous voulons écouter est un événement d'entrée. Donc, chaque fois que les types d'utilisateur de caractère, quand cela arrive, que voulons-nous faire ? Eh bien, nous voulons exécuter une fonction de rappel. Désolé, j'ai trop de crochets. Ils ont besoin d'un support dehors. On y va. Et que voulons-nous se passer dans notre fonction de rappel ? Eh bien, nous voulons dire si c'est vrai, sur cette entrée email, la non-correspondance de type est définie sur true, alors nous savons qu'il y a un problème, non ? Parce qu'en arrière-plan lorsque nous spécifions le type d'e-mail, nous savons qu'il y a une expression régulière construite par le navigateur dans ce cas. Et nous savons en net pas répondre que la propriété de type inadéquation. Et rappelez-vous avec leurs propriétés situées, C'est vrai. Il est situé sur l'objet d'état de validité. On ne dit jamais vrai. Nous savons qu'il y a une erreur. Et par conséquent, nous voulons afficher notre propre message d'erreur personnalisé. Si c'est faux, nous pouvons simplement asseoir cette méthode de validité personnalisée à une chaîne vide et donc le navigateur le laissera soumettre au serveur. Donc, si sur cette entrée e-mail, nous accédons à son objet d'état de validité sur là. Rappelez-vous qu'il y avait une propriété de non-correspondance de type. Si la dette est définie sur true, alors nous voulons ce qu'ils suivent, nous voulons accéder à cette méthode de validité personnalisée sit. Ne vous inquiétez pas. Sortons. Nous accédons à notre entrée par e-mail. Et ici, nous avons la validité du client CID. Et on peut juste dire, je m'attends à une vraie adresse e-mail, s'il vous plaît. Ok, alors on y va. On l'a littéralement fait. Et si vous connaissez JavaScript, une fois que si MIT, nous avons aussi une déclaration else, à droite, parce que si la non-correspondance du type de validité de l'e-mail est définie sur false, alors nous voulons que cette autre soit exécutée. Et qu'est-ce qu'on veut arriver ici ? Will bien sûr, nous voulons définir ce message de validité personnalisé ensemble à une industrie. Et c'est pour ça que je t'ai montré l'exemple précédent, non ? Où nous devions du silicium dans la chaîne pour qu'il soit valide. Donc maintenant, si l'utilisateur tape du texte aléatoire, nous cliquons sur Soumettre, il y a notre propre message d'erreur personnalisé. Comme c'est génial. Mais bien sûr, si l'utilisateur types d'adresse e-mail valide et je vais cliquer sur Soumettre, nous sommes tous prêts à aller. Est-ce que ça a du sens ? Je ne veux pas que tu te perdes dans les moindres détails. Tout ce que nous avons fait, c'est que nous avons ajouté notre propre écouteur d'événement sur cette entrée de courriel. L' événement que nous écoutons est un événement d'entrée chaque fois que cela se déclenche, nous exécutons cette instruction if else, je peux réellement vous prouver ce qui se passe. Peut-être que cela aidera si vous mettez peu clair. Mais ce que nous pouvons faire, c'est chaque fois que cet événement d'entrée est déclenché, qu'avons-nous connecté à la console ? Validité de cette entrée e-mail, objet d'état. Ok, déconnectons-nous de la console. Allons au navigateur. Ouvrez la console. Dactylographions la lettre a. On a l'état de validité. Si nous ouvrons cela, nous avons cette propriété de non-correspondance de type. Et une incompatibilité de type est actuellement définie sur true. Et c'est réglé sur true parce que nous avons donné ce type d'e-mail d'entrée et parce qu'il s'agit d'un type d'e-mail, il y a une regex qu'il doit être dans le bon format. Si nous l'ouvrons maintenant,
cetteincompatibilité de type est définie sur false et parce que c'est elle sur false,
nous voulons que l'utilisateur puisse soumettre le formulaire. Si nous l'ouvrons maintenant,
cette incompatibilité de type est définie sur false et parce que c'est elle sur false, On y va. L' utilisateur peut le faire, monsieur, comme c'est génial. J' espère que ça a du sens. J' espère que vous avez fait attention parce que dans la prochaine conférence, je veux vous donner un défi et je veux voir si vous pouvez trouver comment le faire. Super excité et je te verrai à la prochaine conférence.
9. Introduction du défi - SetCustomValidity: Bienvenue à ce défi très cool, où je veux que vous essayez d'utiliser cette API de validation de contrainte ou par ISAF. Et je serai honnête avec toi, je ne m'attends pas à ce que tu trouves ça correct, mais donne-le un coup, essaie d'aller aussi loin que tu peux aller. Qu' est-ce que je veux que tu fasses ? Quel est le défi ? Laisse-moi zoomer légèrement. Je veux juste créer un champ de saisie de texte avec un utilisateur doit entrer le nom d'utilisateur, mais le nom d'utilisateur doit avoir au moins une lettre minuscule et majuscule. Si l'utilisateur essaie juste de le soumettre tel quel sans rien taper, je veux un message d'erreur personnalisé,
idiot, ne crois pas lié à quoi que ce soit. Si l'utilisateur commence à taper des lettres minuscules et tente de soumettre, nous obtenons un autre message d'erreur personnalisé sont géniaux. Mais bien sûr, lorsque l'utilisateur a maintenant une lettre majuscule et cliquez sur Soumettre, le navigateur nous permet de passer par un exemple très simple. Tu sais quoi ? Laisse-moi te donner un indice. Et puis un indice va être l'expression régulière qui sont utilisés, aka la valeur de l'attribut de brevet. Laisse-moi te montrer à quoi ça ressemble. Alors, voilà. Je veux que vous utilisiez cette valeur dans les attributs de motif. Laisse-moi te l'expliquer rapidement. Tout d'abord, nous avons les parenthèses, les deux parenthèses, qui sont deux ensembles de groupes. On commence chaque groupe avec un point d'interrogation, signe égal. Ceci est juste connu et RegEx comme un regard positif. Tout ce que j'essaie de réaliser ici, comme j'essaie de le dire, nous pouvons soit taper minuscules et majuscules, soit nous pouvons taper majuscules et minuscules, l'ordre n'a pas nécessairement d'importance. La prochaine chose que vous remarquerez, c'est que nous avons un arrêt complet. Arrêt complet correspond à n'importe quel caractère. Ensuite, vous mettez un astérix. Les astérisques correspondent au caractère précédent 0 fois ou plus. Et puis nous avons les crochets, que nous avons déjà vu dans ce cours plusieurs fois, avec les caractères a2. Fondamentalement, il est juste permettre une gamme de caractères minuscules entre un. et dit. J' essaie de dire dans ce premier groupe est que l'utilisateur peut taper autant de caractères qu'ils sont passés entre
a et z et maintenant terminer ce modèle entier. Par un quantificateur. J' ai ces accolades bouclés, ce qui dit essentiellement au RegEx de correspondre
aux groupes précédents au moins une fois et au plus 50 fois. C' est tout ce que ça veut dire. Donc c'est mon RegEx qui est évident. J' ai utilisé n'hésitez pas à copier cela, à le coller, puis à essayer de comprendre comment j'ai fait cette solution. Je vais vous donner un indice sur ce type d'entrée. Je vais écouter l'événement non valide. Rappelez-vous que j'ai mentionné que ce type de propriété de non-correspondance déclenchera un événement non valide lorsque ce qui est inter ne correspond pas au champ de modèle. C' est pourquoi j'écoute un événement non valide. Quand un événement valide se déclenche, bien sûr, je veux vérifier si la valeur n'est rien. Parce que quand ce n'est rien, je veux juste que ce message d'erreur stupide, mais vous n'avez rien tapé. Marimba, essayez de soumettre maintenant, je veux ce message d'erreur. Nous devons donc vérifier si la valeur réelle est une chaîne vide. Si ce n'est pas une chaîne vide, mais nous y arrivons toujours, alors l'ère valide. Nous savons alors qu'il n'y a pas eu au moins une lettre majuscule et une lettre minuscule. Par exemple, nous savons que cela va se produire et nous devons leur dire qu'ils ont besoin d'une majuscule et d'une majuscule qui, sur beaucoup de terrain, vont voir jusqu'où vous pouvez aller, et je vous verrai dans la vidéo de la solution.
10. Solution du défi - SetCustomValidity: Tu lui as donné un coup de pouce ? Je l'espère. Je l'espère, mais ne vous inquiétez pas, il n'a pas tout à fait compris. C' est un peu délicat et il y a une nuance très délicate lorsque vous travaillez avec l'API de validation de contrainte. Donc je vais vous montrer comment nous le résolvons. Avant de le faire, il a notre HTML. Nous avons une étiquette, qui demande juste le nom d'utilisateur. Et bien sûr, nous avons notre type de texte d'entrée. Nous avons notre attribut acquis le jour. Et ils sont le modèle, la regex dont nous avons parlé dans la vidéo d'introduction. Très, très simple. Et si nous allons au navigateur, c'est à ça que ça ressemble. Mais en ce moment, l'utilisateur peut, évidemment les États-Unis seront empêchés de soumettre le formulaire. Nous avons un message d'erreur par défaut que nous voulons
changer et l'utilisation et juste taper n'importe quoi. Oh, bien sûr, il estime le gréement. Plus petite casse, majuscule, puis l'utilisateur peut soumettre. Mais nous voulons nos propres messages d'erreur personnalisés. Comment ça marche ? Eh bien, comme vous le savez, nous devons tout envelopper dans des balises de script. La première chose que nous voulons faire est que nous voulons accéder à cette API de validation de contrainte. Pour cela, nous devons travailler avec une interface. Celui avec lequel nous allons travailler ici est cet élément d'entrée. Alors attrapons-le. Définissons une variable appelée entrées de nom. Et nous pouvons accéder à notre sélecteur de requête de documents, et nous voulons interroger sélectionner nos éléments d'entrée. C' est vraiment, vraiment aussi simple que ça. C' est la première étape terminée. Maintenant, ce que je veux faire, c'est que je veux accéder à cette variable, alias l'élément d'entrée. Et nous voulons ajouter notre propre écouteur d'événement. Et je t'ai donné un indice à neuf. Je veux écouter les invalides. Et l'événement non valide va être déclenché chaque fois la valeur de l'entrée ne répond pas à ces droits de brevet. En outre, nous allons obtenir cet événement non valide lorsqu'ils sont requis valeur spécifiée. Mais bien sûr, il n'y a pas de valeur associée à cette entrée. Alors, quand cet événement est déclenché, que voulons-nous arriver ? Eh bien, nous voulons exécuter, je vais fonction de rappel. Allons aborder le premier problème. Et le premier problème est que si rien n'est entré dans la boîte de saisie, eh bien, dans ce cas, nous savons que je nommerai l'entrée va avoir une valeur. Et cette valeur va être une chaîne vide, non ? Ça ne sera rien. Et si cela se produit, si c'est vrai, alors nous voulons définir notre propre message d'erreur personnalisé. Nous savons déjà comment le faire. Nous pouvons accéder à tous les éléments. Et maintenant, nous utilisons l'API de validation de contrainte, car nous pouvons accéder directement au message de validité personnalisé de siège. On peut juste dire Bali stupide. Tu n'as rien enseigné. Les rats et nous pouvons sauver ça. Allons dans le navigateur et goûté le navigateur transmettre. Et voilà, nous avons notre propre message d'erreur personnalisé. Mais vous remarquerez si maintenant l'utilisateur tape des caractères et tente de soumettre, nous obtenons toujours ce message d'erreur. Parce que rappelez-vous que j'ai dit une fois que nous utilisons la méthode de validité personnalisée sig, nous disons au navigateur que cet élément est invalide indépendamment du fait qu'il n'est plus invalide. Et c'est la légère nuance dont je te parlais tout à l'heure. Mais de toute façon, on va résoudre ça sous peu. Nous avons traité le premier problème. Nous, nous obtenons un événement non valide et l'entrée de nom n'a pas de valeur. Nous avons donc traité ce scénario. Maintenant, nous allons nous occuper du scénario des Knicks. Donc, quand nous atteignons ce bloc else, nous savons que a, nous avons un événement non valide, et B, nous savons que l'utilisateur a tapé des caractères. Donc, encore une fois, définissons notre propre méthode de validité du siège de message d'erreur personnalisé. Et ici, nous pouvons dire que les noms d'utilisateur doivent contenir au moins une lettre majuscule et une lettre minuscule. Essaie encore. Alors sauvegardons ça. Allons au navigateur et testons ce pourri. L' utilisateur commence à taper des clics, soumettre, nous obtenons notre propre intermédiaire personnalisé. Très, très cool. Mais vous remarquerez maintenant que nous avons un problème parce que si l'utilisateur tape une majuscule, nous avons
donc une majuscule et une minuscule. Si l'utilisateur soumet, nous allons être dans cet état perpétuel. Nous vivons toujours une époque. Rappelez-vous, c'est parce que nous avons utilisé la méthode de validité personnalisée SEC, qui indique au navigateur que cette boîte de saisie sera toujours invalide. Comment on l'arrête ? Nous nous souvenons que nous devons définir le défaut de validité personnalisé. Un message à une chaîne vide, et quand il s'agit d'une chaîne vide, il sera valide. Tu te souviens de ça ? Mais on ne peut pas le voir. Vous savez, si nous regardons notre code, nous ne pouvons pas définir le message de validité personnalisé défini sur une chaîne vide ici parce que c'est quand nous avons affaire à une ère valide interne. Donc ce qu'on doit faire, et c'est la légère nuance ou l'immobilisation, non ? Nous devons accéder à notre entrée de nom, ajouter un autre écouteur d'événement. Et les auditeurs de cet événement vont juste écouter l'entrée, n'est-ce pas ? Chaque fois qu'un personnage est tapé, je veux écouter le CV et nous voulons accéder à notre entrée de nom. Et cette fois, je veux m'asseoir à la validité personnalisée à une chaîne vide. Tout ce que je veux faire et pour prouver que cela fonctionne, allons au navigateur. L' utilisateur ne tape rien. C' est un message d'erreur, commence à taper. Faisons un sommet des administrateurs D. Nous sommes autorisés à le faire si l'utilisateur tape simplement en minuscules et cliquez sur Soumettre, nous obtenons un message d'erreur personnalisé. Mais avez-vous remarqué qu'il y avait une idée de problème, les étudiants ? Tu l'as remarqué ? C' était très, très léger, mais vous l'avez peut-être ramassé et nous savons que la première étape fonctionne. Donc Lee croyait pas tapé quoi que ce soit, mais si maintenant les types d'utilisateur de caractère, un coup d'oeil que nous obtenons le message d'erreur affiché par le navigateur. Nous n'obtenons pas notre message d'erreur personnalisé. En fait, nous ne recevrons notre message client que lorsque l'utilisateur clique sur Soumettre. Parce que ce message d'erreur non valide est émis uniquement lorsque les soumissionnaires sont émis et
ce n'est qu'alors que nos messages d'erreur personnalisés s'appliquent. On ne veut pas que ça arrive. Donc à chaque fois qu'un personnage est pressé, non ? En d'autres termes, chaque fois qu'un événement d'entrée est déclenché, nous voulons déclencher une autre méthode, notre API de validation de contrainte, où vous voulez exécuter la minute de validité de poussin, car si c'est faux, l' événement non valide va être déclenché et notre code s'exécutera. Donc, si nous faisons cela à chaque itération, cela devrait résoudre notre problème. Rafraîchissons le navigateur. Ok, Nous pouvons soumettre stupide croire pas lié à quoi que ce soit, mais si maintenant les types d'utilisateur de caractère, un livre, comment génial est que nous obtenons notre propre message d'erreur personnalisé. Et bien sûr, cela va arriver jusqu'à ce que nous puissions appuyer à nouveau sur Soumettre. Ça va arriver jusqu'à ce que nous ayons un capital. On y va. Et si nous soumettons maintenant, nous avons permis de le faire. L' utilisateur peut juste faire une majuscule D. Faisons juste des majuscules. Ça ne marche pas, ça ne marche pas. Mais dès que l'utilisateur va ensuite en minuscules, nous pouvons maintenant soumettre. Je sais, je sais que cela peut être assez déroutant, mais nous allons juste sauter au code est vraiment assez intuitif une fois que vous comprenez ce qui se passe. Si nous utilisons la méthode de validité personnalisée SETT et que nous écrivons notre propre message personnalisé, nous sommes fondamentalement dans un état perpétuel d'une époque, nous disons au navigateur que l'entrée est état
invalide et notre message d'erreur personnalisé devrait être affiché. C' est pourquoi nous ne pouvions pas simplement compter sur notre seul bloc de code ici en écoutant l'événement non valide, nous avons dû créer un autre type d'événement que nous écoutons pour net est chaque fois que les types d'utilisateur de caractère. Commençons par là. Nous savons que nous faisons deux choses lorsque cet événement d'entrée est déclenché. Laissez-moi le dire d'une autre façon. Chaque fois que l'utilisateur types de personnage, nous faisons deux choses. Premièrement, nous commençons par dire, Hey, cherchons la valeur des méthodes de validité personnalisées à une chaîne vide. En d'autres termes, commençons par dire que nous sommes dans un état valide. Je sais que ça a l'air étrange, mais écoute-moi. La prochaine chose que nous faisons, c'est qu'on déclenche cette méthode de validité de nana. Et rappelez-vous dans la conférence que nous discutons de cela. Si tout va bien sur cette entrée, true est retourné et rien d'autre ne se passe. Par conséquent, le navigateur soumettra le formulaire. Mais s'il y a une erreur, alors nous savons que cette méthode de vérification de validité va déclencher un événement valide. Et dans ce cas, notre prochain bloc de code entier capturera l'ensemble du processus. Et c'est pourquoi il montre soit le message d'erreur à l'utilisateur stupide, croyez ne rien tapé quand il s'agit d'une chaîne vide. Alternativement, dans l'instruction else, si l'utilisateur a tapé des caractères, mais nous obtenons toujours cette ère invalide. On a un autre message. Les noms d'utilisateur doivent contenir au moins une lettre majuscule et une lettre minuscule. Essayez à nouveau, puis nous recommençons. Donc, disons que l'utilisateur tape une minuscule et une majuscule. Dans ce cas, nous nettons les types utilisateur en majuscules, ce premier bloc de code va s'appliquer car il s'agit d'un événement d'entrée, vous allez le définir sur valide. Et puis la méthode de vérification de validité va retourner true. Et c'est pourquoi nous sommes autorisés à soumettre le formulaire. Je sais que cela peut être assez complexe, mais vraiment passer par là à nouveau, passer par cette conférence quelques fois, assurez-vous que vous comprenez que cela va vraiment vous aider sur la piste. Et une fois que tu l'as vraiment, c'est vraiment pas vrai. Bref, j'espère que tu t'es bien amusé dans cette conférence. Je sais que je l'ai fait, mais continuons. Rendez-vous à la prochaine conférence.
11. Cours Outro: C' était un cours amusant, non. Nous venons d'apprendre à propos de la validation côté client. Les deux types sont la validation intégrée et la validation JavaScript. Nous avons utilisé une méthode de validité personnalisée sit afin d'écrire nos propres messages d'erreur. Comme c'est amusant. Et vous pouvez commencer à voir à quel point la validation est importante, non ? Et ce n'est pas si difficile à mettre en œuvre. Nous devons juste y réfléchir et vous avez juste à connaître un peu de HTML et JavaScript et peut-être un peu de mal RIG si vous voulez obtenir un peu plus cuisiner ensemble. Mais de toute façon, on a fait un long chemin. Et rappelez-vous, je n'arrête pas de dire que les validations côté client seulement une pièce au puzzle. Vous devez également effectuer une validation côté serveur. Et cela m'amène à un autre sujet. Et c'est ainsi que vous configurez un serveur ? Persée forme fille. Donc, dans le prochain cours, je veux commencer à parler de service, d'un appel. Attends, et j'espère te voir bientôt. Adios.
CM Code_Zone, !false | funny, because its true
