jQuery はクリック切り替え検証コードを実装します-フロントエンドQ&A-php.cn

jQuery はクリック切り替え検証コードを実装します

PHPz

リリース： 2023-05-11 22:16:35

オリジナル

789 人が閲覧しました

インターネットの急速な発展に伴い、検証コードは不可欠な部分になりました。登録、ログイン、または注文の送信のいずれの場合でも、続行するには正しい確認コードを入力する必要があります。現在の確認コードは単純な数字や文字ではなく、画像、スライダー、その他の操作を含むより複雑な確認コードになっています。

Webサイト開発においては、検証コードの機能の実装も欠かせないものとなっています。ただし、一部の Web サイトの検証コードは複雑すぎるため、定期的に更新する必要があり、ユーザーにとって大きな打撃となることは間違いありません。では、検証コードの実装に基づいてユーザーエクスペリエンスを向上させるにはどうすればよいでしょうか?ここではjQueryを使ってクリックスイッチ認証コードを実装する方法を紹介したいと思います。

jQuery を使用すると、クリックして確認コードを切り替える効果を実現できます。これは非常にシンプルで理解しやすいです。まず、確認コードとは何かを知る必要があります。検証コードは、ロボットプログラムが人間の動作を模倣することを防ぐ技術で、通常は数字や文字の文字列と画像で構成されます。ここで使用する確認コードは、画像とテキスト入力ボックスで構成されています。

次はコードの実装です。jQuery に慣れていない場合は、まず jQuery の基本を学ぶことができます。

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>

ログイン後にコピー

HTML コードでは、id が captcha の div を定義します。これには、id が captchaImg の img タグと、id が captchaInput の input タグが含まれます。送信ボタン。このうち、captchaImg は認証コード画像、captchaInput はユーザーが入力した認証コードです。次に、クリックして認証コードを切り替える機能を実装する必要があります。

JavaScript コード:

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

ログイン後にコピー

JavaScript コードでは、画像の src 属性を変更して検証コードを更新します。確認コードのイメージが更新されなくなるキャッシュの問題を避けるために、URL の後に乱数を追加していることに注意してください。

最後に、もう一度 HTML コードに戻り、jQuery を使用してユーザーのクリックイベントを監視し、ユーザーが入力した確認コードが正しいかどうかを確認します。

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

ログイン後にコピー

jQuery コードでは、まずユーザーが確認コードを入力したかどうかを判断します。入力がある場合は、Ajax を使用してサーバーに対して検証コードが正しいかどうかを検証します。サーバー側では、セッションや Cookie などのメカニズムを通じてこれを実現できます。ここでは、verification.php を使用して、検証コードのサーバー検証のプロセスをシミュレートします。

verification.php コード:

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

ログイン後にコピー

verification.php ファイルでは、まずセッションを開き、ユーザーが入力した検証コードが生成された検証コードと一致するかどうかを確認します。一致する場合は成功を返し、一致しない場合は失敗を返します。

上記のコードを元に、認証コードをワンクリックで切り替える機能を実装しました。プロセス全体はシンプルで理解しやすく、開発者とユーザーの両方にとって非常にフレンドリーです。同時に、jQuery を適用するとコードがより簡潔で理解しやすくなることがわかります。

以上がjQuery はクリック切り替え検証コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

jQuery はクリック切り替え検証コードを実装します