Maison > Article > interface Web > jQuery implémente le code de vérification du changement de clic

jQuery implémente le code de vérification du changement de clic

PHPzoriginal: 2023-05-11 22:16:35735parcourir

Avec le développement rapide d'Internet, les codes de vérification sont devenus un élément indispensable. Qu'il s'agisse de vous inscrire, de vous connecter ou de soumettre une commande, nous devons saisir le code de vérification correct pour continuer. Les codes de vérification d'aujourd'hui ne sont plus de simples chiffres ou lettres, mais des codes de vérification plus complexes avec des images, des curseurs et d'autres interactions.

Dans le développement de sites Web, la mise en œuvre de la fonction de code de vérification est également devenue un élément essentiel. Cependant, les codes de vérification de certains sites Web sont trop complexes et doivent être constamment actualisés, ce qui constitue sans aucun doute un coup dur pour les utilisateurs. Alors, comment améliorer l’expérience utilisateur sur la base de la mise en œuvre du code de vérification ? Ici, l'auteur souhaite présenter une méthode d'utilisation de jQuery pour implémenter des codes de vérification click-to-switch.

Nous pouvons utiliser jQuery pour obtenir l'effet de cliquer pour changer de code de vérification, et c'est très simple et facile à comprendre. Tout d’abord, nous devons savoir ce qu’est un code de vérification. Le code de vérification est une technologie qui empêche les programmes robotiques de simuler le comportement humain. Il se compose généralement d'une chaîne de chiffres, de lettres et d'une image. Ici, le code de vérification que nous utilisons se compose d'une image et d'une zone de saisie de texte.

Ce qui suit est l'implémentation du code. Si vous n'êtes pas familier avec jQuery, vous pouvez d'abord apprendre les bases de jQuery.

Code HTML :

<!DOCTYPE html>
<html>
<head>
    <title>点击切换验证码</title>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="captcha" style="display: inline-block;">
        <img id="captchaImg" src="captcha.php" onclick="changeCaptcha()" />
    </div>
    <input type="text" id="captchaInput" />
    <button id="submitBtn">提交</button>
</body>
<script>
$(function(){
    $('#submitBtn').click(function(){
        alert('验证码输入正确！');
    });
});
</script>
</html>

Dans le code HTML, nous définissons un div avec l'identifiant captcha, qui contient une balise img avec l'identifiant captchaImg, une balise d'entrée avec l'identifiant captchaInput et un bouton de soumission. Parmi eux, captchaImg est l'image du code de vérification et captchaInput est le code de vérification saisi par l'utilisateur. Ensuite, nous devons implémenter la fonction consistant à cliquer pour changer de code de vérification.

Code JavaScript :

function changeCaptcha() {
    $('#captchaImg').attr({
        src: 'captcha.php?' + Math.random()
    });
}

Dans le code JavaScript, nous actualisons le code de vérification en modifiant l'attribut src de l'image. Notez que nous avons ajouté un nombre aléatoire après l'URL pour éviter les problèmes de mise en cache qui empêcheraient l'actualisation de l'image du code de vérification.

Enfin, nous revenons au code HTML, utilisons jQuery pour surveiller l'événement de clic de l'utilisateur et vérifions si le code de vérification saisi par l'utilisateur est correct.

Code jQuery :

$(function(){
    $('#submitBtn').click(function(){
        if ($('#captchaInput').val() != '') {
            $.post('verification.php', {captcha: $('#captchaInput').val()}, function(res){
                if (res == 'success') {
                    alert('验证码输入正确！');
                }
                else {
                    alert('验证码输入错误，请重新输入！');
                    changeCaptcha();
                    $('#captchaInput').val('');
                }
            });
        }
        else {
            alert('请输入验证码！');
        }
    });
});

Dans le code jQuery, nous déterminons d'abord si l'utilisateur a saisi le code de vérification. S'il y a une entrée, nous utilisons Ajax pour vérifier auprès du serveur si le code de vérification est correct. Côté serveur, nous pouvons y parvenir grâce à des mécanismes tels que la session ou le cookie. Ici, nous utilisons un vérificateur.php pour simuler le processus de vérification par le serveur du code de vérification.

code verification.php :

<?php
session_start();
if ($_POST['captcha'] == $_SESSION['captcha']) {
    echo 'success';
}
else {
    echo 'fail';
}
?>

Dans le fichier vérification.php, nous ouvrons d'abord la session, puis déterminons si le code de vérification saisi par l'utilisateur correspond au code de vérification généré. S'ils correspondent, renvoient le succès, sinon renvoient l'échec.

Sur la base du code ci-dessus, nous avons implémenté une fonction permettant de changer de code de vérification en un seul clic. L'ensemble du processus est simple et facile à comprendre, et est très convivial tant pour les développeurs que pour les utilisateurs. Dans le même temps, nous pouvons également constater que l'application de jQuery peut rendre notre code plus concis et plus facile à comprendre.

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!

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：La différence entre nodejs et le développement netArticle suivant：La différence entre nodejs et le développement net

Articles Liés

Voir plus