帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Jquery+php仿12306点图验证码

帝国模板之家 2020-09-06 网页特效 评论

我们网站上进行某些特别的操作时往往会有验证码验证,这样可以提升网站安全,但也不能保证绝对安全,很多注册机都可以破解普通的验证码。今天帝国模板之家小编就给大家分享一个点图验证码,使用的是Jquery+php仿12306点图验证码。

程序效果图如下:

前端代码如下:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jquery仿12306点图验证码</title>
        <link rel="stylesheet" type="text/css" media="screen" href="public/css/ipicture.css"/>
        <script type="text/javascript" src="public/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="public/js/jquery.ipicture.js"></script>
        <script type="text/javascript" src="public/js/junphp.js"></script>
        <style type="text/css">
            body{margin:0;}
            .container{width:450px;margin: 30px auto 0}
        </style>
    </head>

    <body>
        <div class="container">
        <p id="title">加载中....</p>

        <!--图片容器-->
        <div id="iPicture" data-interaction="hover" style="width: 440px;"></div>
        <!--存储验证的容器-->
        <input type="hidden" id="iPicture_id" value="">
        
        <div style="width: 100%;float: left;margin-top: 10px"><button type="button">确认提交</button></div>
        </div>
    </body>
</html>

<script type="text/javascript">
// 请求更新图片
function get_img() {
    $.ajax({
        type: 'get',
        data:{},
        url: "demo/get_img.php",
        success: function(data) {
            var array = eval('('+data+')');

            if (array['code'] == '00') {
                $('#title').html(array['msg']);
                var html = '';
                for(var i=0; i<array['data'].length; i++){
                    html += '<div class="ip_slide" style="float: left;margin-left: 5px"><img class="ip_tooltipImg" src="'+array['data'][i]['vi_url']+'" data-id="'+array['data'][i]['vi_id']+'"></div>';
                }
                $('#iPicture').html(html);
                // 清空id池
                $('#iPicture_id').val('');
            } else {
                alert(array['msg']);
            }
        }
    });
}
// 页面自动加载一次
get_img();
// 启动红点标记插件
$("#iPicture").iPicture();

// 点击确认按钮去验证
$('button').click(function(){
    var id = $('#iPicture_id').val();
    if (id=='' || id==',') {
        alert('请先选择图片');
    }else{
        $.ajax({
            type: 'post',
            data:{'id':id},
            url: "demo/ajax_vif.php",
            success: function(data) {
                var array = eval('('+data+')');
                alert(array['msg']);
                if (array['code'] == '00') {
                    // 刷新验证码
                    get_img();
                }
            }
        });
    }
})
</script>

服务端获取图片代码(get_img.php):

<?php
// +----------------------------------------------------------------------
// | 使用demo - 获得验证码图片
// +----------------------------------------------------------------------
// | Copyright (c) 
// +----------------------------------------------------------------------

# 引入测试的数据库model
require_once dirname(__FILE__).'/Model.php';
# 引入验证码核心类库
require_once dirname(dirname(__FILE__)).'/vendor/Vif.php';

$model = new Model('vif_type');
# 1、先获得随机出来的分类
$find  = $model->order('rand()')->find();
# 2、根据随机分类,获得指定数量的图片,你想几张都可以,越多越安全
$num   = 4;
$model = new Model('vif_img');
$yes_list  = $model->field('vi_id, vi_url')->where('vt_id = '.$find['vt_id'])->order('rand()')->limit($num)->select();
# 3、再随机,获得4张除了指定分类外的其他图片
$no_list  = $model->field('vi_id, vi_url')->where('vt_id != '.$find['vt_id'])->order('rand()')->limit($num)->select();

$obj = new Vif();
# 4、调用验证码类库:将两组图片随机打乱合并成一组新数据
$img_list = $obj->MergeImg($yes_list, $no_list, $find['vt_title']);

echo $img_list;
?>

服务端验证代码(ajax_vif.php):

<?php
// +----------------------------------------------------------------------
// | 使用demo - 提交验证码核对
// +----------------------------------------------------------------------
// | Copyright (c) 
// +----------------------------------------------------------------------

# 引入验证码核心类库
require_once dirname(dirname(__FILE__)).'/vendor/Vif.php';
$vif = $_POST['id'];

$obj = new Vif();
# 4、调用验证码类库:将两组图片随机打乱合并成一组新数据
$img_list = $obj->VifResult($vif);
echo $img_list;
核心验证代码如下(Vif.php):
<?php
// +----------------------------------------------------------------------
// | 仿12306点图验证码
// +----------------------------------------------------------------------
// | Copyright 
// +----------------------------------------------------------------------

