jQuery图片点击验证插件
目录
插件描述
基于 jQuery 的图片点击验证插件,支持与后端交互。
插件使用方法
1、保证页面中有`jQuery.js`,再在页面引入`Image-verifie.css`和`Image-verifie.js`。
2、调用方法如下:
$(function () { test.init(); }) var test = { param: { lang: 'en-us',//en-us 和 zh-cn,为空时默认是中文 key: '', imgArr: [] }, init: function () { $("#open").click(function () { //模拟调用接口获取关键词和图片 var key = '树木'; var imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg', './img/7.jpg', './img/8.jpg', './img/9.jpg']; test.param.key = key; test.param.imgArr = imgArr; //初始化,四个个参数({key,imgArr},successFuc,refreshFuc,[lang]) imageVerify.init({ 'key': test.param.key, 'imgArr': test.param.imgArr }, function (res) {//点击确定按钮的事件 //获取到选中的图片下标 var choose = res.choose; // //模拟验证成功... // imageVerify.close(); //模拟验证失败... imageVerify.showErrorMsg(); return false; }, test.Refresh, test.param.lang);//包含"zh-cn"和"en-us"两种语言,默认是"zh-cn" }); }, Refresh: function () { //模拟调用接口获取关键词和图片 var key = '汽车'; var imgArr = shuffle(test.param.imgArr); test.param.key = key; test.param.imgArr = imgArr; imageVerify.refresh(test.param); } } //随机打乱数组 function shuffle(a) { var len = a.length; for (var i = 0; i < len; i++) { var end = len - 1; var index = (Math.random() * (end + 1)) >> 0; var t = a[end]; a[end] = a[index]; a[index] = t; } return a; };
后端交互
- 在调用
imageVerifie.init
方法之前,调用后端接口,获取到当前验证的关键词key
和图片地址imgArr
。 - 刷新事件,同样是调用后端接口获取关键词和图片地址。
- 确定事件,调用后端接口,将选中的图片下标发送给后端,进行判断。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jQuery图片点击验证插件
码云笔记 » jQuery图片点击验证插件