WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
滑块验证 - wui.sliderVerify

依赖加载模块:sliderVerify

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

<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>
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile