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

介绍

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

仓库地址

gitee
github

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

演示

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

安装教程

  1. 直接引入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>

使用说明

  1. 滑块验证

    <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 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 7

file 验证不了

2周前 评论
Z_Laravel (楼主) 2周前
Z_Laravel (楼主) 2周前
ntdgg

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

2周前 评论
Z_Laravel (楼主) 1周前

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