光年模板说明文档
主题
字号
18px

sliderVerification滑块验证

该插件也是网上找的一个滑块验证插件,作者未知,原插件名jquery.slider.min.js,为了区分滑块插件,改成jquery.sliderVerification.min.js。

<div id="slider-verification" class="slider"></div>
$("#slider-verification").slider({
    width: 340,                     // width
    height: 38,                     // height
    sliderBg: "#f9fafb",            // 滑块背景颜色
    color: "#8b95a5",               // 文字颜色
    fontSize: 14,                   // 文字大小
    bgColor: "#15c377",             // 背景颜色
    textMsg: "按住滑块,拖拽验证",     // 提示文字
    successMsg: "验证通过了哦",       // 验证成功提示文字
    successColor: "#fff",           // 滑块验证成功提示文字颜色
    time: 400,                      // 返回时间
    callback: function(result) {    // 回调函数,true(成功),false(失败)
        $(".resultSpan").text(result);
    }
});

如果你需要手动去重置还款该滑块,可以执行以下的代码。

$("#slider-verification").slider("restore");

需要注意的是,该滑块验证也是前端的,并未涉及到后端。

插件项目中页面名字:test_slider_verification.html test_slider_verification_v4.html

点击查看 滑块验证 在线演示

涉及的文件: