<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="verify.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/verify.js"></script>
</head>
<body>
<div id="demo"></div>
<script>
$("#demo").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 () {
alert('剛開始執行')
},
success: function () {
alert("驗證成功，添加你自己的代碼！");
},
error: function () {
alert('哈哈哈哈，錯了！')
},
});
</script>
</body>
</html>
具體參考這個鏈接，寫的相當好：https://www.html5tricks.com/demo/jquery-front-end-verify/index.html
需要引入verify.js和verify.css(下附下載地址):
https://blog-static.cnblogs.com/files/lyt520/verify.js
https://blog-static.cnblogs.com/files/lyt520/verify.css
