学做网站培训课程介绍

当前位置:

如何给网页表单添加滑动验证

为了防止网站上的表单被恶意的提交垃圾信息,我们会给网页表单添加验证功能。常见的验证就是验证码验证,之外还有滑动验证。通过滑块的滑动来进行表单验证。

网页表单滑动验证

如何给网页表单添加这种滑动验证功能呢?下面学做网站论坛介绍一下方法。

第一步:制作表单框,使用以下的HTML代码来进行制作表单框以及滑块;


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

第二步:使用以下的JS代码进行滑块验证,并且绑定提交按钮来监听是否完成了滑块验证;


<script type="text/javascript" charset="utf-8">
layui.config({
base: 'dist/sliderVerify/'
}).use(['sliderVerify', 'jquery', 'form'], function() {
var sliderVerify = layui.sliderVerify,
$ = layui.jquery,
form = layui.form;
var slider = sliderVerify.render({
elem: '#slider',
onOk: function(){//当验证通过回调
layer.msg("滑块验证通过");
}
})
$('#reset').on('click',function(){
slider.reset();
})
//监听提交
form.on('submit(formDemo)', function(data) {
if(slider.isOk()){
layer.msg(JSON.stringify(data.field));
}else{
layer.msg("请先通过滑块验证");
}
return false;
});

})
</script>

这样就可以在自己的网页表单上添加这种滑块验证功能了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 现在很多网站都是使用模板来建网站,它的优点是建站快速,修改方便,并且可以随意的在后台安装模板来更换网站的界面。下面学做网站论坛介绍一下怎么用
  • 通常我们是一个空间安装一个网站,就是直接将网站程序上传到自己的网站空间里就可以了。但如果我们想在一个主机里安装二种不同程序来建二个不同的网站
  • 目前很多企业在推广之前,都会搭建企业自己的官网,但是,很多企业都有一个通病,企业研发团队,对网站搭建一无所知,那么本教程就为您详解一下企业是
  • 通常的网站导航栏目是纯中文或者纯英文,这种比较简单,只要直接调用网站后台设置的导航菜单即可。如下图就是纯中文的导航菜单效果。也有一些网站的
  • 在很多网站的登录、注册或者表单中,都会使用到各种各样的验证。例如点击图片验证,这种验证需要用户按照要求点击所有对应的图片才算验证通过。效果如
  • 相信大家在有的网站上会看到一些图片横向轮播的效果,它可以自动不断的横向轮播,也支持手动点击轮播。效果如下图:怎么在自己做网站时,也制作这样
  • 前面的教程我们介绍了怎么安装SSL证书,实现HTTPS安全访问。有的站长使用的是国外的主机,安装了SSL证书后,出现了HTTP和HTTPS同时可以访问网站的情况
  • 外贸网站制作时,有些人会选择Bluehost主机,但有些新手不会使用Bluehost主机建网站,下面介绍一下Bluehost如何安装Wordpress程序建网站教程。方法/
  • 在做网站过程中,经常会遇到一些奇怪的问题。例如一个网站中有的网页的字体图标正常显示,但有的字体图标却显示为空白。如下图:通过浏览器的检查功
  • Z-Blog是一款国内开发的网站程序,在开发过程中,我们怎么通过代码来判断文章所属的分类呢?可以通过以下的判断代码来实现。{if $article.Cat