图形验证码的两种实现方式

最新推荐文章于 2024-04-18 01:22:36 发布

weixin_30809173

最新推荐文章于 2024-04-18 01:22:36 发布

阅读量2k

点赞数 1

原文链接：http://www.cnblogs.com/dingboyang/p/10991239.html

版权

情形一：图形验证码跟短信验证码一起，只需要将后台提供的动态链接填到（id="img"）的src中即可生成动态验证码。

然后，在需要请求接口的地方，只需把（id="imgCode"）中用户输入的信息通过ajax传给后台，验证验证码是否正确。

原理（后台）：后台通过session存储图片上的字符串，和之后前台请求过来的带的输入的字符串参数，做比较，判断是否一样。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图形验证码</title>
</head>
<body>
    <form>
        <div class="imgCodeBox">
            <label for="imgCode">图形验证码</label>
            <input type="text" placeholder="请输入验证码" id="imgCode">
            <img src="" id="img"> 
        </div>
    </form>
</body>
</html>

情形二：用js产生随机数实现

1、创建图形码容器

<label class="myLabel">图形码：
    <input type = "button" id="code" οnclick="createCode()" style="border: 0;background-color: transparent;padding: 0;"/>
</label>

2、产生验证码并在页面加载时和点击时调用

// 图形验证码
        var code ; //在全局定义验证码
        //产生验证码
        window.onload = function createCode(){
            code = "";
            var codeLength = 4;//验证码的长度
            var checkCode = document.getElementById("code");
            var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                'S','T','U','V','W','X','Y','Z');//随机数
            for(var i = 0; i < codeLength; i++) {//循环操作
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
                code += random[index];//根据索引取得随机数加到code上
            }
            checkCode.value = code;//把code值赋给验证码
        }

转载于:https://www.cnblogs.com/dingboyang/p/10991239.html

weixin_30809173

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
图形验证码的两种实现方式

情形一：图形验证码跟短信验证码一起，只需要将后台提供的动态链接填到（id="img"）的src中即可生成动态验证码。然后，在需要请求接口的地方，只需把（id="imgCode"）中用户输入的信息通过ajax传给后台，验证验证码是否正确。原理（后台）：后台通过session存储图片上的字符串，和之后前台请求过来的带的输入的字符串参数，做比较，判断是否一样。<!doctype h...
复制链接

扫一扫