verify.js纯前端验证码插件

版权声明:如需转载,请注明来源 https://blog.csdn.net/qq_28073073/article/details/85333819

这是一款极简洁的表单校验插件,属于半封装模式,只需引入插件,即可任意编写业务逻辑代码,简单方便易修改。

首先引入js,需提前引入jquery,然后引入verift即可使用

<script src="js/verify.js"></script>

普通验证码

 

<h3>普通验证码</h3>
<div id="demo1"></div>
<div id="demo2"></div>
//js
$('#demo1').codeVerify({
   type : 1,
   width : '400px',
   height : '50px',
   fontSize : '30px',
   codeLength : 6,
   btnId : 'check-btn',
   ready : function() {
   },
   success : function() {
      alert('验证匹配!');
   },
   error : function() {
      alert('验证码不匹配!');
   }
});
$('#demo2').codeVerify({
   type : 2,
   figure : 100,  //位数,仅在type=2时生效
   arith : 0, //算法,支持加减乘,不填为随机,仅在type=2时生效
   width : '200px',
   height : '50px',
   fontSize : '30px',
   btnId : 'check-btn2',
   ready : function() {
   },
   success : function() {
      alert('验证匹配!');
   },
   error : function() {
      alert('验证码不匹配!');
   }
});

滑块验证码

<h3>滑动验证码</h3>

<div id="demo1"></div>
<div id="demo2"></div>

    $('#demo1').slideVerify({
      type : 1,     //类型
      vOffset : 5,   //误差量,根据需求自行调整
      barSize : {
         width : '80%',
         height : '40px',
      },
      ready : function() {
      },
      success : function() {
         alert('验证成功,添加你自己的代码!');
         //......后续操作
      },
      error : function() {
//               alert('验证失败!');
      }
      
   });
    $('#demo2').slideVerify({
      type : 2,     //类型
      vOffset : 5,   //误差量,根据需求自行调整
      vSpace : 5,    //间隔
      imgName : ['1.jpg', '2.jpg'],
      imgSize : {
         width: '400px',
         height: '200px',
      },
      blockSize : {
         width: '40px',
         height: '40px',
      },
      barSize : {
         width : '400px',
         height : '40px',
      },
      ready : function() {
      },
      success : function() {
         alert('验证成功,添加你自己的代码!');
         //......后续操作
      },
      error : function() {
//               alert('验证失败!');
      }

   });

点击数字验证

扫描二维码关注公众号,回复: 4702976 查看本文章

<h3>点选验证码</h3>

<div id="demo"></div>

    $('#demo').pointsVerify({
      defaultNum : 4,    //默认的文字数量
      checkNum : 2,  //校对的文字数量
      vSpace : 5,    //间隔
      imgName : ['1.jpg', '2.jpg'],
      imgSize : {
         width: '600px',
         height: '200px',
      },
      barSize : {
         width : '600px',
         height : '40px',
      },
      ready : function() {
      },
      success : function() {
         alert('验证成功,添加你自己的代码!');
         //......后续操作
      },
      error : function() {
//               alert('验证失败!');
      }
      
   });

猜你喜欢

转载自blog.csdn.net/qq_28073073/article/details/85333819
今日推荐