前端接入

1. 兼容性

  1. IE8+、Chrome、Firefox.(其他未测试)

2. 引入对应的css以及js文件

  1. 在view/html文件夹copy到自己项目中
  2. 1)引入css文件verify.css　<br/>
  3. 2)按顺序引入js文件下js文件 jquery.min.js, crypto-js.js, ase.js, verify.js

基础示例

  1. 准备初始化的容器,以及id值
  3.      <div id="content"></div>
  4.     //  mode="pop"模式配置点击
  5.      <button id="btn">点击出现验证码</button>
  7. 滑动式调用$('#content').slideVerify(option)初始化; 
  8. 点选式调用$('#content').pointsVerify(option)初始化;
  10. **option为配置对象{},参数详见下方验证码参数**
  12. <script> 
  13.     $('#content').slideVerify({
  14.         baseUrl:'https://mirror.anji-plus.com/captcha-api',  //服务器请求地址, 默认地址为安吉服务器;
  15.         containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
  16.         mode:'pop',     //展示模式
  17.         imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
  18.             width: '400px',
  19.             height: '200px',
  20.         },
  21.         barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
  22.             width: '400px',
  23.             height: '40px',
  24.         },
  25.         beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
  26.             let flag = true;
  27.             //实现: 参数合法性的判断逻辑, 返回一个boolean值
  28.             return flag
  29.         },
  30.         ready : function() {},  //加载完毕的回调
  31.         success : function(params) { //成功的回调
  32.             // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
  33.             例如: login($.extend({}, params))  
  34.         },
  35.         error : function() {}        //失败的回调
  36.     });
  37. </script>

2.回调事件

参数类型说明
success(params)funciton验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数
errorfunciton验证码匹配失败后的回调函数
readyfunciton验证码初始化成功的回调函数
beforeCheckfuncitonmode=”pop”模式有效, 调用验证码前检验参数合法性的函数,返回值为boolean值,默认返回ture

3.验证码参数

参数类型说明
baseUrlString请求后端的服务器地址,默认:’https://mirror.anji-plus.com/captcha-api‘ 安吉服务器地址
modeString验证码的显示方式，弹出式pop，固定fixed，默认：mode : ‘pop’
containerIdStringmode=”pop” 模式必填,被点击之后出现行为验证码的元素id
vSpaceString验证码图片和移动条容器的间隔，默认单位是px。如：间隔为5px，默认:vSpace:5
explainString滑动条内的提示，不设置默认是：’向右滑动完成验证’
imgSizeObject其中包含了width、height两个参数，分别代表图片的宽度和高度，如:{width:’400px’,height:’200px’}

4.默认接口api地址

请求URL请求方式
/captcha/getPost
/captcha/checkPost