验证码的作用是防止机器提交，防止机器暴力破解密码或向数据库提交垃圾数据。本验证码是根据php教材里的代码修改而成。随机码是在前端js生成的，后端php只是加上干扰条和干扰点显示了一下。
文件：index.html
DOCTYPE html>
<html>
<head>
<title>验证码实例title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js">script>
<script>
function $(id){
return document.getElementById(id);
}
window.onload = function(){
showval();
function showval(){
num = '';
str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for(var i = 0; i < 4; i++){
tmp = Math.ceil((Math.random() * 35));
num += str.charAt(tmp);
}
$("chkid").src = './valcode.php?num=' + num;
$("chknm").value = num.toLowerCase();;
}
$("chkid").onclick = function(){
showval();
}
$("btn").onclick = function(){
var t = $("chkin").value.toLowerCase();
if(t == $("chknm").value){
alert("验证通过！");
}else{
alert("验证没有通过！");
}
}
}
script>
head>
<body>
<div class="container">
<img id="chkid" width="180px" /><br /><br />
<input type="hidden" id="chknm" name = "chknm">
<input id="chkin" name = "chkin" class="form-control" /><br />
<input type="button" id="btn" value="验证" class="btn btn-primary" />
<div>
body>
html>
文件：valcode.php
php header("content-tyoe:image/png"); $num = $_GET['num']; $imagewidth = 80; $imageheight = 24; $numimage = imagecreate($imagewidth, $imageheight); imagecolorallocate($numimage, 240, 240, 240); for($i = 0; $i < 240; $i++){ $randcolor = imagecolorallocate($numimage, rand(200, 255), rand(200, 255), rand(200, 255)); imagearc($numimage, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255), $randcolor); } for($i = 0; $i < strlen($num); $i++){ $x = mt_rand(1, 10) + $imagewidth * $i / 4; $y = mt_rand(1, $imageheight / 3); $color = imagecolorallocate($numimage, mt_rand(0, 255), mt_rand(0, 255), mt_rand(0, 255)); imagestring($numimage, 5, $x, $y, $num[$i], $color); } for($i = 0; $i < 300; $i++){ $randcolor = imagecolorallocate($numimage, rand(200, 255), rand(200, 255), rand(200, 255)); imagesetpixel($numimage, rand() % 70, rand() % 20, $randcolor); } imagepng($numimage); imagedestroy($numimage);
执行代码后的效果：
