网站首页 > 技术教程 正文
verify.js是一款功能强大的jquery验证码插件。verify.js可以实现普通的图形验证码，数字验证码，滑动验证码和点选验证码等多种验证码功能。
1、普通验证码
就是所有英文字母和数字的组合，可以随意设置组合的位数
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h3>普通验证码</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn" class="verify-btn">确定</button>
</div>
</div>
$('#mpanel2').codeVerify({
type : 1,
width : '400px',
height : '50px',
fontSize : '30px',
codeLength : 6,
btnId : 'check-btn',
ready : function() {
},
success : function() {
alert('验证匹配！');
},
error : function() {
alert('验证码不匹配！');
}
});
2、数字计算验证码
算法，支持加减乘，不填为随机，仅在type=2时生效
$('#mpanel3').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('验证码不匹配！');
}
});
3、滑动滑块到最右侧完成验证
$('#mpanel1').slideVerify({
type : 1, //类型
vOffset : 5, //误差量，根据需求自行调整
barSize : {
width : '80%',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
//alert('验证失败！');
}
});
4、拖动方块到空白处完成验证(图片)
$('#mpanel4').slideVerify({
type : 2, //类型
vOffset : 5, //误差量，根据需求自行调整
vSpace : 5, //间隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '400px',
height: '200px',
},
blockSize : {
width: '40px',
height: '40px',
},
barSize : {
width : '400px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
5、点选验证码（点击图片上的文字 按顺序）
$('#mpanel5').pointsVerify({
defaultNum : 4, //默认的文字数量
checkNum : 2, //校对的文字数量
vSpace : 5, //间隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '600px',
height: '200px',
},
barSize : {
width : '600px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>jquery验证码插件verify.js</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<link rel="stylesheet" type="text/css" href="css/verify.css">
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="js/verify.js" ></script>
</head>
<body>
<div>
<div>
<div>
<div class="col-md-offset-4 col-md-4">
<h3>普通验证码</h3>
<div id="mpanel2" ></div>
<button type="button" id="check-btn">确定</button>
</div>
</div>
<hr>
<div>
<div class="col-md-offset-4 col-md-4">
<h3>数字计算验证码</h3>
<div id="mpanel3" style="margin-top: 20px"></div>
<button type="button" id="check-btn2">确定</button>
</div>
</div>
<hr>
<div>
<div class="col-md-offset-4 col-md-4">
<h3>滑动验证码</h3>
<p>滑动滑块到最右侧完成验证</p>
<div id="mpanel1" ></div>
<p style="margin-top:50px;">拖动方块到空白处完成验证</p>
<div id="mpanel4" ></div>
</div>
</div>
<hr>
<div>
<div class="col-md-offset-4 col-md-4">
<h3>点选验证码</h3>
<div id="mpanel5" style="margin-top:50px;"></div>
<div id="mpanel6" style="margin-top:50px;"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#mpanel2').codeVerify({
type : 1,
width : '400px',
height : '50px',
fontSize : '30px',
codeLength : 6,
btnId : 'check-btn',
ready : function() {
},
success : function() {
alert('验证匹配！');
},
error : function() {
alert('验证码不匹配！');
}
});
$('#mpanel3').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('验证码不匹配！');
}
});
$('#mpanel1').slideVerify({
type : 1, //类型
vOffset : 5, //误差量，根据需求自行调整
barSize : {
width : '80%',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
$('#mpanel4').slideVerify({
type : 2, //类型
vOffset : 5, //误差量，根据需求自行调整
vSpace : 5, //间隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '400px',
height: '200px',
},
blockSize : {
width: '40px',
height: '40px',
},
barSize : {
width : '400px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
$('#mpanel5').pointsVerify({
defaultNum : 4, //默认的文字数量
checkNum : 2, //校对的文字数量
vSpace : 5, //间隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '600px',
height: '200px',
},
barSize : {
width : '600px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
$('#mpanel6').pointsVerify({
defaultNum : 4, //默认的文字数量
checkNum : 2, //校对的文字数量
vSpace : 5, //间隔
imgName : ['1.jpg', '2.jpg','3.jpg','4.png','5.jpg'],
imgSize : {
width: '600px',
height: '200px',
},
barSize : {
width : '600px',
height : '40px',
},
ready : function() {
},
success : function() {
alert('验证成功，添加你自己的代码！');
//......后续操作
},
error : function() {
// alert('验证失败！');
}
});
</script>
</body>
</html>
提示：如果不需要在验证之后自动刷新验证码之后就可以注释掉verify.js文件的这个方法 this.setCode();
猜你喜欢
- 2024-10-18 留美必读:STEM OPT有什么优势? 如何申请OPT延期?
- 2024-10-18 centos yum 使用epel源出问题安装不上
- 2024-10-18 万恶的x11:unable to verify the graphical display setup
- 2024-10-18 iOS14.4继续“封杀”第三方配件 ios14.7支持第三方软件
- 2024-10-18 比亚迪汽车App上线:提供新车选购、远程车控功能
- 2024-10-18 jquery获取手机验证码按钮计时插件getVerifyCode.js
- 2024-10-18 微信三方平台之component_verify_ticket
- 2024-10-18 25届联想校招Verify G+认知能力SHL测评题库
- 2024-10-18 curl 错误:unable to verify the first certificate 解决办法
- 2024-10-18 CardVerify商业账户联手Paypal防欺诈订单
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- sd分区 (65)
- raid5数据恢复 (81)
- 地址转换 (73)
- 手机存储卡根目录 (55)
- tcp端口 (74)
- project server (59)
- 双击ctrl (55)
- 鼠标 单击变双击 (67)
- debugview (59)
- 字符动画 (65)
- flushdns (57)
- ps复制快捷键 (57)
- 清除系统垃圾代码 (58)
- web服务器的架设 (67)
- 16进制转换 (69)
- xclient (55)
- ps源文件 (67)
- filezilla server (59)
- 句柄无效 (56)
- word页眉页脚设置 (59)
- ansys实例 (56)
- 6 1 3固件 (59)
- sqlserver2000挂起 (59)
- vm虚拟主机 (55)
- config (61)
本文暂时没有评论，来添加一个吧(●'◡'●)