滑动拼图解锁

最新推荐文章于 2024-06-03 23:57:22 发布

Koow

最新推荐文章于 2024-06-03 23:57:22 发布

阅读量1.4w

点赞数

分类专栏： javaweb 备忘 java 文章标签：网易免费 jsp 验证码 java web

本文链接：https://blog.csdn.net/u012934723/article/details/54604217

版权

突发奇想把六位验证码登录换成滑动，后又想要加拼图解锁，苦于js技术与css技术实在是差，于是在网上找到了这个

网易云盾：点击打开链接

注册后登陆，找到下面我的产品，创建一个免费的验证码产品

然后点击创建产品操作栏的查看详情

jsp页面代码如下：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <title>易盾验证码-DEMO</title>
    <!-- 演示用js/css，非组件依赖 -->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link href='//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css' rel='stylesheet'>
</head>
<body>
<form style="max-width: 320px; margin: 120px auto;" action="/login" method="post">
    <h2 class="form-signin-heading">易盾验证码</h2>
    <input type="text" class="form-control" name="username" placeholder="账号" />
    <input type="password" class="form-control" name="password" placeholder="密码" />
    <div style="margin: 10px auto;" id="captcha_div"></div> <!-- 验证码容器元素定义 -->
    <button class="btn btn-lg btn-primary btn-block" type="submit"
         disabled="disabled" id="submit-btn">登录</button>
</form>
<script src="//c.dun.163yun.com/js/c.js"></script><!-- 验证码组件js -->
<script> // 验证码组件初始化
      var opts = {
        "element": "captcha_div", // 可以是验证码容器id，也可以是HTMLElement
        "captchaId": "ce904ccc5805479db5ae71c5febafcfb", // 这里填入申请到的验证码id
        "width": 320, // 验证码组件显示宽度
        "verifyCallback": function(ret){ // 用户只要有拖动/点击，就会触发这个回调
          if(ret['value']){ // true:验证通过 false:验证失败
            // 通过 ret["validate"] 可以获得二次校验数据
            $("#submit-btn").removeAttr("disabled"); // 用户完成拖动之后再启用提交按钮
          }
        }
      }
      new NECaptcha(opts);
  </script>
</body>
</html>

值得注意的是引用顺序：先引用验证码组件js，然后初始化，验证码组件初始化要在验证码容器的下面

最低0.47元/天解锁文章

Koow

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
滑动拼图解锁

突发奇想把六位验证码登录换成滑动，后又想要加拼图解锁，苦于js技术与css技术实在是差，于是在网上找到了这个网易云盾：点击打开链接注册后登陆，找到下面我的产品，创建一个免费的验证码产品然后点击创建产品操作栏的查看详情jsp页面代码如下：易盾验证码-DEMO
复制链接

扫一扫

专栏目录