JavaScript實現拼圖式滑塊驗證功能

Posted on by

演示

前戲

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

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

源碼介紹

主頁樣式設計

  .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網上都是關於vue的沒有這個簡單

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

img_ver內部

滑塊移動和驗證部分

  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實現拼圖式滑塊驗證功能的文章就介紹到這瞭,更多相關js滑塊驗證內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：