HTML5 utilise une contrainte pour vérifier l'API pour vérifier l'instance de code des données d'entrée du formulaire

HTML5 a une grande optimisation des formes, qu'il s'agisse de sémantique, de petits composants ou de vérification du format de données. Je suppose que vous utiliserez certainement la compatibilité du navigateur comme excuse pour utiliser ces nouvelles fonctionnalités, mais cela ne devrait jamais être la raison pour laquelle vous stagnez. effectué. Lorsque vous essayez vraiment d'utiliser les nouvelles fonctionnalités de ces formulaires, je vous promets d'en tomber amoureux. Si le seul défaut est, le style de la boîte invite est par défaut par le navigateur, vous ne pouvez pas le changer, d'accord, si vous croyez le niveau esthétique du concepteur du fabricant du navigateur (je crois que leur niveau de conception est plus élevé que la plupart Les gens ordinaires que la plupart des gens ordinaires, bons, si vous ne considérez pas la compatibilité du style), dépêchez-vous et scolarisation!

HTML5 fournit beaucoup de prise en charge native pour la vérification du format de données, telles que ::

 <entrée type = 'e-mail' />

Lorsque vous cliquez sur le bouton de soumission, si le format que vous entrez ne répond pas aux e-mails, cela ne sera pas en mesure de soumettre et que le navigateur vous invite à faire un message d'erreur.

Par exemple, sous Chrome:

1. Ce n'est que lorsque vous le soumettez, vous déclencherez la vérification du navigateur

2. Différentes informations rapides du navigateur sont différentes

3. Lorsque les entrées multiples ne répondent pas aux exigences, une seule erreur sera invitée.

Ne pensez pas que lorsque le type d'entrée est égal à TEL, si vous entrez le format de numéro de téléphone, vous serez bloqué par le navigateur et invitez le message d'erreur lors de la soumission. Clavier numérique, et il ne joue pas de rôle dans la vérification des données.

Vous pouvez utiliser l'attribut de modèle pour définir la vérification du format personnalisé pour le navigateur sans fournir le format de données de vérification native. La valeur de l'attribut de modèle est une expression régulière (String):

 <input type = 'tel' patron = '[0-9] {11}' if (this.value.length> 3) {// La condition de jugement est complètement personnalisée. Input.setCustomValidité ('')}});

Chaque entrée du clavier, le code déterminera si le format est correct, puis appelle le setCustomValidité pour définir la valeur de la valeur de valeur. Ne pensez pas que chaque navigateur de clé invite votre résultat si le résultat est correct.

Si vous n'y avez pas pensé, vous demanderez certainement, depuis lors, pourquoi devez-vous lier les événements du clavier pour la contribution, et vous devez juger pour chaque entrée? Soumettez l'incident directement pour le formulaire.

En tant qu'utilisateur, bien sûr, après avoir appris que je suis entré dans le mauvais format, la zone de texte devient rouge (ou il y a d'autres conseils). Et chaque fois que j'entre un personnage, s'il est juste, la zone de texte reviendra à la normale. Nous pouvons utiliser CSS Pseudo Class pour implémenter cette fonction:

 Entrée: obligatoire {background-Color: # ffe14d;} / * Cette pseudo-classe est jugée via la propriété ValuMessage * / entrée: invalide {border: 2px Solid Red;}.

La pseudo-catégorie requise ci-dessus fournit une couleur de fond jaune pour l'entrée incontournable mais vide, tandis que la pseudo-classe non valide ci-dessous ajoutera un côté rouge 2px à toute entrée non créée. Nous pouvons ajouter la classe d'entrée à notre boîte d'entrée maintenant.

Les conditions de jugement de ces pseudo-catégories jugent si vous pouvez soumettre le formulaire du formulaire. -Thyle Style.

Un autre inconvénient est que lorsqu'une entrée est définie à requise, lorsque l'initialisation est vide, la pseudo-catégorie non valide fonctionnera dessus.

Nous pouvons ajouter le dispositif de sélection des parents .Invalid avant ces pseudo-catégories. Vous pouvez définir un événement de soumission.

Form.addeventListener ('invalid', function () {this.classname = 'invalid'}, true) car invaild est un incident, pas l'événement de formulaire, nous définissons donc le troisième paramètre pour utiliser true pour utiliser la capture d'événements. De cette façon, cela a été fait.

Eh bien, il est temps de résumer les connaissances que nous avons apprises et de créer la meilleure pratique:

 <! {Border: 2Px Solid Red;} </pryy> </-head> <body> <form ID = form> <baling> e-mail: <entrée type = e-mail requis id = e-mail> </ label> <label> idcard: < Entrée requise ID = IDCard> </ Label> <Type de saisie = soumission ID = Soumider> </ Form> <Script> var Email = Document.getElementById ('Email'); )); } Else {this.setCustomValidité ('')}});

La capture d'écran après la course est la suivante:

Ce qui précède est tout le contenu de cet article.