一、下载框架文件，放到项目素材（js、css、img）目录
jQuery验证码插件
二、新建页面，按格式调用验证码生成代码
<title>5.1jQuery滑块验证码</title>
<link rel="stylesheet" type="text/css" href="css/verify.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/verify.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#btnOK {
border: none;
color: white;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<form method="post" action="index.jsp">
<div>
<label>验证：</label>
<div id="slider"></div>
</div>
<div>
<input type="submit" value="登录" id="btnOK" disabled="disabled" />
</div>
<script type="text/javascript">
$('#slider').slideVerify({
type : 1, //类型
vOffset : 5, //误差量，根据需求自行调整
barSize : {
width : '300px',
height : '40px',
},
ready : function() {
},
success : function() {
$("#btnOK").prop("disabled", "");
$("#btnOK").css("background-color", "#008cba");
},
error : function() {
// alert('验证失败！');
}
});
</script>
</form>
</body>
三、自行扩展服务器端代码
$("#btnOK").prop("disabled", "");
$("#btnOK").css("background-color", "#008cba");
四、编写前台页面调用并验证
<body>
This is my JSP page.
</body>
网友评论