recherche

Maison >interface Web >Tutoriel H5 >Comment définir l'invite d'échec de la vérification du formulaire H5

Comment définir l'invite d'échec de la vérification du formulaire H5

php中世界最好的语言
php中世界最好的语言original
2018-03-26 17:05:312197parcourir

Cette fois, je vais vous montrer comment configurer les invites d'échec de validation de formulairede H5, et quelles sont les précautionspour configurer les invites d'échec de validation de formulaire de H5. Voici des cas pratiques. . Levez-vous et jetez un œil.

Avant-propos

Lors de la rédaction de pages, les chaussures pour enfants frontales entreront inévitablement dans le gouffre de la validation du formulaire. Je suis à genoux car je dois écrire un tas de js pour vérifier. Mais depuis l'émergence de H5, de nombreuses vérifications d'expressions communes ont été implémentées pour nous, ce qui nous a allégé beaucoup de fardeau, tout comme ce qui suit :

Vérification de l'adresse e-mail :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            邮箱: <input type="email">
        </label>
        <input type="submit">
    </form>
</body>
</html>

Vérification de l'adresse e-mail est prise en charge par H5 lui-même, mais les scénarios et situations que nous Je veux vérifier Il en existe de nombreux types, que devons-nous faire ? Devrions-nous utiliser à nouveau Js ? Évidemment, ce n'est pas si pénible, car H5 fournit l'attribut pattern, nous permettant de faire notre propre chose Nous pouvons spécifier expression régulière en motif, à condition qu'il soit régulier. Si vous l'écrivez bien, vous n'aurez pas à vous soucier de la vérification

Le régulier est limité à 11 chiffres : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数字: <input type="text" pattern="^\d{11}$">
        </label>
        <input type="submit">
    </form>
</body>
</html>

Problème

Vous pouvez l'essayer lorsque vous entrez un autre numéro. plus de 11 chiffres, une erreur sera signalée. C'est le mérite du modèle. Mais je ne sais pas si vous avez découvert un œuf, c'est-à-dire si nous utilisons un modèle pour vérifier le formulaire, lorsque la vérification échoue ? , l'invite sera cohérente avec le format demandé. Mon Dieu, comment nos utilisateurs savent-ils quel est le format demandé ? Bon sang, nous ne pouvons pas les laisser regarder le code source. je dois même écrire la page et leur demander simplement de nous donner l'argent. Juste une blague~

Solution

S'il y a un problème. , nous devons le résoudre. Après avoir longtemps programmé pour Google, nous avons finalement trouvé une solution :

oninvalid : La valeur de l'élément d'entrée soumis est une valeur invalide Quand (ici, la vérification régulière échoue). , l'événement

oninvalid

est déclenché. oninvalid appartient à l'événement Form.

setCustomValidity() : Il s'agit de la méthode JS intégrée de HTML5, utilisée pour personnaliser les informations d'invite

Il s'avère que vous pouvez personnaliser l'invite via oninvalid et setCustomValidity, alors c'est facile à faire, modifiez le code source comme suit ; Quel type de données doivent être saisies, afin que les utilisateurs puissent mieux modifier leur saisie !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois ! 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <form action="">
        <label >
            数字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity(&#39;请输入11位数字&#39;)">
        </label>
        <input type="submit">
    </form>
</body>
</html>

Lecture recommandée :

Enregistrements d'utilisation du stockage local et du stockage de session

Explication détaillée de l'utilisation de la base de données indexeddb

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!

php html5 正则表达式 表单验证 堆 JS 事件 input 数据库
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser la géolocalisation en HTML5Article suivant：Comment utiliser la géolocalisation en HTML5

Articles Liés

Voir plus