基于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; };
后端交互
1、在調用imageVerifie.init
方法之前,調用后端接口,獲取到當前驗證的關鍵詞key
和圖片地址imgArr
。
2、刷新事件,同樣是調用后端接口獲取關鍵詞和圖片地址。
3、確定事件,調用后端接口,將選中的圖片下標發送給后端,進行判斷。