JavaScript如何實現(xiàn)拼圖式滑塊驗證功能

這篇文章主要介紹“JavaScript如何實現(xiàn)拼圖式滑塊驗證功能”，在日常操作中，相信很多人在JavaScript如何實現(xiàn)拼圖式滑塊驗證功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript如何實現(xiàn)拼圖式滑塊驗證功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

演示

前戲

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

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

源碼介紹

主頁樣式設計

  .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;
        }

滑塊驗證部分

這里使用了一個工具img_ver.js網(wǎng)上都是關于vue的沒有這個簡單

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('你是不是不知道賬號密碼??？？？');
                $("#logo").attr("src",'images/login-err.png')
            },
            error:function () {
                //alert('錯誤什么都不執(zhí)行')
            }
        });

img_ver內(nèi)部

滑塊移動和驗證部分

  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);

到此，關于“JavaScript如何實現(xiàn)拼圖式滑塊驗證功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>