layui滑块验证

jscript内容

var num = 0;//记录变量
layui.config({
base: ‘js/’//文件夹下
}).use([‘sliderVerify’, ‘jquery’, ‘form’], function () {
var sliderVerify = layui.sliderVerify,
$ = layui.jquery,
form = layui.form;
var slider = sliderVerify.render({
elem: ‘#slider’,
onOk: function () {//当验证通过回调
layer.msg(“滑块验证通过”);
num=1;
}
});
/* $(’#reset’).on(‘click’,function(){
slider.reset();
})*/
//监听提交
form.on(‘submit(DSP-user-login-submit)’, function (data) {
if (slider.isOk()) {
// alert(“监听········slider”);
num=1
// layer.msg(JSON.stringify(data.field));
} else {
layer.msg(“请先通过滑块验证”);

        }
        return false;
    });

})

js文件内容 sliderVerify.js

layui.define([‘jquery’,‘layer’,‘form’],function(exports){“use strict”;var KaTeX parse error: Expected '}', got '#' at position 169: …ckground-color:#̲d0d0d0;position…(‘head link:last’)[0]&&${(}^{\prime }headlink:las{t}^{\prime }).after(style)||$(‘head’).append(style)}()},dom=function(d){return d[0]},thisSliderVerify=function(){var that=this;return{isOk:function(){return that.isOk.call(that)},reset:function(){return that.reset.call(that)}}},MOD_NAME=‘sliderVerify’,MOD_BTN=‘slider-btn’,MOD_BG=‘slider-bg’,MOD_TEXT=‘slider-text’,MOD_NEXT=‘layui-icon-next’,MOD_OK=‘layui-icon-ok-circle’,MOD_BTN_SUCCESS=‘slider-btn-success’,MOD_DEFAULT_BG=‘layui-bg-green’,MOD_ERROR_BORDER=‘slider-error’,MOD_CONFIG_TEXT=‘请拖动滑块验证’,MOD_CONFIG_SUCCESS=‘验证通过’,Class=function(option){var that=this;that.config=KaTeX parse error: Expected 'EOF', got '}' at position 45: …);that.render()}̲;Class.prototyp…(option.elem);if(!elem[0])return;if(option.domid)option.domid.remove();option.domid=that.createIdNum();var sliderDom=$(‘<divid="${option.domid}"$option.isAutoVerify{?}^{\prime }lay-verify="sliderVerify{"}^{\prime }{:}^{\prime \prime }class="slider-item"><divclass="${MOD_BG} $option.bg"></div><divclass="${MOD_TEXT}">$option.text</div><divclass="${MOD_BTN} layui-icon layui-icon-next">`);elem.hide().after(sliderDom);option.domid=$(’#’+option.domid);that.events();if(option.isAutoVerify){form.verify({sliderVerify:function(value,dom){if(!value){dom.classList.add(MOD_ERROR_BORDER);return option.text}}})}};Class.prototype.isMobile=function(){return(device.os==‘ios’||device.os==‘android’)};Class.prototype.createIdNum=function(){return MOD_NAME+(+new Date()).toString()+(Math.random().toString()).substr(2,7)};Class.prototype.isOk=function(){return this.config.isOk};Class.prototype.error=function(msg){return layer.msg(msg,{icon:5})};Class.prototype.distance=function(){var container=this.config.container;return container.box.offsetWidth-container.btn.offsetWidth};Class.prototype.reset=function(){this.config.isOk=false;return this.render()};Class.prototype.resize=function(distance){var that=this,container=that.config.container;var distance=distance||that.distance();container.btn.style.left=distance+“px”;container.bg.style.width=distance+“px”};Class.prototype.cancelTransition=function(){var container=this.config.container;this.config.domid[0].classList.remove(MOD_ERROR_BORDER);container.btn.style.transition="";container.bg.style.transition=""};Class.prototype.down=function(e){var that=this,option=that.config,container=option.container,e=e||window.event,downX=e.clientX||e.touches[0].clientX;that.cancelTransition();var move=function(e){that.move(downX,e)};that.events.move=move;if(that.isMobile()){document.addEventListener(‘touchmove’,that.events.move)}else{document.οnmοusemοve=move}};Class.prototype.move=function(down,e){var that=this,option=that.config,container=option.container;var e=e||window.event;let moveX=e.clientX||e.touches[0].clientX;var offsetX=moveX-down;if(offsetX>container.distance){offsetX=container.distance}else if(offsetX<0){offsetX=0}container.btn.style.left=offsetX+“px”;container.bg.style.width=offsetX+“px”;if(offsetXcontainer.distance){container.text.innerHTML=MOD_CONFIG_SUCCESS;var com=window.getComputedStyle?window.getComputedStyle(container.bg,null):container.bg.currentStyle;container.btn.style.border='1px solid '+com.backgroundColor;container.btn.style.color=com.backgroundColor;container.btn.classList.remove(MOD_NEXT);container.btn.classList.add(MOD_OK,MOD_BTN_SUCCESS);option.isOk=true;container.box.value=true;if(that.isMobile()){container.btn.removeEventListener(‘touchstart’,that.events.down,false);document.removeEventListener(‘touchmove’,that.events.move,false)}else{container.btn.οnmοusedοwn=null;document.οnmοusemοve=null}option.onOk&&typeof option.onOk’function’&&option.onOk();return}var seup=function(e){that.stop(e)};that.events.seup=seup;if(that.isMobile()){document.addEventListener(‘touchend’,seup)}else{document.οnmοuseup=seup}};Class.prototype.stop=function(e){var that=this,option=that.config,container=option.container;if(that.isOk()){return}else{container.btn.style.left=0;container.bg.style.width=0;container.btn.style.transition=“left 1s ease”;container.bg.style.transition=“width 1s ease”}document.οnmοusemοve=null;document.οnmοuseup=null;if(that.isMobile()){document.removeEventListener(‘touchmove’,that.events.move,false);document.removeEventListener(‘touchend’,that.events.seup,false)}};Class.prototype.events=function(){var that=this,option=that.config;if(!option.domid)return that.error(‘创建滑块验证失败’);var btn=option.domid.find(’.’+MOD_BTN),bg=option.domid.find(’.’+MOD_BG),text=option.domid.find(’.’+MOD_TEXT),container={box:dom(option.domid),btn:dom(btn),bg:dom(bg),text:dom(text)};option.container=container;container.distance=that.distance();var down=function(e){that.down(e)};that.events.down=down;if(that.isMobile()){container.btn.addEventListener(‘touchstart’,that.events.down)}else{container.btn.οnmοusedοwn=down}var $dom=$(window);$dom.on(‘resize’,option.domid,function(){if(that.config.isOk){that.resize()}})};sliderVerify.render=function(option){var inst=new Class(option);return thisSliderVerify.call(inst)};exports(MOD_NAME,sliderVerify)})