基于jQuery的圖片點(diǎn)擊驗(yàn)證插件，支持與后端交互。增加了關(guān)閉按鈕，改變了刷新方式。
插件使用方法：
1、保證頁(yè)面中有`jQuery.js`，再在頁(yè)面引入`Image-verifie.css`和`Image-verifie.js`。
2、調(diào)用方法如下：
$(function () {
test.init();
})
var test = {
param: {
lang: 'en-us',//en-us和zh-cn，為空時(shí)默認(rèn)是中文
key: '',
imgArr: []
},
init: function () {
$("#open").click(function () {
//模擬調(diào)用接口獲取關(guān)鍵詞和圖片
var key = '樹(shù)木';
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;
//初始化，四個(gè)個(gè)參數(shù)({key,imgArr},successFuc,refreshFuc,[lang])
imageVerify.init({
'key': test.param.key,
'imgArr': test.param.imgArr
}, function (res) {//點(diǎn)擊確定按鈕的事件
//獲取到選中的圖片下標(biāo)
var choose = res.choose;
// //模擬驗(yàn)證成功...
// imageVerify.close();
//模擬驗(yàn)證失敗...
imageVerify.showErrorMsg();
return false;
}, test.Refresh, test.param.lang);//包含"zh-cn"和"en-us"兩種語(yǔ)言，默認(rèn)是"zh-cn"
});
},
Refresh: function () {
//模擬調(diào)用接口獲取關(guān)鍵詞和圖片
var key = '汽車(chē)';
var imgArr = shuffle(test.param.imgArr);
test.param.key = key;
test.param.imgArr = imgArr;
imageVerify.refresh(test.param);
}
}
//隨機(jī)打亂數(shù)組
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、在調(diào)用imageVerifie.init方法之前，調(diào)用后端接口，獲取到當(dāng)前驗(yàn)證的關(guān)鍵詞key和圖片地址imgArr。
2、刷新事件，同樣是調(diào)用后端接口獲取關(guān)鍵詞和圖片地址。
3、確定事件，調(diào)用后端接口，將選中的圖片下標(biāo)發(fā)送給后端，進(jìn)行判斷。
