Pour plus de détails

Avant la discussion profonde de la vérification de la forme, réfléchissons au vrai sens de la vérification de la forme de la forme. En ce qui concerne son cœur, la vérification du formulaire est un système qui détecte les données de contrôle non valides pour les utilisateurs finaux et marquent ces erreurs. En d'autres termes, la vérification du formulaire consiste à effectuer une série d'inspections à ce sujet avant de soumettre le serveur et d'informer les utilisateurs pour corriger leurs erreurs.

Mais quelle est la vérification réelle du formulaire?

C'est une optimisation.

La raison pour laquelle la vérification du formulaire est une optimisation est qu'elle ne suffit pas pour s'assurer que les données de formulaire soumises au serveur uniquement via le mécanisme de vérification du formulaire sont correctes et efficaces. D'un autre côté, la vérification du formulaire de conception est de faire en sorte que les applications Web lancent une erreur plus rapidement. En d'autres termes, il est préférable d'utiliser le mécanisme de traitement construit du navigateur pour informer la page Web de l'utilisateur contenant une valeur de contrôle de formulaire non valide. Dans le passé, les données se sont retournées sur Internet juste pour laisser le serveur informer l'utilisateur qu'il avait entré les mauvaises données. Si le navigateur est complètement capable d'être capturé avant de quitter le client, nous devons utiliser cet avantage.

Cependant, la vérification du formulaire du navigateur ne suffit pas pour faire face à toutes les erreurs.

Cela dit, HTML5 introduit toujours huit méthodes pour vérifier l'exactitude des données du contrôle de la forme. Jetons un coup d'œil dans l'ordre, mais présentons l'objet ValueState pour la rétroaction pour vérifier l'état.

Dans un navigateur qui prend en charge la vérification du formulaire HTML5, vous pouvez accéder à l'objet ValidityState via le contrôle de formulaire:

 var valeur = document.myform.myinput.validité;

Cette ligne de code a obtenu un objet ValidityState appelé MyInput. L'objet contient la référence aux huit statuts de vérification et les résultats de vérification finale.

La méthode d'appel est la suivante:

 Valcheck.valid

Après l'exécution, nous obtiendrons une valeur booléenne qui indique si le contrôle du formulaire a passé toutes les contraintes de vérification. Vous pouvez traiter les caractéristiques de valeur comme le résultat de vérification finale: si les huit contraintes sont passées, les caractéristiques de valeur sont vraies, sinon, tant qu'il y a une contrainte qui échoue, le logo de valeur est tout S.

Comme mentionné précédemment, il y a huit contraintes de vérification possibles dans n'importe quel élément de forme. Chaque condition a un nom caractéristique correspondant dans l'objet ValidityState, qui peut être accessible de manière appropriée. Analysons un par un pour voir comment ils sont associés au contrôle de formulaire et comment les vérifier en fonction de l'objet ValidityState:

Objectif: Assurez-vous que la valeur du contrôle de la forme a été remplie.

Utilisation: Dans le contrôle de la forme, définissez les fonctionnalités requises sur true.

Exemple:

 <entrée type = nom de texte = MyText requis>

Instructions détaillées: Si la commande de formulaire définit la fonction requise, le contrôle sera toujours invalide avant que l'utilisateur ne remplisse ou remplisse la valeur par l'appel de code. Par exemple, la zone d'entrée de texte vide ne peut pas passer la vérification requise, sauf s'il y entrait du texte. Lorsque la valeur d'entrée est vide, la valorisation renvoie true.

Objectif: Assurer la correspondance des valeurs de contrôle et des types attendus (tels que NuMbe, Email, URL, etc.).

Utilisation: spécifiez la valeur caractéristique de type du contrôle de forme.

Exemple:

 <entrée type = Nom de messagerie = Myemail>

Instructions détaillées: Le type de contrôle de formulaire spécial n'est pas seulement utilisé pour personnaliser le clavier de téléphone mobile. Le symbole dans l'adresse e-mail ou la valeur d'entrée du contrôle de type numéro n'est pas des nombres efficaces, puis le navigateur marquera ce contrôle pour indiquer que le type n'est pas correspondant. Quelles que soient les erreurs, TyMismismatch reviendra à True.

Objectif: Vérifiez si l'entrée est valide en fonction des règles de format défini sur le contrôle du formulaire.

