在工作中,这种图形验证码是最常见的了, 基本上登录,验证很多地方都会用到,其实也是非常的简单的。
首先我们先定义一个图片验证码的函数
function checkCode(vcode, callback) { //vcode: 调用时候input输入的验证码 callback: 验证成功的函数
$.ajax({
url: '/VerificationCode/CheckCode',
type: 'POST',
data: {
captcha: com.cookies.get('captcha'),
code: vcode
}
})
.done(function(data) {
if (data.flag == 1) {
callback(data);
} else {
showPrompt(data.msg, 'error'); //提示弹框
refreshCode($('.v-code-img')); //刷新图片验证码
return false;
}
})
.fail(function() {
refreshCode($('.v-code-img')); //刷新图片验证码
return;
});
}
方法中有用到本地的cookies方法, 这个方法也是需要定义的
//cookies操作
var cookies={
//设置cookies
set: function(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
},
//获取cookies
get: function(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
},
//清除cookies
erase: function(name) {
this.set(name, "", -1);
}
};
定义好方法之后,然后就是去调用这个方法进行图片验证了
checkCode($('#graphic').val(), function(data) { //input输入的值如果验证成功就执行回调
//callback content
})
//点击当前图片刷新验证码
$('body').on('click', '.v-code-img', function(event) {
refreshCode($(this));
});
这样图片验证的方法以及使用就完成了, 但是我们还需了解这个图片验证的思路:
1. 首先html一个input输入框,跟一个图片,input的内容value用来判断跟图片是否匹配成功
2. 定义一个方法,用来验证值是否匹配
3. 方法中定义一个ajax请求去请求图片的内容, 发送2个数据,{captcha:‘本地cookie的值’, code:'input的值'}
4. 验证成功跟验证失败后的不同操作