認証コードファイルをログインページに導(dǎo)入して表示する方法
前の章では、簡単な検証コードの作成方法を紹介しました。検証コードの php ファイルを次のように定義します: captcha.php
次に、確認コード ファイルの場合、最初のログイン ページは次のようになります:
ここでの確認コードは次のようになります。
login.html ファイル內(nèi)のコードは次のとおりです。 <div class="form-group">
<div class="field">
<input type="text" class="input input-big" name="code" placeholder="填寫右側(cè)的驗證碼" data-validate="required:請?zhí)顚懹覀?cè)的驗證碼" />
<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:請?zhí)铗炞C碼" />
<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の検証コードで生成された畫像を參照しています。
コードの実行後に得られる効果:
