网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。
我们网站上进行某些特别的操作时往往会有验证码验证，这样可以提升网站安全，但也不能保证绝对安全，很多注册机都可以破解普通的验证码。今天帝国模板之家小编就给大家分享一个点图验证码，使用的是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
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论