[Web]验证码篇五——jQuery框架实现点选式验证码

最新推荐文章于 2021-12-15 16:59:43 发布

哟米 2000

最新推荐文章于 2021-12-15 16:59:43 发布

阅读量333

点赞数 1

分类专栏： Web 文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_44566432/article/details/106007254

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

点选式验证码是通过那某种命令点选图片上的图案或字体来实现验证。

这里使用的是jQuery框架，步骤与篇三类似，这里不多做赘述。

篇三: https://blog.csdn.net/weixin_44566432/article/details/106006837

看一下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery图形点选验证码</title>
    <link rel="stylesheet" type="text/css" href="css/verify.css"/>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/verify.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        #btnOK{
            border: none;
            color: white;
            text-align: center;
            padding: 5px 10px;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>
<body>
<form action="hello.html">
    <div>
        <label>验证：</label>
        <div id="sliderImg"></div>
    </div>
    <div>
        <input type="submit" value="登录" id="btnOK" disabled="disabled">
    </div>
    <script type="text/javascript">
        $("#sliderImg").pointsVerify({
            defaultNum: 6,  //默认文字数量
            checkNum: 2,    //校对的文字数量
            vSpace: 5,
            imgName: ['1.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg'],
            imgSize: {
                width: '400px',
                height: '200px',
            },
            barSize: {
                width: '400px',
                height: '40px',
            },
            ready: function () {
            },
            success: function () {
                $("#btnOK").prop("disabled", "");
                $("#btnOK").css("background-color", "#008cba");
            },
            error: function () {
            }
        });
    </script>
</form>

</body>
</html>

哟米 2000

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Web]验证码篇五——jQuery框架实现点选式验证码

点选式验证码是通过那某种命令点选图片上的图案或字体来实现验证。这里使用的是jQuery框架，步骤与篇三类似，这里不多做赘述。篇三:https://blog.csdn.net/weixin_44566432/article/details/106006837看一下代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQ.
复制链接

扫一扫