前端页面登录验证(滑动验证、点选验证)

此验证码第三方服务已停用！！！仅供参考

可参考此文章，后端自行部署本地服务器进行调用：（https://blog.csdn.net/wjw_java_android/article/details/130717646）

最近用到了了一款很好用的前端登录验证，滑动验证和点选验证，兼容性也很好，在此记录一下
先放上地址 https://captcha.anji-plus.com/#/useOnline/sliderFixed
首先在官网github下载资源包，放入到自己的项目中，包的结构就是下边这样子
github地址：https://github.com/anji-plus/captcha

在需要使用的页面
1.引入css文件verify.css
2.按顺序引入js文件下js文件 jquery.min.js, crypto-js.js, ase.js, verify.js
在线文档https://captcha.anji-plus.com/#/doc
然后在你的页面需要使用的地方放入以下的标签

 <div id="content"></div>
 <button id="btn">点击出现验证码</button>

最后引入js
请求地址不需要更改，是官方的服务器地址

// 验证码
$('#content').slideVerify({
    baseUrl: 'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
    containerId: 'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
    mode: 'pop',     //展示模式
    imgSize: {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
        width: '300px', //调整图片大侠
        height: '150px',
    },
    barSize: {          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
        width: '300px',//调整滑块大小
        height: '40px',
    },
    beforeCheck: function () {  //检验参数合法性的函数  mode ="pop"有效
        let flag = true;
        //实现: 参数合法性的判断逻辑, 返回一个boolean值
        return flag
    },
    ready: function () { },  //加载完毕的回调
    success: function (params) {
    // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
       例如: login($.extend({}, params))
     //成功的回调
    },
    error: function () {
      //失败的回调
    }       
});

最后的效果

我这里只做了滑块的验证，，同样的点选验证也是这样操作的
https://captcha.anji-plus.com/#/useOnline/pointFixed