Utilisation: définissez les fonctionnalités du modèle sur le contrôle de formulaire et le puits donne des règles de correspondance appropriées.

Exemple:

 <input type = Text Name = CreditCardNumber Pattern = [0-9] {16} Target = '_Lank'> Mécanisme de vérification d'expression régulière. Lorsque les fonctionnalités du motif sont définies sur le contrôle, tant que la valeur du contrôle d'entrée ne respecte pas les règles de mode, le PatternMismatch renverra la valeur réelle. À partir de deux aspects de la guidage des utilisateurs et des références techniques, vous devez définir les caractéristiques du titre dans le contrôle de forme contenant les caractéristiques du modèle pour expliquer les règles.
 4. Toolong
 Objectif: Évitez la valeur d'entrée contenant trop de caractères.
 Utilisation: Définissez les caractéristiques de la longueur de la longueur sur le contrôle de la forme.
 Exemple:
 <input type = text name = LimitedDText maxLength = 140>
 Description détaillée: Si la longueur de la valeur d'entrée dépasse MaxLength, la fonction Toolong reviendra vrai. Bien que le contrôle de formulaire soit généralement limité à la longueur maximale lorsque l'utilisateur est entrée, dans certains cas, tels que les paramètres du programme, il dépassera toujours la valeur maximale.
 5. Rangeunderflow
 Objectif: Limitez la valeur minimale du contrôle numérique.
 Utilisation: Définissez la fonction MIN pour le contrôle de formulaire et donnez la valeur minimale autorisée.
 Exemple:
 <Type d'entrée = Nom de la plage = AgeCheck Min = 18>
 Instructions détaillées: Dans le contrôle du formulaire qui doit être vérifié, la valeur devrait être temporairement inférieure à la limite inférieure des paramètres. À l'heure actuelle, la fonctionnalité Rangeunderflow de ValidityState reviendra à True.
 6. RangeOverflow
 Objectif: Limitez la valeur maximale du contrôle numérique.
 Utilisation: définissez les caractéristiques maximales du contrôle de la forme et donnez la valeur maximale.
 Exemple:
 <Type d'entrée = Range Name = KidageCheck Max = 12>
 Description détaillée: Similaire à Rangeunderflow, si la valeur d'un contrôle de formulaire est plus grande que max, les caractéristiques reviendront vrai.
 7. Stepmismatch
 Objectif: Assurez-vous que la valeur d'entrée rencontre Min, Max et Step.
 Utilisation: définissez les caractéristiques d'étape du contrôle de formulaire, spécifiez l'augmentation de la valeur.
 Exemple:
 <Type d'entrée = Range Nom = Confidencevel Min = 0 Max = 100 Step = 5>
 Description détaillée: Cette contrainte est utilisée pour garantir que la valeur répond aux exigences de Min, Max et Step. En d'autres termes, la valeur actuelle doit être la somme du multiple de la valeur minimale et la valeur de la fonction de pas. Par exemple, de 0 à 100, la valeur de la fonction de pas est de 5, à l'heure actuelle, il n'y aura pas de 17, sinon le StepMismatch renverra la valeur réelle.
 8. CustomError
 Objectif: Livraison Le code d'application définit et calcule clairement les erreurs.
 Utilisation: appelez setCustomValidité (message) pour placer les pièces de contrôle de formulaire dans l'état CustomError.
 Exemple:
 PasswordConfirmativeField.setCustomValidité (les valeurs de mot de passe ne correspondent pas.);
 Instructions détaillées: Lorsque le mécanisme de vérification du navigateur n'est pas applicable, les informations d'erreur de vérification personnalisées doivent être affichées. Lorsque la valeur d'entrée ne respecte pas les règles sémantiques, le code d'application doit définir ces messages de vérification personnalisés.
 Le cas typique du message de vérification personnalisé est de vérifier si les valeurs du contrôle de contrôle sont cohérentes. Par exemple, les mots de passe et les mots de passe confirment que les valeurs des deux perdants ne sont pas adaptées. Tant que le message de vérification est personnalisé, le contrôle sera dans un état non valide et le CustomError reviendra vrai. Pour supprimer l'erreur, appelez simplement le setCustomValidity () sur le contrôle.
 Eh bien, ce qui précède est les 8 méthodes de base vérifiées par le tableau seul dans HTML5. J'espère également que tout le monde soutiendra Vevb Wulin.com.