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

最近用到了了一款很好用的前端登录验证，滑动验证和点选验证，兼容性也很好，在此记录一下
先放上地址 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
然后在你的页面需要使用的地方放入以下的标签

 点击出现验证码

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

// 验证码
$('#content').slideVerify({baseUrl: 'https://captcha.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;containerId: 'btn',//pop模式 必填 被点击之后出现行为验证码的元素idmode: '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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！