Js使用滑块验证码验证网页并提交

分类:

使用js进行简单的滑块验证是目前比较流行的验证方式，示例和代码实现如下：

按照示例讲解，首先，需要三张图，分别是背景图，盘子，苹果。

背景图是不动的，盘子的位置是随机的，随机数应该由随机数产生，调节盘子图片的left属性改变位置。即盘子的left属性为验证码。

苹果图在range控件的mousemove和valuechange时间下，苹果的位置根据range控件的拉动而改变。

根据苹果和盘子的相对位置进行判断，验证成功可以直接提交表单也间接控制某一button是否可用。

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>滑动验证提交示例</title>
    <style>
        .yz-bg {
            border: 1px solid #000;
            height: 100px;
            width: 200px;
            background:url(../images/UI/y1.jpg)  no-repeat center;
        }
        .yz-rdm {
            background:url(../images/UI/y2.png)  no-repeat center;
            width:76px;height:36px;
            position: relative;
            bottom:-61px;
            left: 64px;
        }
        .yz-apple {
            background:url(../images/UI/y3.png)  no-repeat center;
            width:60px;height:30px;
            position: relative;
            bottom:-28px;
            left: 72px;
        }
        input[type=range] {
            width: 200px;
            -webkit-appearance: none;
            border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
        }

            /*input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none;
            }*/

            input[type=range]::-webkit-slider-runnable-track {
                height: 15px;
                border-radius: 10px; /*将轨道设为圆角的*/
                box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
            }

            input[type=range]:focus {
                outline: none;
            }

            input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none;
                height: 25px;
                width: 25px;
                margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
                background: #ffffff;
                border-radius: 50%; /*外观设置为圆形*/
                border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
                box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
            }

    </style>
</head>
<body>
    <form id="form1" runat="server">

        <div >
            <div class="yz-bg ">
                <div runat="server" id="rmd" class="yz-rdm"></div>
                <div class="yz-apple" id="conSlide"></div>
            </div>
             <input type="range" id="range" value="0" onchange="rangechange()" onmousemove="rangechange()"/>
        </div>
    </form>
</body>
            <script>
                function rangechange() {
                    range.max = 160;
                    conSlide.style.left = (range.value - 10) + "px";
                    var btn = document.getElementById("ContentPlaceHolder1_btn_comment");
                    var rmd = document.getElementById("ContentPlaceHolder1_rmd");
                    if (Math.abs(range.value - 10 - rmd.offsetLeft) < 10) {
                        btn.disabled = false;
                        btn.value = "回复";
                        btn.style.backgroundColor = "#3366ff";
                    }
                    else {
                        btn.value = "失效";
                        btn.disabled = true;
                        btn.style.backgroundColor = "gray";
                    }
                }
            </script>
</html>

目前基本实现了滑块验证的功能，虽然盘子位置随机数是服务器产生，但盘子的left属性是可读的，因此input-range的数值区间可以估算得出。更安全的做法可以：在后台把盘子和背景图片叠层为一张图片，拖拽range控件时与后台保存的随机数进行验证。前台代码改变不大。

songshizhao

为此篇作品打分

发表评论

个人资料

Js使用滑块验证码验证网页并提交

评论