如何在登入頁面引入驗證碼檔案並顯示

上一章介紹如何製作一個簡單的驗證碼，把驗證碼的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的驗證碼所產生的圖片。

執行程式碼後實現的效果：