图形验证码的两种实现方式
Posted dingboyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图形验证码的两种实现方式相关的知识，希望对你有一定的参考价值。
情形一：图形验证码跟短信验证码一起，只需要将后台提供的动态链接填到（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" onclick="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值赋给验证码
以上是关于图形验证码的两种实现方式的主要内容，如果未能解决你的问题，请参考以下文章