如何在登錄頁面引入驗(yàn)證碼文件并顯示
上一章節(jié)介紹如何制作一個(gè)簡單的驗(yàn)證碼，把驗(yàn)證碼的php文件定義為：captcha.php
現(xiàn)在我們來說一說如何引入驗(yàn)證碼文件，初始我們的登錄頁面是這樣的：
這里的驗(yàn)證碼是這樣的。
在 login.html 文件中的代碼如下：
<div class="form-group"> <div class="field"> <input type="text" class="input input-big" name="code" placeholder="填寫右側(cè)的驗(yàn)證碼" data-validate="required:請?zhí)顚懹覀?cè)的驗(yàn)證碼" /> <img src="images/passcode.jpg" alt="" width="100" height="32" class="passcode" style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'"> </div> </div>
這里我們需要對這段代碼進(jìn)行一些修改，引入驗(yàn)證碼文件，修改后的代碼如下
<div class="form-group">
<div class="field">
<input type="text" class="input input-big" name="code" placeholder="填寫驗(yàn)證碼" data-validate="required:請?zhí)铗?yàn)證碼" />
<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樣式進(jìn)行一些修改。這里使用了javascript中的HTML DOM Document 對象，并引用了captcha.php的驗(yàn)證碼生成的圖片。
運(yùn)行代碼后實(shí)現(xiàn)的效果：
