Avant de discuter en profondeur de la validation de formulaire, réfléchissons d'abord à la véritable signification de la validation de formulaire. à la base, la validation de formulaire est un système qui détecte les données de contr?le invalides et signale ces erreurs pour les utilisateurs finaux. En d'autres termes, la validation du formulaire effectue une série de vérifications sur le formulaire avant qu'il ne soit soumis au serveur et informe l'utilisateur de corriger les erreurs.
Mais qu’est-ce que la validation de formulaire réellement??
est une optimisation.
La raison pour laquelle la validation du formulaire est une optimisation est que le mécanisme de validation du formulaire à lui seul ne suffit pas à garantir que les données du formulaire soumises au serveur sont correctes et valides. D'un autre c?té, la validation des formulaires est con?ue pour permettre aux applications Web de générer des erreurs plus rapidement. En d’autres termes, il est préférable d’utiliser le mécanisme de gestion intégré au navigateur pour informer l’utilisateur qu’une page Web contient des valeurs de contr?le de formulaire non valides. Dans le passé, les données circulaient sur le réseau uniquement pour que le serveur avertisse l'utilisateur qu'il avait saisi des données incorrectes. Si le navigateur est entièrement capable de détecter les erreurs avant qu'elles ne quittent le client, nous devrions en profiter.
Cependant, la vérification du formulaire du navigateur ne suffit pas à gérer toutes les erreurs.
Cela dit, HTML5 introduit huit méthodes pour valider l'exactitude des données des contr?les de formulaire. Examinons-les tour à tour, mais nous présenterons d'abord l'objet ValidityState utilisé pour renvoyer l'état de validation.
Dans les navigateurs prenant en charge la validation de formulaire HTML5, l'objet ValidityState est accessible via le contr?le de formulaire?:

var valCheck = document.myForm.myInput.validity;

Cette ligne de code obtient l'objet ValidityState de l'élément de formulaire nommé myInput. L'objet contient des références aux huit états de vérification, ainsi que le résultat final de la vérification.
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 de formulaire a passé toutes les contraintes de validation. L'attribut valide peut être considéré comme le résultat final de la vérification?: si les huit contraintes sont passées, l'attribut valide est vrai. Sinon, tant qu'une contrainte échoue, l'indicateur valide est faux.
Comme mentionné précédemment, il existe huit contraintes de validation possibles pour tout élément de formulaire. Chaque condition a un nom d'attribut correspondant dans l'objet ValidityState, accessible de la manière appropriée. Analysons-les un par un pour voir comment ils sont associés aux contr?les du formulaire et comment les vérifier en fonction de l'objet ValidityState?:
1 valueMissing
Objectif?: Garantir la valeur dans le. contr?le de formulaire Rempli.
Utilisation?: définissez l'attribut obligatoire sur true dans le contr?le de formulaire.
Exemple?:

<input type="text" name="myText" required>

Description détaillée?: Si le contr?le de formulaire définit l'attribut requis, le contr?le restera dans un état invalide jusqu'à ce que l'utilisateur remplisse la valeur ou remplisse la valeur via appel codé. Par exemple, une zone de saisie de texte vide échoue à la vérification requise à moins que du texte n'y soit saisi. Lorsque la valeur d'entrée est vide, valueMissing renvoie true.
2. typeMismatch
Objectif?:?S'assurer que la valeur du contr?le correspond au type attendu (tel que numéro, e-mail, URL, etc.).
Utilisation?: Spécifiez la valeur de l'attribut de type. du contr?le de formulaire.
Exemple?:

<input type="email" name="myEmail">

Description détaillée?: Le type de contr?le de formulaire spécial n'est pas seulement utilisé pour personnaliser le clavier du téléphone mobile si le navigateur peut reconna?tre que la saisie dans le contr?le de formulaire ne le fait pas. respectez les règles de type correspondantes, par exemple, il n'y a pas de symbole @ dans l'adresse e-mail ou la valeur d'entrée du contr?le de type numérique n'est pas un nombre valide, le navigateur marquera le contr?le pour indiquer une incompatibilité de type. Quelle que soit la condition d’erreur, typeMismatch renverra true.
3. patternMismatch
Objectif?: Vérifier si l'entrée est dans un format valide selon les règles de format définies sur le contr?le de formulaire.
Utilisation?: définissez l'attribut de motif sur le contr?le de formulaire et attribuez des règles de correspondance appropriées.
Exemple?:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

