Web制作検証コード関数サンプルコード

認証コード(CAPTCHA)とは、「Completely Automated Public Turing test to Tell Computers and Humans Apart」(コンピュータと人間を区別する完全自動チューリングテスト)の略で、ユーザーがコンピュータと人間であるかどうかを識別するための公開全自動テストです。コンピューターまたは人間のプログラム。これにより、悪意のあるパスワードのクラッキング、チケット詐欺、フォーラムのフラッディングが防止され、ハッカーが特定のプログラムを使用して特定の登録ユーザーが継続的にログイン試行することを効果的に阻止できます。実際、確認コードの使用は、多くのユーザーにとって一般的な方法です。この機能は比較的簡単な方法で実装されています。この質問はコンピュータによって生成および判断できますが、答えることができるのは人間だけです。コンピュータは CAPTCHA の質問に答えることができないため、質問に答えるユーザーは人間であると考えることができます

以下は Web 制作認証コード機能のコード例です。興味のある方は一緒にご覧ください

実現効果 ：

実装原則:

フロントエンドがリクエストを行うたびに、バックエンドは検証コードイメージと検証コードイメージを生成します。エンドに表示される認証コード文字列

はバックエンドの

セッションに保存され、フロントエンドは再度ビジネスインターフェイスをリクエストしてセッション内の認証コード文字列と比較します。 実装アイデア:

1. まず、バックエンドは検証コードイメージを生成できるインターフェイスを提供します

2. フロントエンドは img に src 属性を設定し、検証コード生成用のインターフェイスを要求します。

3. img にクリックイベントを設定します。img をクリックするたびに src の値が変更され、再度 src が要求されます

4. ページインターフェイスの操作を行うときに、入力された確認コードが正しいかどうかを比較します

実装コード:

フロントエンド:

html:

<p class="centent-top" > 
   <p class="centent-left"><span>*</span>验证码：</p> 
   <input type="text" class="verification-code-input"> 
   <p class="verification-code"><img  src="/static/imghwm/default1.png"  data-src="/SchoolRoll/accuser/code/check"  class="lazy"  id="yzm"  alt="Web制作検証コード関数サンプルコード" ></p> 
   <p class="change"><span>看不清？</span><span style="color:#37CAF2;cursor: pointer;" id="changeImgCode">换一张</span></p> 
  </p>

js:

var yzm =document.getElementById("yzm"); 
 var changeImgCode =document.getElementById("changeImgCode"); 
 yzm.onclick=function () { 
  changPin(); 
 } 
 changeImgCode.onclick=function () { 
  changPin(); 
 } 
 // 换验证码 
 function changPin() { 
  $("#yzm").attr("src", "/SchoolRoll/accuser/code/check?time=" + Math.random()); 
 }

以上がWeb制作検証コード関数サンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。