1. 程式人生 > >verify.js純前端驗證碼外掛

verify.js純前端驗證碼外掛

這是一款極簡潔的表單校驗外掛,屬於半封裝模式,只需引入外掛,即可任意編寫業務邏輯程式碼,簡單方便易修改。

首先引入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('驗證失敗!');
      }

   });

點選數字驗證

 

<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('驗證失敗!');
      }
      
   });