版权声明:如需转载,请注明来源 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('验证失败!'); } });