滑块验证是否人机

最新推荐文章于 2025-03-21 10:47:32 发布

原创

最新推荐文章于 2025-03-21 10:47:32 发布 · 748 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css #ali #滑块验证 #验证码

效果图：

原理：

使用阿里第三方验证插件js生成滑块，默认获取验证码按钮为不可点击属性
    .getyzm{
        pointer-events: none;
        cursor: default;
    }
再添置一个可点击属性的类
    .getyzmok{
        color: #000000 !important;
        pointer-events: visible;
    }
当滑块滑动到右侧时触发success回调，在回调函数里给验证码按钮添加可点击属性类
const getyzmbtn = document.querySelector('.getyzm');
                getyzmbtn.classList.add('getyzmok');

文档：

如何集成滑动验证的前端页面代码_验证码(Captcha)-阿里云帮助中心

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>

<div id="nc"></div>
                        <div class="row" style="text-align: center;mar