lxx-verifycode

验证码插件（仅适用于web）

方法说明

• StrImgCode 图片验证码（数字、字母组合[ 字母数字中不包含 数字0，大写O，小写o ]）

import {ImgCode} from 'verifycode';
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, 
};
this.verifyCode = new ImgCode(config);
let codeObject = this.verifyCode.create();
 
codeObject = {
    imgUrl : '图片base64，例：data:image/png;base64,...',
    code : 200, // 500为失败 同时会返回 一个message报错信息 并 imgUrl、imgCode 为 空
    message : '创建成功！',
    imgCode : '', // 正确答案， 可通过 this.verifyCode.getCode() 获得
};
 
// 其他方法
this.verifyCode.getCode();  // 获得正确答案
this.verifyCode.refresh();  // 刷新验证码 同等于调用 this.verifyCode.create 方法
this.verifyCode.submit(value);   // 验证当前填写验证码是否正确 入参 value，回参 bool

• CountImgCode 图片算术验证码（[ 仅支持 + - * / ]

import {CountImgCode} from 'verifycode';
let config = {
    // [非必传] 默认：80 图片宽度  [ int ]
    width : 80, 
    // [非必传] 默认：24 图片高度  [ int ]
    height : 24,
    // [非必传] 默认：'+-' 算数符 [ 仅支持传 +-*/ 四种组合 ] [ string ]
    str : '+-', 
};
this.verifyCode = new CountImgCode(config);
let codeObject = this.verifyCode.create();
 
codeObject = {
    imgUrl : '图片base64，例：data:image/png;base64,...',
    code : 200, // 500为失败 同时会返回 一个message报错信息 并 imgUrl、imgCode 为 空
    message : '创建成功！',
    imgCode : '', // 正确答案， 可通过 this.verifyCode.getCode() 获得
};
 
// 其他方法
this.verifyCode.getCode();  // 获得正确答案
this.verifyCode.refresh();  // 刷新验证码 同等于调用 this.verifyCode.create 方法
this.verifyCode.submit(value);   // 验证当前填写验证码是否正确 入参 value，回参 bool

• SlideCode 滑块解锁

import {SlideCode} from 'verifycode';
let config = {
    // [必传参数] 需要添加验证码的 dom 元素 [ dom类型 ]
    dom : document.getElementById('test_box'),  
    // [必传参数] 为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 ]
    success : () => {
        console.log('111成功！');
    },
    // [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ]
    error : () => {
        console.log('222失败！')
    },
};
new SlideCode(config);

• JigsawCode 拼图验证码

import {JigsawCode} from 'verifycode';
let config = {
    // [必传参数] 需要添加验证码的 dom 元素 [ dom类型 ]
    dom : document.getElementById('JigsawCode'),
    // [必传参数] 为dom下新建的div添加的 唯一id [ string ]
    id : 'JigsawCode_box',
    // [非必传] 宽度 [ int ]
    width : 310,
    // [非必传] 高度  [ int ] 
    height : 200,
    // [非必传] 未滑动的背景色  [ string ]
    beforeColor : '#e8e8e8',  // 未滑动的背景色
    // [非必传] 文字颜色 [ string ]  
    fontColor : '#000',  // 文字颜色
    // [非必传] 文字大小 [ int ]
    fontSize : 14,  // 文字大小
    // [必传参数] 成功回调函数 只会返回一次 [ function ]
    success : function () {},
    // [非必传] 失败回调函数 每次滑动失败都会有一次调用 [ function ]
    error : function () {}
};
// 实例化
this.verifyCode = new JigsawCode(config);
// 创建
this.verifyCode.create();
// 刷新
this.verifyCode.refresh();

使用方式

• 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