layui滑块验证

java 专栏收录该内容
14 篇文章 0 订阅

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]&& ( ′ h e a d l i n k : l a s t ′ ) . a f t e r ( s t y l e ) ∣ ∣ ('head link:last').after(style)|| (headlink:last).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= ( ‘ < d i v i d = " (`<div id=" (<divid="{option.domid}" o p t i o n . i s A u t o V e r i f y ? ′ l a y − v e r i f y = " s l i d e r V e r i f y " ′ : ′ ′ c l a s s = " s l i d e r − i t e m " > < d i v c l a s s = " {option.isAutoVerify?'lay-verify="sliderVerify"':''}class="slider-item"><div class=" option.isAutoVerify?layverify="sliderVerify":class="slideritem"><divclass="{MOD_BG} o p t i o n . b g " > < / d i v > < d i v c l a s s = " {option.bg}"></div><div class=" option.bg"></div><divclass="{MOD_TEXT}"> o p t i o n . t e x t < / d i v > < d i v c l a s s = " {option.text}</div><div class=" 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 d o m = dom= 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)})

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值