JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能

更新時(shí)間：2022年06月07日 11:14:58 作者：肥學(xué)

滑塊驗(yàn)證碼是在網(wǎng)站、APP等應(yīng)用中常見(jiàn)的一種驗(yàn)證方式，通過(guò)按照一定規(guī)則滑動(dòng)滑塊到指定位置完成驗(yàn)證，才可以進(jìn)行下一步操作，本文給大家分享基于JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能，感興趣的朋友一起看看吧

演示

前戲

滑塊驗(yàn)證碼是在網(wǎng)站、APP等應(yīng)用中常見(jiàn)的一種驗(yàn)證方式，通過(guò)按照一定規(guī)則滑動(dòng)滑塊到指定位置完成驗(yàn)證，才可以進(jìn)行下一步操作?；瑝K驗(yàn)證碼有兩種設(shè)計(jì)，一種是在滑動(dòng)框內(nèi)“一滑到底”即完成驗(yàn)證的，還有一種是滑動(dòng)滑塊拼合拼圖完成驗(yàn)證的。由于拼圖式的滑塊驗(yàn)證碼安全性更高，趣味性更強(qiáng)，所以多數(shù)網(wǎng)站或APP都選擇了拼圖式的滑塊驗(yàn)證碼。

拼圖式的滑塊驗(yàn)證碼在業(yè)務(wù)應(yīng)用中有三種展現(xiàn)形式，觸發(fā)式、嵌入式和彈出式。觸發(fā)式即鼠標(biāo)光標(biāo)移入驗(yàn)證條后才顯示驗(yàn)證拼圖，不影響網(wǎng)頁(yè)原有的排版。嵌入式即拼圖驗(yàn)證區(qū)域直接嵌入展示在網(wǎng)頁(yè)，清晰直觀，便于用戶使用。彈出式一般可以綁定自有驗(yàn)證方式，點(diǎn)擊驗(yàn)證后才彈出滑動(dòng)驗(yàn)證碼，比如用戶輸入用戶名和密碼，點(diǎn)擊登錄后，頁(yè)面彈出滑塊驗(yàn)證碼。

源碼介紹

主頁(yè)樣式設(shè)計(jì)

  .bxs-row {
            margin-bottom:12px;
        }
        .logo-box {
            width:404px;
            margin:120px auto;
            border:1px solid #e5e5e5;
            border-radius:4px;
            box-shadow:0 4px 18px rgba(0,0,0,0.2);
            position:relative;
            overflow:hidden;
            height:360px;
        }
        .login {
            position:absolute;
            width:320px;left:0;
            top:0;
            padding: 42px 42px 36px;
            transition:all 0.8s;
        }
        .username,.password,.btn {
            height: 44px;
            width: 100%;
            padding: 0 10px;
            border: 1px solid #9da3a6;
            background: #fff;
            text-overflow: ellipsis;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -khtml-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            color: #000;
            font-size: 1em;
            font-family: Helvetica,Arial,sans-serif;
            font-weight: 400;
            direction: ltr;
            font-size:13px;
        }
        .submit {
            background-color: #0070ba;
            color:#fff;
            border:1px solid #0070ba;
        }
        .submit:hover {
            background-color:#005ea6;
        }
        .verBox {
            position:absolute;
            width:100%;
            text-align:center;
            left:404px;
            top:0;
            opacity:0;
            transition:all 0.8s;
            padding-top:55px;
        }
        .err {
            margin:12px 0 0;
            line-height:12px;
            height:12px;
            font-size:12px;
            color:red;
        }

滑塊驗(yàn)證部分

這里使用了一個(gè)工具img_ver.js網(wǎng)上都是關(guān)于vue的沒(méi)有這個(gè)簡(jiǎn)單

imgVer({
            el:'$("#imgVer")',
            width:'260',
            height:'116',
            img:[
                'images/ver-1.png',
                'images/ver-2.png',
            ],
            success:function () {
                //alert('執(zhí)行登錄函數(shù)');
                $(".login").css({
                    "left":"0",
                    "opacity":"1"
                });
                $(".verBox").css({
                    "left":"404px",
                    "opacity":"0"
                });
                $(".tips").html('你是不是不知道賬號(hào)密碼！？？？');
                $("#logo").attr("src",'images/login-err.png')
            },
            error:function () {
                //alert('錯(cuò)誤什么都不執(zhí)行')
            }
        });

img_ver內(nèi)部

滑塊移動(dòng)和驗(yàn)證部分

  ctx.moveTo(X, Y);
    ctx.lineTo(X + d, Y);
    ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx.lineTo(X + 3 * d, Y);
    ctx.lineTo(X + 3 * d, Y + d);
    ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx.lineTo(X + 3 * d, Y + 3 * d);
    ctx.lineTo(X, Y + 3 * d);
 ctx_l.moveTo(X, Y);
    ctx_l.lineTo(X + d, Y);
    ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx_l.lineTo(X + 3 * d, Y);
    ctx_l.lineTo(X + 3 * d, Y + d);
    ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx_l.lineTo(X + 3 * d, Y + 3 * d);
    ctx_l.lineTo(X, Y + 3 * d);
ctx_s.moveTo(X, Y);
    ctx_s.lineTo(X + d, Y);
    ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx_s.lineTo(X + 3 * d, Y);
    ctx_s.lineTo(X + 3 * d, Y + d);
    ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx_s.lineTo(X + 3 * d, Y + 3 * d);
    ctx_s.lineTo(X, Y + 3 * d);

其他的我就不展示了都是位置坐標(biāo)。

到此這篇關(guān)于JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能的文章就介紹到這了,更多相關(guān)js滑塊驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: