How to introduce and display the verification code file on the login page
The previous chapter introduced how to make a simple verification code. Define the php file of the verification code as: captcha.php
Now let’s talk about how Introducing the verification code file, our initial login page looks like this:
The verification code here looks like this.
The code in the login.html file is as follows:
<div class="form-group"> <div class="field"> <input type="text" class="input input-big" name="code" placeholder="填寫右側(cè)的驗(yàn)證碼" data-validate="required:請(qǐng)?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>
Here we need to make some modifications to this code and introduce the verification code file , the modified code is as follows
<div class="form-group">
<div class="field">
<input type="text" class="input input-big" name="code" placeholder="填寫驗(yàn)證碼" data-validate="required:請(qǐng)?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> Then make some modifications to the css style. The HTML DOM Document object in javascript is used here, and the image generated by the verification code of captcha.php is referenced.
The effect achieved after running the code:
##
