验证码插件(仅适用于web)
方法说明
- StrImgCode 图片验证码(数字、字母组合[ 字母数字中不包含 数字0,大写O,小写o ])
;let config = // [非必传] 默认:blend 类型blend:数字字母混合类型、number:纯数字、letter:纯字母 [ string ] type : 'blend' // [非必传] 默认:100 图片宽度 [ int ] width : 100 // [非必传] 默认:50 图片高度 [ int ] height : 50 // [非必传] 默认:4 验证码位数(需要足够宽否则会很挤) [ int ] length : 4 // [非必传] 默认:false 是否区分大小写 [ bool ] matchCase : false ;thisverifyCode = config;let codeObject = thisverifyCode; codeObject = imgUrl : '图片base64,例:data:image/png;base64,...' code : 200 // 500为失败 同时会返回 一个message报错信息 并 imgUrl、imgCode 为 空 message : '创建成功!' imgCode : '' // 正确答案, 可通过 this.verifyCode.getCode() 获得; // 其他方法thisverifyCode; // 获得正确答案thisverifyCode; // 刷新验证码 同等于调用 this.verifyCode.create 方法thisverifyCode; // 验证当前填写验证码是否正确 入参 value,回参 bool
- CountImgCode 图片算术验证码([ 仅支持 + - * / ]
;let config = // [非必传] 默认:80 图片宽度 [ int ] width : 80 // [非必传] 默认:24 图片高度 [ int ] height : 24 // [非必传] 默认:'+-' 算数符 [ 仅支持传 +-*/ 四种组合 ] [ string ] str : '+-' ;thisverifyCode = config;let codeObject = thisverifyCode; codeObject = imgUrl : '图片base64,例:data:image/png;base64,...' code : 200 // 500为失败 同时会返回 一个message报错信息 并 imgUrl、imgCode 为 空 message : '创建成功!' imgCode : '' // 正确答案, 可通过 this.verifyCode.getCode() 获得; // 其他方法thisverifyCode; // 获得正确答案thisverifyCode; // 刷新验证码 同等于调用 this.verifyCode.create 方法thisverifyCode; // 验证当前填写验证码是否正确 入参 value,回参 bool
- SlideCode 滑块解锁
;let config = // [必传参数] 需要添加验证码的 dom 元素 [ dom类型 ] dom : document // [必传参数] 为dom下新建的div添加的 唯一id [ string ] id : 'box' // [非必传] 宽度 [ int ] width : 300 // [非必传] 高度 [ int ] height : 40 // [非必传] 未滑动的背景色 [ string ] beforeColor : '#e8e8e8' // [非必传] 成功后的背景色 [ string ] successColor : '#90ee90' // [非必传] 文字颜色 [ string ] fontColor : '#000' // [非必传] 文字大小 [ int ] fontSize : 14 // [非必传] 滑块的背景颜色 [ string ] sliderBackground : '#fff' // [非必传] 滑块边框色 [ string ] sliderBorderColor: '#ccc' // [非必传] 已经滑过的背景色 [ string ] underSliderBackground :'#add8e6' // [必传参数] 成功回调函数 只会返回一次 [ function ] { console; } // [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ] { console };config;
- JigsawCode 拼图验证码
;let config = // [必传参数] 需要添加验证码的 dom 元素 [ dom类型 ] dom : document // [必传参数] 为dom下新建的div添加的 唯一id [ string ] id : 'JigsawCode_box' // [非必传] 宽度 [ int ] width : 310 // [非必传] 高度 [ int ] height : 200 // [非必传] 未滑动的背景色 [ string ] beforeColor : '#e8e8e8' // 未滑动的背景色 // [非必传] 文字颜色 [ string ] fontColor : '#000' // 文字颜色 // [非必传] 文字大小 [ int ] fontSize : 14 // 文字大小 // [必传参数] 成功回调函数 只会返回一次 [ function ] {} // [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ] {};// 实例化thisverifyCode = config;// 创建thisverifyCode;// 刷新thisverifyCode;
使用方式
- MV* 框架应用
/* TODO 引用注入 com.verifyCode.js import {ImgCode, CountImgCode, SlideCode} from 'verifyCode'; */
- jQuery 框架应用
/* TODO head标签中 注入 com.verifyCode.js <script src="com.verifyCode.js"></script> <script> var ImgCode = verifyCode.ImgCode; var CountImgCode = verifyCode.CountImgCode; var SlideCode = verifyCode.SlideCode; </script> */
目录说明
.
├── public ## 静态资源用于启动时测试
├── src ## 工程主目录
│ │ └── lib ## 验证码功能实现目录
├── .babelrc ## babel配置
├── index.js ## 入口文件
├── package.json ## 工程依赖文件
├── webpack.config.js ## webpack配置文件
│
├── END!
兼容性说明
-
IE内核 >= 9
-
Chrome >= 49
-
IOS >= 8
-
Android >= 7