jQuery melaksanakan kod pengesahan penukaran klik-Soal Jawab bahagian hadapan-php.cn

jQuery melaksanakan kod pengesahan penukaran klik

PHPz

Lepaskan： 2023-05-11 22:16:35

asal

790 orang telah melayarinya

Dengan perkembangan pesat Internet, kod pengesahan telah menjadi bahagian yang sangat diperlukan. Sama ada mendaftar, log masuk atau menyerahkan pesanan, kami perlu memasukkan kod pengesahan yang betul untuk meneruskan. Kod pengesahan hari ini bukan lagi nombor atau huruf mudah, tetapi kod pengesahan yang lebih kompleks dengan gambar, peluncur dan interaksi lain.

Dalam pembangunan laman web, melaksanakan fungsi kod pengesahan juga telah menjadi bahagian yang amat diperlukan. Walau bagaimanapun, kod pengesahan sesetengah tapak web adalah terlalu rumit dan perlu sentiasa disegarkan, yang pastinya merupakan tamparan hebat kepada pengguna. Jadi, bagaimana untuk menjadikan pengalaman pengguna lebih baik berdasarkan pelaksanaan kod pengesahan? Di sini, penulis ingin memperkenalkan kaedah menggunakan jQuery untuk melaksanakan kod pengesahan klik-untuk-tukar.

Kami boleh menggunakan jQuery untuk mencapai kesan mengklik untuk menukar kod pengesahan, dan ia sangat mudah dan mudah difahami. Pertama, kita perlu tahu apa itu kod pengesahan. Kod pengesahan ialah teknologi yang menghalang program robot daripada mensimulasikan tingkah laku manusia Ia biasanya terdiri daripada rentetan nombor dan huruf dan gambar. Di sini, kod pengesahan yang kami gunakan terdiri daripada gambar dan kotak input teks.

Berikut ialah pelaksanaan kod Jika anda tidak biasa dengan jQuery, anda boleh mempelajari asas jQuery terlebih dahulu.

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

Salin selepas log masuk

Dalam kod HTML, kami mentakrifkan div dengan id captcha, yang mengandungi teg img dengan id captchaImg dan teg input dengan id captchaInput dan a butang hantar. Antaranya, captchaImg ialah imej kod pengesahan, dan captchaInput ialah kod pengesahan yang dimasukkan oleh pengguna. Seterusnya, kita perlu melaksanakan fungsi mengklik untuk menukar kod pengesahan.

Kod JavaScript:

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

Salin selepas log masuk

Dalam kod JavaScript, kami memuat semula kod pengesahan dengan menukar atribut src imej. Harap maklum bahawa kami menambah nombor rawak selepas URL untuk mengelakkan masalah caching yang akan menyebabkan imej kod pengesahan tidak dimuat semula.

Akhir sekali, kami kembali kepada kod HTML sekali lagi, menggunakan jQuery untuk memantau acara klik pengguna dan mengesahkan sama ada kod pengesahan yang dimasukkan oleh pengguna adalah betul.

Kod 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('请输入验证码！');
        }
    });
});

Salin selepas log masuk

Dalam kod jQuery, kami mula-mula menentukan sama ada pengguna telah memasukkan kod pengesahan. Jika terdapat input, kami menggunakan Ajax untuk mengesahkan ke pelayan sama ada kod pengesahan adalah betul. Di sisi pelayan, kita boleh mencapai ini melalui mekanisme seperti sesi atau kuki. Di sini, kami menggunakan verification.php untuk mensimulasikan proses pengesahan pelayan kod pengesahan.

kod pengesahan.php:

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

Salin selepas log masuk

Dalam fail verification.php, kami mula-mula membuka sesi, dan kemudian menentukan sama ada kod pengesahan yang dimasukkan oleh pengguna sepadan dengan kod pengesahan yang dijana. Jika mereka sepadan, kembalikan kejayaan, jika tidak kembali gagal.

Berdasarkan kod di atas, kami telah melaksanakan fungsi untuk menukar kod pengesahan dengan satu klik. Keseluruhan proses ini mudah dan mudah difahami, dan sangat mesra kepada pembangun dan pengguna. Pada masa yang sama, kami juga dapat melihat bahawa aplikasi jQuery boleh menjadikan kod kami lebih ringkas dan mudah difahami.

Atas ialah kandungan terperinci jQuery melaksanakan kod pengesahan penukaran klik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!