配合滑块图片验证的JS来了，一行js引入即可实现

Z_Laravel 的个人博客 / 293 / 7 / 创建于 2周前 / 更新于 2周前

介绍

滑块、旋转、点击等图片验证的前端js，引入一行js即可方便快捷使用
后端api请阅读博客滑块验证图片

仓库地址

觉得不错的话，点个星星，谢谢大家

演示

滑块前端演示 kkokk.github.io/captcha/

安装教程

直接引入js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>图片验证DEMO</title>
    </head>
    <body>
        <button type="button" onclick="captcha()">
            验证
        </button>
    </body>
</html>
<script type="text/javascript" src="./slider/slider.js"></script>

使用说明

滑块验证

<script type="text/javascript">
    function captcha(){
        // 根据 poster 获取验证参数
        var res = {
             title: '',
             sliderBg: './slider/img/slider.png',
             sliderKey: '1212',
             sliderY: 46
        };
        sliderStart(res,
        function(sliderKey, sliderX, sliderSuccess, sliderError){
            // sliderKey // 验证key
            // sliderX // 验证x轴距离
            // ...调用验证接口

            // 模拟调用验证接口
            const check = () => {
                  const leeway = 5 // 误差值
                  const value = 208 // 正确值
                  if(value >= (sliderX - leeway) && value <= (sliderX + leeway)){
                      // 成功调用该方法
                      sliderSuccess()
                  } else {
                      // 错误调用该方法
                      // 模拟调用获取验证参数接口
                      getSliderOption(sliderError)
                  }
            }
            setTimeout(function(){
                check()
            }, 1000)
        },
        function(refresh){
            // 刷新
            // ... 需要调用刷新接口 重新获取图片参数

            // 模拟调用获取验证参数接口
            setTimeout(function(){
                getSliderOption(refresh)
            }, 1000)

        })
    }

    // 获取验证参数接口
    function getSliderOption(callback){
        const res = {
            sliderBg: './slider/img/slider.png', 
            sliderKey: '1212', 
            sliderY: 46
        }
        callback(res)
    }
</script>

本作品采用《CC 协议》，转载必须注明作者和本文链接

161 声望

暂无个人描述~

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

《L05 电商实战》

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

推荐文章：

更多推荐...

如何在 Laravel 中创建一个简单的事件流？ 20 / 13 |

我是如何把网站图片cdn流量成本压到全网最低(之一)的 34 / 31 |

🎈 Slow Admin - 使用Laravel和Amis快速构建你的后台 25 / 35 |

用Go实现支持多种协议的抓包工具——Shermie-Proxy 22 / 34 |

大佬的收藏夹 79 / 21 |

使用 Laravel Filament 极速搭建美观大方的后台面板 21 / 44 |

讨论数量: 7

甜筒君

课程读者 43 声望

不错，先试试看

2周前评论

PHP-Coder

课程读者 39 声望

:+1:

1周前评论

铁牛

20 声望

file 验证不了

2周前评论

Z_Laravel （楼主）

demo验证结果随机的，这里没做验证

Z_Laravel （楼主）

我改一下，改成可验证的

ntdgg

课程读者 51 声望 / CEO @ 流之云科技

:+1: 这么优秀的，我还是第一次见

2周前评论

Z_Laravel （楼主）

😁😁

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

1 篇 2023 年 1 月 3 篇 2022 年 12 月 1 篇 2022 年 5 月 2 篇 2021 年 10 月

2周前配合滑块图片验证的JS来了，一行js引入即可实现 1个月前点击验证图片 1个月前旋转图片验证 1个月前滑块验证图片 8个月前 PHP海报

63 基于 GD 库和 phpqrcode 的海报生成插件 14 滑块验证图片 9 PHP海报 9 旋转图片验证 7 配合滑块图片验证的JS来了，一行js引入即可实现

博客标签

多用户登录

成为赞助商