Description détaillée?: L'attribut pattern fournit aux développeurs un moyen puissant et flexible de définir un mécanisme de validation d'expression régulière pour les valeurs de contr?le de formulaire. Lorsque l'attribut pattern est défini pour un contr?le, patternMismatch renverra une valeur vraie tant que la valeur du contr?le d'entrée n'est pas conforme aux règles du modèle. Du point de vue des conseils d'utilisation et des références techniques, vous devez définir l'attribut title dans le contr?le de formulaire contenant l'attribut pattern pour illustrer le r?le de la règle.
4. tropLong
Objectif?: éviter que les valeurs d'entrée contiennent trop de caractères.
Utilisation?: définissez l'attribut maxLength sur le contr?le de formulaire.
Exemple?:

<input type="text" name="limitedText" maxLength="140">

Détails?: Si la longueur de la valeur d'entrée dépasse maxLength, la fonctionnalité tropLong retournera vrai. Bien que les contr?les de formulaire limitent généralement la longueur maximale des entrées utilisateur, il existe des situations dans lesquelles la longueur maximale peut être dépassée, par exemple en la définissant par programme.
5. rangeUnderflow
Objectif?: Limiter la valeur minimale des contr?les numériques.
Utilisation?: définissez l'attribut min pour le contr?le de formulaire et attribuez-lui la valeur minimale autorisée.
Exemple?:

<input type="range" name="ageCheck" min="18">

Description détaillée?: Dans un contr?le de formulaire qui nécessite une vérification de plage numérique, la valeur est susceptible d'être temporairement inférieure à la limite inférieure définie. à ce stade, la propriété rangeUnderflow de ValidityState renverra true.
6. rangeOverflow
Objectif?: Limiter la valeur maximale des commandes numériques.
Utilisation?: définissez l'attribut max pour le contr?le de formulaire et attribuez-lui la valeur maximale autorisée.
Exemple?:

<input type="range" name="kidAgeCheck" max="12">

詳細(xì)說(shuō)明：與rangeUnderflow類(lèi)似，如果一個(gè)表單控件的值比max更大，特性將返回true。
7、stepMismatch
目的：確保輸入值符合min、max及step即設(shè)置。
用法：為表單控件設(shè)置step特性，指定數(shù)值的增量。
示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

詳細(xì)說(shuō)明：此約束條件用來(lái)保證數(shù)值符合min、max和step的要求。換句話(huà)說(shuō)，當(dāng)前值必須是最小值與step特性值的倍數(shù)之和。例如，范圍從0到100，step特性值為5，此時(shí)就不允許出現(xiàn)17，否則stepMismatch返回true值。
8、customError
目的：處理應(yīng)用代碼明確設(shè)置及計(jì)算產(chǎn)生的錯(cuò)誤。
用法：調(diào)用setCustomValidity(message)將表單控件置于customError狀態(tài)。
示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

詳細(xì)說(shuō)明：瀏覽器內(nèi)置的驗(yàn)證機(jī)制不適用時(shí)，需要顯示自定義驗(yàn)證錯(cuò)誤信息。當(dāng)輸入值不符合語(yǔ)義規(guī)則時(shí)，應(yīng)用程序代碼應(yīng)設(shè)置這些自定義驗(yàn)證消息。
自定義驗(yàn)證消息的典型用例是驗(yàn)證控件中的值是否一致。例如，密碼和密碼確認(rèn)兩個(gè)輸人框的值不匹配。只要定制了驗(yàn)證消息，控件就會(huì)處于無(wú)效狀態(tài)，并且customError返回true。要清除錯(cuò)誤，只需在控件上調(diào)用setCustomValidity("")即可。

以上就是詳解HTML5中表單驗(yàn)證的8種方法介紹?的內(nèi)容，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！