YOGO生活誌: 2010年9月3日

2010年9月3日

Captcha圖形驗證 - 手工寫code篇(補遺篇)

之前 YOGO 有寫過一篇「Captcha圖形驗證 - 手工寫code篇」，前些日子就有網友在意見中寫到：

「YOGO大你好，我有使用您的這個驗證碼程式，受益良多。但是我遇到一個問題，那就是把這個驗證碼放在A網頁後，如果出現的驗證碼太模糊根本無法辦別需要換一個新的驗證碼，雖然可以在網頁A案重新整理，但是在A的表單內容就會不見了，有辦法只給驗證碼重新整理嗎???謝謝。」

所以這篇就是針對上述問題所作的補遺說明，其說明如下；首先從「Captcha圖形驗證 - 手工寫code篇」下載檔案後，用你慣用的編輯器開啟一個新的空白檔案，並輸入下面的程式碼：

   1: // JavaScript Document

   2: //更換驗證碼圖片

   3: function RefreshImage(valImageId) {

   4:     var objImage = document.images[valImageId];

   5:     if (objImage == undefined) {

   6:         return;

   7:     }

   8:     var now = new Date();

   9:     objImage.src = objImage.src.split('?')[0] + '?s=' + new Date().getTime();

  10: }

然後將檔案存檔成「reload.js」。

再來開啟 index.php，然後在驗證碼欄位的後方輸入「重新取得驗證碼」。

若你跟 YOGO 一樣是用 DW 編輯的話，把畫面切換到「程式碼界面」，然後把原本表單的地方修改如下。

       1: <script type="text/javascript" src="reload.js"></script>

       2:  

       3: <form action="&lt;?php echo $_SERVER['PHP_SELF']; ?>" method="post">

       4: 驗證碼測試：<br />

       5: <img src="captcha.php" id="imgCaptcha" /><br />

       6: <input name="check" type="text"> 

       7: <a href="javascript:void(0)" onclick="RefreshImage('imgCaptcha')">重新取得驗證碼</a><br />

       8: <input name="Submit" type="submit">

       9: </form>