JS结合Cookie实现验证码功能

验证码功能是现在网站开发中非常常见的一种功能，常见的编程语言，比如.NET,JAVA都能很容易实现验证码功能，今天我准备分享一个使用JS实现验证码的功能，非常简单使用，拿来就可以用，废话不多说，直接上传代码！

JS代码：

//生成验证码
var code = "";
function createCode(e) {
    code = "";
    var codeLength = 4;
    var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
    for (var i = 0; i < codeLength; i  ) {
        var charIndex = Math.floor(Math.random() * 60);
        code  = selectChar[charIndex];
    }
    if (code.length != codeLength) {
        createCode(e);
    }
    if (canGetCookie == 1) {
        setCookie(e, code, 60 * 60 * 60, '/');
    } else {
        return code;
    }
}

存储验证码到Cookie:

//hours为空字符串时,cookie的生存期至浏览器会话结束。  
//hours为数字0时,建立的是一个失效的cookie,  
//这个cookie会覆盖已经建立过的同名、同path的cookie（如果这个cookie存在）。     
function setCookie(name, value, hours, path) {
    var name = escape(name);
    var value = escape(value);
    var expires = new Date();
    expires.setTime(expires.getTime()   hours * 3600000);
    path = path == "" ? "" : ";path="   path;
    _expires = (typeof hours) == "string" ? "" : ";expires="   expires.toUTCString();
    document.cookie = name   "="   value   _expires   path;
}

从Cookie获取验证码：

//cookie名获取值  
function getCookieValue(name) {
    var name = escape(name);
    //读cookie属性，这将返回文档的所有cookie     
    var allcookies = document.cookie;
    //查找名为name的cookie的开始位置     
    name  = "=";
    var pos = allcookies.indexOf(name);
    //如果找到了具有该名字的cookie，那么提取并使用它的值     
    if (pos != -1) {    //如果pos值为-1则说明搜索"version="失败     
        var start = pos   name.length;   //cookie值开始的位置     
        var end = allcookies.indexOf(";", start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置     
        if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie     
        var value = allcookies.substring(start, end);  //提取cookie的值     
        return unescape(value);       //对它解码           
    }
    else return "-1";    //搜索失败，返回-1  
}  

前端使用：

1.html代码：

      <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                    <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                </div>

2.JS代码：

Code();
        function Code() {
         showCheck(createCode("test"));
        }
        function showCheck(a) {
            CodeVal = a;
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, 1000, 1000);
            ctx.font = "80px 'Hiragino Sans GB'";
            ctx.fillStyle = "#E8DFE8";
            ctx.fillText(a, 0, 100);
        }