图形验证码

在工作中，这种图形验证码是最常见的了， 基本上登录，验证很多地方都会用到，其实也是非常的简单的。

 

首先我们先定义一个图片验证码的函数

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.  验证成功跟验证失败后的不同操作