認証コードファイルをログインページに導入して表示する方法

前の章では、簡単な検証コードの作成方法を紹介しました。検証コードの php ファイルを次のように定義します: captcha.php

次に、確認コード ファイルの場合、最初のログイン ページは次のようになります:

ここでの確認コードは次のようになります。

login.html ファイル内のコードは次のとおりです。

<div class="form-group">
    <div class="field">
        <input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码" data-validate="required:请填写右侧的验证码" />
       <img src="images/passcode.jpg" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">  
                               
    </div>
</div>

<div class="form-group">
   <div class="field">
      <input type="text" class="input input-big" name="code" placeholder="填写验证码" data-validate="required:请填验证码" />
      <a style="float:right; padding:5px;" href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
         <img id="captcha_img" class="passcode" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:42px" />
      </a>
   </div>
</div>

次に、CSS スタイルにいくつかの変更を加えます。ここではJavaScriptのHTML DOM Documentオブジェクトを使用しており、captcha.phpの検証コードで生成された画像を参照しています。

コードの実行後に得られる効果: