Quelles sont les méthodes de vérification du formulaire H5 ?

Cette fois, je vous présente les méthodes de vérification du formulaire H5 , et quelles sont les précautions pour la vérification du formulaire H5. Voici des cas pratiques, jetons un coup d'oeil.

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 non valides 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 des formulaires du navigateur n'est pas suffisante pour 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 :

valueMissing

Objectif : Assurez-vous que la valeur dans le contrôle du formulaire est renseignée.

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 de contrôle correspond au type attendu (tel que numéro, e-mail, URL, etc. ).

Utilisation : Spécifiez la valeur de l'attribut 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">

详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要 输入控件的值不符合模式规则，patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，你应该在包含pattern特性的表 单控件中设置title特性以说明规则的作用。

4、tooLong

目的：避免输入值包含过多字符。

用法：在表单控件上设置maxLength特性。

示例：

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

详细说明：如果输入值的长度超过maxLength， tooLong特性会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。

5、rangeUnderflow

目的：限制数值型控件的最小值。

用法：为表单控件设置min特性，并赋予允许的最小值。

示例：

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

详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。

6、rangeOverflow

目的：限制数值型控件的最大值。

用法：为表单控件设置max特性，并赋予允许的最大值。

示例：

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

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。

7、stepMismatch

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

示例：

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

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。

8、customError

目的：处理应用代码明确设置及计算产生的错误。

用法：调用setCustomValidity(message)将表单控件置于customError状态。

示例：

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

详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。

自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

spring mvc+localResizeIMG实现H5端图片压缩上传

canvas与h5如何实现视频截图功能

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!