拼图验证码,纯前端校验,依赖于JQ
纯前端的校验方式,很容易绕过前端去提交,可以修改源代码并与后端进行交互,进行安全校验。如果使用不同源图片可能会导致IE11无效,详见(有兴趣的可以通过crossOrigin to use-credentials尝试)。如果不考虑IE,可以使用插件自带的图片库。如果还是绕不过IE的兼容,建议使用本地图片或者同源网络图片。
1.引入 jquery & ./js/verify-code.js
2.引入 ./css/verify-code.css
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| width | canvas宽度 | Number | 310 |
| height | canvas高度 | Number | 155 |
| accuracy | 精度,移动的偏差范围内。如果 <1 则不进行校验 | Number | 5 |
| sliderText | 滑动文本 | String | 向右滑动 |
| images | 图片,如果不传 | Array | [] |
| 事件名 | 说明 | 返回值 |
|---|---|---|
| init | 手动初始化 | - |
| reset | 重置 | - |
| ready | 初始化成功的回调 | - |
| success | 校验成功的回调,返回操作时间 | time |
| fail | 校验失败的回调 | - |
| destroy | 销毁 | - |
<div id="code-container"></div>
const verifyCode = $('#code-container').VerifyCode({ // ...props, ready() { console.log('ready'); }, success(time) { console.log('success', time); }, fail() { console.log('fail'); } })
或者
const verifyCode = new VerifyCode('#code-container', { // ...options }); $('#code-container').on('ready', function() { console.log('ready'); }); $('#code-container').on('success', function(time) { console.log('success', time); }); $('#code-container').on('fail', function() { console.log('fail'); }); verifyCode.init(); // 初始化