理想的亡命之徒
理想的亡命之徒

滑块验证-jquery插件的使用

    在登入验证或者其他操作中，如果有敏感的用户行为，那么需要使用滑块等验证来证明你是不是机器。因为在开发工程中后台开发(全栈)不可能自己花时间手写一个前端登入验证，那么就是用滑块验证插件来进行使用。

使用

  1. 首先我们先准备10张图片在本地。正式使用请保存在服务器或者云COS上。
    滑块验证-jquery插件的使用_第1张图片 注意，这里的图片文件目录要跟index.html同级。文底附插件下载地址，示例如下:
    滑块验证-jquery插件的使用_第2张图片
  2. 打开，体验地址: 点击体验，效果如下:
    滑块验证-jquery插件的使用_第3张图片
  3. 修改代码
<!DOCTYPE html>
<html lang="zh">
<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.0">
<title>滑块验证</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 这个采用CDN的模式，如果是离线，请自行下载 font-awesome-->
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">
<link href="disk/slidercaptcha.css" rel="stylesheet" />
<style>
<!-- 设定图片验证滑块的css属性 -->
.slidercaptcha {
	margin: 0 auto;
	width: 314px;
	height: 286px;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.125);
	margin-top: 40px;
}

.slidercaptcha .card-body {
	padding: 1rem;
}

.slidercaptcha canvas:first-child {
	border-radius: 4px;
	border: 1px solid #e6e8eb;
}
.slidercaptcha.card .card-header {
	background-image: none;
	background-color: rgba(0, 0, 0, 0.03);
}
.refreshIcon {
	top: -54px;
}
</style>
</head>
<html>
<body>
<div class="container-fluid">
	<div class="form-row">
		<div class="col-12">
			<div class="slidercaptcha card">
				<div class="card-header">
					<span>请完成安全验证</span>
				</div>
				<div class="card-body"><div id="captcha"></div></div>
			</div>
		</div>
	</div>
</div>
</body>

</html>
<!-- 引入jquery文件-->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- 引入功能核心文件-->
<script src="disk/longbow.slidercaptcha.js"></script>
<script>
	//后期可以从数据库中读取
	let maxImageSize = 10;
	$('#captcha').sliderCaptcha({
		repeatIcon: 'fa fa-redo',
		//设定图片目录
		setSrc: function () {
			return 'image/' + Math.round(Math.random() * maxImageSize) + '.jpg';
		},
		//回调函数
		onSuccess: function () {
			alert('本次验证通过了!');
		}
	});
</script>
</body>
</html>

可以在设定目录设置函数修改您的目标目录，在回调函数中处理成功之后的事情业务逻辑。当然
如果你的项目中已经引入了bookstrap和jquery，那么可以不用再代码中引入。可以将此工具模块封装，以便在项目工程只能调用。

5.插件下载地址:点击下载

你可能感兴趣的:(好用的工具)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他