The verification code is also written using external PHP code. For details, you can visit our verification code production program. The verification code program used in this chapter is as follows
Create the yanzhengma.php file and verify Code program
<?php
session_start();
Header("Content-type:image/PNG");
$im = imagecreate(60, 25);
$back = imagecolorallocate($im, 245, 245, 245);
imagefill($im, 0, 0, $back);
$vcodes = "";
for($i = 0; $i < 4; $i++){
$font = imagecolorallocate($im, rand(100, 255), rand(0, 100), rand(100, 255));
$authnum = rand(0, 9);
$vcodes .= $authnum;
imagestring($im, 5, 9 + $i * 10, 5, $authnum, $font);
}
$_SESSION['VCODE'] = $vcodes;
for($i=0;$i<200;$i++) {
$randcolor = imagecolorallocate($im, rand(0, 255), rand(0, 255), rand(0, 255));
imagesetpixel($im, rand()%60, rand()%25, $randcolor); //
}
imagepng($im);
imagedestroy($im);
?>Note: When running the verification code program online, garbled codes will appear. You need to run it locally.
How to put our verification code What about adding it to the page?
Open our verification code program and find that the verification code displayed on the web page is just a picture, so we can use the <img> tag. The code is as follows
<p>验 证 码：<input type="text" name="yzm" id="yzm">
<img src="yanzhengma.php">
src : This is our verification code program. The following programs are not in the same directory, and a specific path needs to be added.
In this way, we add the verification code to the page, but if we think about it, we usually click Verification code, the verification code will be refreshed, which requires our JS to implement. We only need to add the following code after the <img> tag
<img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
We put the verification code with our The previously made page codes are merged together
#The complete code is as follows
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
body{background-color: rgba(223, 255, 231, 0.28)
}
.container{
border-radius: 25px;
box-shadow: 0 0 20px #222;
width: 380px;
height: 400px;
margin: 0 auto;
margin-top: 200px;
background-color: rgba(152, 242, 242, 0.23);
}
.right {
position: relative;
left: 40px;
top: 20px;
}
input{
width: 180px;
height: 25px;
}
button{
background-color: rgba(230, 228, 236, 0.93);
border: none;
color: #110c0f;
padding: 10px 70px;
text-align: center;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top: 30px;
margin-left: 50px;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="container">
<div class="right">
<h2>用户注册</h2>
<p>用 户 名：<input type="text" name="name" id="name"></p>
<p>密 码: <input type="password" name="pwd" id="pwd"></p>
<p>确认密码: <input type="password" name="pwdconfirm" id="pwdconfirm"></p>
<p>验 证 码：<input type="text" name="yzm" id="yzm">
<img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"></p>
<p><button type="submit" value="注册" >立即注册</button></p>
</div>
</div>
</form>
</body>
</html> Now that the css style is available, the verification code is also available. The next step is to verify our content. For example, if the username and password are not filled in, the user will not be allowed to submit. The password entered twice If it is different, it will not be submitted. This needs to be implemented using our js. In the next section, we will tell you how to use JS to judge this information
Next Section
