ホームページ > 記事 > ウェブフロントエンド > jQuery はクリック切り替え検証コードを実装します
jQuery はクリック切り替え検証コードを実装します
- PHPzオリジナル
- 2023-05-11 22:16:35793ブラウズ
インターネットの急速な発展に伴い、検証コードは不可欠な部分になりました。登録、ログイン、または注文の送信のいずれの場合でも、続行するには正しい確認コードを入力する必要があります。現在の確認コードは単純な数字や文字ではなく、画像、スライダー、その他の操作を含むより複雑な確認コードになっています。
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 サイトの他の関連記事を参照してください。