class Vif{
    private $KEY = 'jun_vif_key'; // session的key名

    /**
     * ①用于将分类图片和随机图片打乱组合,并记录需要验证的session
     *
     * @author 小黄牛
     * @param array  $yes_list 指定分类的图片数组
     * @param array  $no_list  随机的混淆图片数组
     * @param string $title    分类名称,用于生成描述文字
     * @param string $id       图片主键id的字段名
     * @return array 合并完成的图片
     * 
     */
    public function MergeImg($yes_list, $no_list, $title='', $id='vi_id'){
        # 先for,获得图片id,并写入session
        $vif_id = '';
        foreach ($yes_list as $val) {
            $vif_id .= $val[$id].',';
        }
        $vif_id = rtrim($vif_id, ',');
        $res    = $this->Session($this->KEY, $vif_id);
        if (!$res) {
            return $this->Json('01', 'Session写入失败');
        }

        # 随机合并并返回
        $list   = $this->ShuffleAssoc(array_merge_recursive($yes_list, $no_list));
        return $this->Json('00', "请点击下列所有 {$title} 图片后,点击提交!", $list);
    }

    /**
     * ②核验验证码
     * @author 小黄牛
     * @param string $vif    验证码id,使用,号间隔
     * @param bool   $status 验证失败后,是否清空seesion
     */
    public function VifResult($vif, $status=false){
        $yes_vif = $this->Session($this->KEY);

        if (!$yes_vif) {
            if ($status) {
                $this->Session($this->KEY, null);
            }
            return $this->Json('01', '验证码已过期');
        }

        $yes_vif = explode(',', $yes_vif);
        $yan_vif = explode(',', ltrim(rtrim($vif, ','), ','));

        # 先验证个数是否一致
        if (count($yan_vif) != count($yes_vif)) {
            if ($status) {
                $this->Session($this->KEY, null);
            }
            return $this->Json('01', '验证失败');
        }

        # 再验证id是否一致
        foreach ($yan_vif as $v) {
            if (!in_array($v, $yes_vif)) {
                if ($status) {
                    $this->Session($this->KEY, null);
                }
                return $this->Json('01', '验证失败');
            }
        }

        # 清空seesion
        $this->Session($this->KEY, null);
        return $this->Json('00', '验证通过');
    }

    /**
     * ③ 生成seesion
     * 
     * @author 小黄牛
     * @param string $key   键名
     * @param string $value 键值,为空时则是读取seesion
     * @param int    $time  过期时间(秒)
     * @return string || bool
     */
    private function Session($key, $value='', $time=1800){
        isset($_SESSION) || session_start();
        if($key == NULL){
            session_destroy();
            return true;
        }

        if(!empty($value)){
            if(!empty($time)){
                $Ftime = time()+$time;
                $_SESSION[$key] = $value.':'.$Ftime;
            }else{
                $Ftime = time()+C('SESSION_TIME');
                $_SESSION[$array] = $value.':'.$Ftime;
            }
            return true;
        }else{
            $AP = explode(':',$_SESSION[$key]);
            $Scode = $AP[0];
            $Stime = $AP[1];
            if(time() >= $Stime){
                return false;
            }
            return $Scode;
        }
        return false;
    }

    /**
     * ④二维数组随机排序
     *
     * @author 小黄牛
     * @param array  $list 需要排序的数组
     * @return array
     */
    private function ShuffleAssoc($list) {  
        if (!is_array($list)) return $list;  
           
        $keys = array_keys($list);  
        shuffle($keys);  
        $random = array();  
        foreach ($keys as $key) {
            $random[] = $list[$key];  
        }
        return $random;  
     }

    /**
     * ⑤返回固定格式的Json
     *
     * @author 小黄牛
     * @param string $code 状态码 00|01 成功|失败
     * @param string $msg  说明
     * @param array  $data 成功返回数据
     */
    private function Json($code, $msg, $data=array()){
        return str_replace('\\/', '/', json_encode(array(
            'code' => "{$code}",
            'msg'  => $msg,
            'data' => $data
        )));
    }
}

以上就是Jquery+php仿12306点图验证码的代码,更多好用的网站功能代码,请关注帝国模板之家。

认为总有一天可以做成的事,不如从现在开始就着手,因为只要有开始,相信成功才会近一步。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言