Javascript がスライダー ログイン検証を実装する方法

ユーザーログインインターフェースでは認証コードが必要になることが多いのですが、認証コードを使うのが面倒なので最近注目しているのがスライダー認証です。jsを使ってスライダーログイン機能を実装することができます。

まずHTMLにスライダーのスタイルを書きます。もちろんCSSのスタイルを貼り付ける必要はありません

<div class="sliderBox">
     <div id="slider" class="slider" style="padding: 0 5px">                 
     </div>
</div>

jsファイルに書き込んでください

$("#slider").slider({
        width: 400, // width
        height: 40, // height
        sliderBg: "rgba(230,245,188)", // 滑块背景颜色
        color: "black", // 文字颜色
        fontSize: 14, // 文字大小
        bgColor: "rgba(78,226,153,0.40)", // 背景颜色
        textMsg: "请按住滑块，拖动到最右边", // 提示文字
        successMsg: "验证通过", // 验证成功提示文字
        successColor: "black", // 滑块验证成功提示文字颜色
        time: 400, // 返回时间
        callback: function(result) {if(result){
　　　　　　　　　　//你想干啥
                })
            }
            // 回调函数，true(成功),false(失败)
        }
    });

もちろん、jqをベースにしたjsファイルをインポートする必要があるため、jqの後に記述する必要があります。

りー

完了!

関連する推奨事項: 画像スライド検証を実装するための

js プラグイン コード例の共有

PC 側のスライド検証を実装するための jquery

以上がJavascript がスライダー ログイン検証を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。