首先是验证码的生成,由于验证码可能很多页面要用到,所以推荐写在比较公共的公共器下。
1、编写验证码的函数:
public function verify_create(){
//对验证码图片的一些设置,详细参见thinkphp官方文档
// $config = array(
// 'fontSize'=>100,//字体大小
// 'useNoise'=>true,//是否产生杂点干扰
// );
// $verify = new \Think\Verify($config);
//这里我直接使用官方默认样式了
$verify = new \Think\Verify();
$verify->entry();
}
2、在html页面嵌入验证码图片
//src指向的就是刚才生成验证码的那个函数,我写在BaseController下的verify_create()里面
<img src="{:U('Base/verify_create')}" class="verify-content" title="点击刷新">
<input type="text" id="verify" placeholder="填写验证码">
<input type="button" value="提交验证码">
//当然,关于图片的长和宽我在了css里面了
写到这里,在我们的页面已经能够看到验证码的图片了。
3、实现点击图片刷新验证码
(这里我们的原理是:通过jquery修改图片的src属性来完成,请求的处理函数一样,只是在请求后加一个随机数,区别上一张图片的请求)
//我这里直接用jq写的
$(function(){
//刷新验证码
function refresh_verify(){
var verify_img = $(".verify-content");
var verify_src = verify_img.attr('src');
var new_src;
new_src = verify_src+"?random="+Math.random();
verify_img.attr("src",new_src);
}
$(".verify-content").click(function(){
refresh_verify();
});
});
4、验证码的验证
(原理:我们在后台接收到传过来的验证码$code,为了避免页面的刷新,强烈推荐用ajax)
//先写后台验证代码
//验证码验证(建议写在公共函数里面,参见官方文档)
public function check_verify($code,$id=""){
$verify = new \Think\Verify();
return $verify->check($code,$id);
}
//接收验证码
public function get_msg(){
$code = $_POST['code'];
$ok = $this->check_verify($code);
//定义ajax返回信息
$msg = $ok?"验证码验证成功!":"验证码验证失败!";
$this->ajaxrReturn($msg);
}
//通过ajax提交验证码
$("input[type=button]").click(
$.post(
//这就是上面get_msg()函数所在路径,由于刚学JS不久,所以对js中路径问题不太熟悉,这里我大概只会这种方式吧-_-!!
"http://"+window.location.host+"index.php/Home/Index/index",
//参数列表
{code:$("#verify").val()},
function(data){
alert(data);
}
);
);
以前我也一直不懂验证码怎么放到html页面的,怎么实现刷新的(因为我一开始学的是php,没学前端),每当遇到这种情况,我们的包工头文桥总会帮我们摆平,今天搞懂了,还是有点小开心啊!!