验证码的作用是防止机器提交，防止机器暴力破解密码或向数据库提交垃圾数据。本验证码是根据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);
执行代码后的效果：
