verify.js纯前端验证码插件

最新推荐文章于 2024-07-29 08:34:21 发布

礼拜八

最新推荐文章于 2024-07-29 08:34:21 发布

阅读量1.2w

点赞数 2

分类专栏： js 文章标签：前端验证码滑块验证码拼图验证码选字验证码

本文链接：https://blog.csdn.net/qq_28073073/article/details/85333819

版权

verify.js是一款轻量级的前端验证码插件，支持滑块和点选数字两种验证方式，易于集成和定制。通过引入jQuery和verify.js库，开发者可以快速实现表单验证功能。示例代码包括滑动验证码和点选数字验证码的HTML结构。源码可在CSDN上获取，无积分或C币的用户可直接复制提供的代码创建verify.js文件。

摘要由CSDN通过智能技术生成

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

首先引入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>

    $('#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>

    $('#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('验证失败！');
      }
      
   });

想下载verify.js 可以移步 https://download.csdn.net/download/qq_28073073/10884596

没有积分或C币，可以新建verify.js，拷贝下方代码即可

;(function($, window, document,undefined) {
	
	//定义Code的构造函数
    var Code = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
        	type : 1,
        	figure : 100,	//位数，仅在type=2时生效
        	arith : 0,	//算法，支持加减乘，0为随机，仅在type=2时生效
        	width : '200px',
		    height : '60px',
		    fontSize : '30px',
        	codeLength : 6,
        	btnId : 'check-btn',
        	ready : function(){},
        	success : function(){},
            error : function(){}
        },
        this.options = $.extend({}, this.defaults, opt)
    };
    
    var _code_chars = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    var _code_color1 = ['#fffff0', '#f0ffff', '#f0fff0', '#fff0f0'];
    var _code_color2 = ['#FF0033', '#006699', '#993366', '#FF9900', '#66CC66', '#FF33CC'];
    
    //定义Code的方法
    Code.prototype = {
    	init : function() {
			
			var _this = this;
			
			this.loadDom();
			this.setCode();
			
			this.options.ready();
			
			this.$element[0].onselectstart = document.body.ondrag = function(){ 
				return false; 
			};
			
			//点击验证码
			this.$element.find('.verify-code, .verify-change-code').on('click', function() {
				_this.setCode();
			});
			
			//确定的点击事件
			this.htmlDoms.code_btn.on('click', function() {
				_this.checkCode();
			})
			
    	},
    	
    	//加载页面
    	loadDom : function() {
    		var panelHtml = '<div class="cerify-code-panel"><div class="verify-code"></div><div class="verify-code-area"><div class="verify-input-area"><input type="text" class="varify-input-code" /></div><div class="verify-change-area"><a clas