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>

下圖中用紅線框起來的地方就是修改的部份。

開啟你慣用的瀏覽器（在此以IE8為例），在網址列中輸入「http://localhost/」，一切無誤的話可看到如下圖的畫面，然後按一下「重新取得驗證碼」。


 若能看到新的驗證碼則表示一切都能正常執行囉。

檔案下載：

http://cid-62fad80d6087bdb2.office.live.com/self.aspx/.Public/new^_captcha^_YOGO.rar

延伸閱讀：

Captcha圖形驗證 - 手工寫code篇

Captcha圖型驗證 - Dreamweaver外掛篇（PHP篇）


Captcha圖型驗證 - Dreamweaver外掛篇（ASP篇）


Captcha 圖形驗證 - Free API 篇（1）

Captcha 圖形驗證 - Free API 篇（2）

如果覺得這篇文章對您有所幫助，在觀看完文章之餘，希望能點選下方方廣告，當作是對YOGO的支持，讓YOGO更有寫作的動力。