Wangren

---

没错，下面要出场的就是当前应用广泛的鼠标滑动验证模块，看似简单，实则功能强大哦！

<div id="slider"></div>

<script type="text/javascript">
    wui.use('sliderVerify', function(){
        var sliderVerify = wui.sliderVerify;
        var slider = sliderVerify.render({
            elem: '#slider'
        });
    });
</script>

看到吗，就是这么方便！

参数选项	说明	类型	默认值
elem	指向滑块的容器，值可以是容器ID、CLASS类。如： #slider , .slider	String	-
isAutoVerify	关闭自动验证	Boolean	true
bg	自定义背景样式名	String	-
text	未验证前滑块上显示的文字	String	-
onOk	当验证通过回调 function(){ console.log("滑块验证通过"); }	-	-

获取当前实例是否已经滑动成功，可以拿去放在你自己想要验证的 form 中，作为校验依据。

    //配合 from 组件，监听提交
    form.on('submit(formDemo)', function(data) {
        if(slider.isOk()){    //用于表单验证是否已经滑动成功
            layer.msg(JSON.stringify(data.field));
        }else{
            layer.msg("请先通过滑块验证");
        }
        return false;
    });

使用该方法可以将组件重置

输入框

滑动验证

立即提交 重置

<form class="wui-form" action="">
    <div class="wui-form-item">
        <label class="wui-form-label">输入框</label>
        <div class="wui-input-block">
            <input type="text" name="title" required w-verify="required" placeholder="请输入标题" autocomplete="off" class="wui-input">
        </div>
    </div>
    <div class="wui-form-item">
        <label class="wui-form-label">滑动验证</label>
        <div class="wui-input-block">
            <div id="sliderDemo"></div>
        </div>
    </div>
    <div class="wui-form-item">
        <div class="wui-input-block">
            <button class="wui-btn" w-submit w-filter="formDemo">立即提交</button>
            <button type="reset" id="reset" class="wui-btn wui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    wui.use(['sliderVerify','form','layer'], function(){
        var sliderVerify = wui.sliderVerify
                ,form = wui.form
                ,layer = wui.layer
                ,$ = wui.$;

        var slider = sliderVerify.render({
            elem: '#sliderDemo',
            bg:'wui-bg-red',
            //isAutoVerify:false,
            text : '滑动一下有惊喜！'
        });

        //监听提交
        form.on('submit(formDemo)', function(data) {
            if(slider.isOk()){    //用于表单验证是否已经滑动成功
                layer.msg(JSON.stringify(data.field));
            }else{
                layer.msg("请先通过滑块验证");
            }
            return false;
        });

        //重置滑块
        $('#reset').click(function(){
            slider.reset();
        });

    });
</script>