demo的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./bootstrapValidator.min.css">
<script type="text/javascript" src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrapValidator.min.js"></script>
</head>
<body>
<form id="form1" action="demo.php" method="post">
<div class="form-group">
<label for="yzm" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="yzm" name="yzm" placeholder="请输入验证码">
</div>
<div class="col-sm-6">
<img width="100" src="yzm.php" id="validcode" alt="看不清楚,点击刷新">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
</div>
</div>
</form>
<script type="text/javascript">
$(function(){
$('#validcode').click(function(){
/*alert(123)*/
$(this).attr('src','yzm.php?'+Math.random());
})
})
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
yzm: {
validators: {
notEmpty: {
message: '验证码不能为空'
}
}
}
}
});
</script>
</body>
</html>
yzm.php代码
<?php
session_start();//sessionid,随机数
//案例:生成验证码
header('content-type:image/png');
//字符串,去掉不容易识别的i,l,o,I,L,O
$str = "abcdefghjkmnpqrstuvwyzABCDEFGHJKMNPQRSTUVWXYZ0123456789";
//画布
$width = 200;
$height = 100;
$img = imagecreatetruecolor($width,$height);
//颜色
$color = imagecolorallocate($img,0xcc,0xcc,0xcc);
//填充
imagefill($img,0,0,$color);
//画噪点
for($i=0;$i<100;$i++){
$color = imagecolorallocate($img,rand(0,100),rand(0,100),rand(0,100));
$x = rand(0,$width);
$y = rand(0,$height);
imagesetpixel($img,$x,$y,$color);
}
//画噪线
for($i=0;$i<30;$i++){
$color = imagecolorallocate($img,rand(0,100),rand(0,100),rand(0,100));
$x1 = rand(0,$width);
$y1 = rand(0,$height);
$x2 = rand(0,$width);
$y2 = rand(0,$height);
imageline($img,$x1,$y1,$x2,$y2,$color);
}
//画文字
$len = strlen($str);
$font = 'simsunb.ttf';
$yzm = '';
for($i=0;$i<4;$i++){
$color = imagecolorallocate($img,255,0,0);
$index = rand(0,$len);
$chr = substr($str,$index,1);
$yzm .= $chr;
$x = 20 + $i * 40;
$y = 80;
imagettftext($img,50,rand(-70,70),$x,$y,$color,$font,$chr);
}
//保存会话
$_SESSION['yzm'] = $yzm;
//输出画布
imagepng($img);
//销毁画布
imagedestroy($img);
demo.php
<?php
session_start();
//获取表单中的数据
$yzm = $_POST['yzm'];
if(strcasecmp($yzm,$_SESSION['yzm']) != 0){
echo '验证码输入错误';
}else{
echo '验证码输入正确';
}
demo.html
我们在html中引入了bootstrap框架文件对文件的样式进行了丰富,
bootstrapValidator文件对验证码进行了非空验证,
和jquery文件对验证码进行了切换解决了看不清问题
效果图:
yzm.php
第一步:我们开启了回话
代码session_start();
第二步:定义了一个空数组。以便以后存放数组,
代码$yzm = '';
第三步:我们在for循环里定义了一个chr变量,用于获取每一次循环得到的四位数中的第一位
代码$chr = substr($str,$index,1);
第四步:我们使用 .= 把每一次循环得到的第一位连接起来。
$yzm .= $chr;
第五步:我们把得到的验证码放到imagettftext函数里
imagettftext($img,50,rand(-70,70),$x,$y,$color,$font,$chr);
第六步:保存回话
$_SESSION['yzm'] = $yzm;
demo.php
第一步:开启会话(只要使用session,我们就必须要开启会话)
第二步:获取表单中的数据
第三步:进行验证
if(strcasecmp($yzm,$_SESSION['yzm']) != 0){ echo '验证码输入错误'; }else{ echo '验证码输入正确'; }
strcasecmp
strcasecmp — 二进制安全比较字符串(不区分大小写)
说明
int strcasecmp ( string $str1 , string $str2 )
二进制安全比较字符串(不区分大小写)。
参数
str1 :第一个字符串。
str2 :第二个字符串。
返回值
如果 str1 小于 str2 ,返回负数;如果 str1 大于 str2 ,返回正数;二者相等则返回 0。