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

网页特效

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

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

Jquery+php仿12306点图验证码

帝国模板之家 2020-09-06 网页特效 ℃ 评论
演示 下载

本文标签： jquery插件

我们网站上进行某些特别的操作时往往会有验证码验证，这样可以提升网站安全，但也不能保证绝对安全，很多注册机都可以破解普通的验证码。今天帝国模板之家小编就给大家分享一个点图验证码，使用的是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点图验证码的代码，更多好用的网站功能代码，请关注帝国模板之家。

赞 ()

转载请注明来源：Jquery+php仿12306点图验证码

本文永久链接地址：https://www.moyouyouw.cn/code/434.html

郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。

这世上无忧无虑的人，反而相对寿命会长点。

本文关键字： jQuery验证码

已有 位小伙伴发表了看法

欢迎 你 发表评论

  • 匿名发表
栏目分类
标签云
jquery插件 vue插件 css3插件 动画 js插件 bootstrap插件 表单 图表和图像 菜单和导航 UI框架 文本 布局 时间和日期 拖拽 图像 弹出层 幻灯片和轮播图 滚动 图片展示 滑块和旋转 表格 加载 提示工具 灯箱 选择框 文件树 Tabs 悬停 放大镜和缩放 上传 拾色器 搜索 对话框 表单验证 视频音频 手风琴 登陆和注册 canvas 筛选及排序 输入 分页 标签 触摸 垂直导航 倒计时 自动完成 绘图 密码 评分 水平导航

关于

帝国cms模板

网页插件

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

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

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