Comment demander si la vérification du formulaire H5 échoue-Tutoriel H5-php.cn

Comment demander si la vérification du formulaire H5 échoue

php中世界最好的语言

Libérer： 2018-01-12 09:27:05

original

2414 Les gens l'ont consulté

Cette fois, je vous proposerai une invite d'échec dans la vérification du formulaire H5 Comment utiliser l'invite d'échec de la vérification du formulaire H5 ? Quelles sont les précautions lorsque la vérification du formulaire H5 échoue ? Ce qui suit est un cas pratique, jetons-y un coup d'œil.

Nous savons que lors de l'écriture de pages, les chaussures pour enfants front-end entreront inévitablement dans le gouffre de la validation du formulaire. À ce stade, nous devons nous agenouiller car nous devons écrire un tas de js pour. check. Mais depuis l'émergence de H5, de nombreuses vérifications d'expressions courantes ont été mises en œuvre pour nous, réduisant considérablement notre charge, tout comme la suivante :

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>

Copier après la connexion

La vérification des e-mails est prise en charge par H5 lui-même, mais les scénarios et les situations que nous devons vérifier sont divers, alors que devons-nous faire ? Devrions-nous utiliser JS ? Ce n'est évidemment pas si pénible, car H5 fournit l'attribut pattern ? , faisons notre propre truc ! Nous pouvons spécifier expression régulière dans le modèle. Tant que l'expression régulière est bien écrite, la vérification ne sera pas un problème

L'expression régulière est limitée à 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>

Copier après la connexion

Problème

Vous pouvez l'essayer Lorsque vous entrez un nombre autre que 11 chiffres, une erreur sera signalée. C'est la contribution du modèle. vous avez découvert un phénomène douloureux ? Autrement dit, si nous utilisons la méthode du modèle pour valider le formulaire, lorsque la validation échoue, l'invite est d'être cohérent avec le format demandé, mon Dieu, comment nos utilisateurs savent-ils quel est le format demandé. c'est ? Nous ne pouvons pas leur laisser le voir. Si cela devait arriver, nous n'aurions même pas besoin d'écrire la page. Nous leur demanderions simplement de nous donner l'argent. >Solution

S'il y a un problème, il faut le résoudre. Après avoir longuement programmé pour Google, j'ai finalement trouvé une bonne solution :

oninvalid : Quand la valeur du soumis l'élément d'entrée est une valeur invalide (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 les invites via oninvalid et setCustomValidity, alors c'est facile à faites. Modifiez le code source comme suit :

Enfin, ce n'est plus un « format » ennuyeux. Maintenant, l'invite de validation du formulaire nous a clairement indiqué quel type de données doivent être saisies ici, afin que les utilisateurs puissent. mieux vaut le modifier. Entrez le vôtre !

<!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>

Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser Canvas pour compresser des images

Comment réveiller l'application dans h5

Comment utiliser les balises vidéo et audio et les barres de progression dans 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!