[web]验证码篇三——使用jQuery框架实现滑块验证码

最新推荐文章于 2023-07-28 16:32:02 发布

哟米 2000

最新推荐文章于 2023-07-28 16:32:02 发布

阅读量1.2k

点赞数 2

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

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

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用jQuery框架来实现验证码，其主要步骤是：

1、下载引用jQuery文件，并放到自己的项目文件目录下

2、引用框架里验证码的相关代码

3、自行扩展代码

4、调用和验证

下面的代码里已经包含我下载的jQuery文件，

下载地址是 https://www.51qianduan.com/article/10774.html

这个网站里面有很多验证码的案例，有的已经包含很多代码和操作步骤，有兴趣同学可以自行查看~

<!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;
            padding: 5px 10px;
            text-align: center;
            font-size: 16px;
        }
    </style>

</head>
<body>
    <form>
        <div>
            <label>验证：</label>
            <div id="slider"></div>
        </div>
        <div>
            <input type="submit" value="登录" id="btnOK" disabled="disabled"/>
<!--            //disabled将当前登录显示不可用-->
        </div>
        <script type="text/javascript">
            $('#slider').slideVerify({
                type : 1,		//类型
                vOffset : 5,	//误差量，根据需求自行调整
                barSize : {
                    width : '300px',
                    height : '40px',
                },
                ready : function() {
                },
                success : function() {
                    $('#btnOK').prop("disabled", "");//验证成功，将登录按钮设为可用
                    $("#btnOK").css("background-color", "#008cba");
                },
                error : function() {
		        	alert('验证失败！');
                }
            });
        </script>
    </form>
</body>
</html>

使用jQuery框架会明显地发现代码一下子就少了很多，因为jQuery将很多功能函数包装在框架文件内部了，这样用户只需要直接去调用使用其中需要的部分即可。

好哒~加油加油！