[url=https://github.com/cnblogs-/php-captcha]https://github.com/cnblogs-/php-captcha[/url]
[b]1. 创建带验证码的图片,并模糊背景[/b]
随机码采用16进制;模糊背景即在图片背景加上线条、雪花等。
1)创建随机码
[url=style/basic.css]
</head>
<body>
<div id="testcode">
<form method="post" name="verification" action="verification-code.php?action=verification">
<dl>
<dd>验证码:<input type="text" name="code" class="code" /><img src="codeimg.php" id="codeimg" /></dd>
<dd><input type="submit" class="submit" value="验证" /></dd>
</dl>
</form>
</div>
</body>
</html>
显示如下:
[img]http://files.jb51.net/file_images/article/201502/2015021214563810.png[/img]
2)创建产生验证码图片页面
创建codeimg.php为verification-code.php html代码里的img提供验证码图片
首先必须在codeimg.php页面开启session;
其次,将我们封装好的global.func.php全局函数库引入进来;
最后,运行_code();
<?php
/**
* [verification-code] (C)2015-2100 jingwhale.
*
* This is a freeware
* $Id: codeimg.php 2015-02-05 20:53:56 jingwhale$
*/
//开启session
session_start();
//引入全局函数库(自定义)
require dirname(__FILE__).'/includes/global.func.php';
//运行验证码函数。通过数据库的_code方法,设置验证码的各种属性,生成图片
_code(125,25,6,false);
?>
[img]http://files.jb51.net/file_images/article/201502/2015021214563811.png[/img]
3)创建session检验机制
首先必须在verification-code.php页面也开启session;
其次,设计提交验证码的方式,本文以get方式提交,当action=verification时提交成功;
最后,创建验证函数,原理是将客户端用户提交的验证码同服务器codeimg.php中session的验证码是否一致;这里有一个js弹窗函数_alert_back(),我们也把它封装在global.func.php里;
修改verification-code.php中php代码如下:
[url=style/basic.css]
<script type="text/javascript" src="js/codeimg.js"></script>
</head>
<body>
<div id="testcode">
<form method="post" name="verification" action="verification-code.php?action=verification">
<dl>
<dd>验证码:<input type="text" name="code" class="code" /><img src="codeimg.php" id="codeimg" /></dd>
<dd><input type="submit" class="submit" value="验证" /></dd>
</dl>
</form>
</div>
</body>
</html>
[img]http://files.jb51.net/file_images/article/201502/2015021214563812.gif[/img]
[b]3.实现点击验证码图片更新验证码[/b]
上面若想实现验证码更新,必须刷新页面;我们写一个codeimg.js函数实现点击验证码图片更新验证码
window.onload = function () {
var code = document.getElementById('codeimg');//通过id找到html中img标签
code.onclick = function () {//为标签添加点击事件
this.src='codeimg.php?tm='+Math.random();//修改时间,重新指向codeimg.php
};
}
然后在verification-code.php html代码head里<link>它即可。
[img]http://files.jb51.net/file_images/article/201502/2015021214564813.gif[/img]