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

情形一：图形验证码跟短信验证码一起，只需要将后台提供的动态链接填到（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

图形验证码的两种实现方式相关推荐

android 截取验证码的两种实现方式
在进行手机验证码验证时,为了提升用户体验,实现自动截取验证填充的行式,实现这个功能有两种方法,分别是利用android的广播机制和android的ContentObserver 实现. 第一种的实现方 ...
(转)javabean是什么和总结javabean的两种使用方式
一. javabean 是什么? Javabean 就是一个类,这个类就定义一系列 get<Name> 和 set<Name> 方法. So simple ! Javabean ...
iOS活动倒计时的两种实现方式
代码地址如下: http://www.demodashi.com/demo/11076.html 在做些活动界面或者限时验证码时, 经常会使用一些倒计时突出展现. 现提供两种方案: 一.使用NSTim ...
Android 圆形头像的两种实现方式
Android 圆形头像的两种实现方式前言这篇博客只是为了做一个记录而已,方便而后查询,核心代码都是直接采用鸿洋博客里面的代码的. 圆形头像在实际开发中实际很常见,一般来说,主要有两种实现方式: ...
页面倒计时按钮的两种实现方式
页面倒计时按钮的两种实现方式: 现假设需求为:点击打开页面后,让用户阅读本页面内容并进行60s倒计时,倒计时结束后用户才可以点击"确定"按钮,进行页面跳转. ①第一种实现方式,打开 ...
JavaBean是什么和总结JavaBean的两种使用方式
转载于:http://www.blogjava.net/flysky19/articles/88180.html 一. javabean 是什么? Javabean 就是一个类,这个类就定义一系列 g ...
C++中的两种绑定方式（静态绑定、动态绑定）
两种绑定方式静态绑定:在编译时刻,根据指针或引用变量的静态类型来决定成员函数属于哪一个类. 动态绑定:在运行时刻,根据指针或引用变量实际指向或引用的对象类型(动态类型)来确定成员函数属于哪一个类. ...
(C++)string 的两种输入方式和输出方式
注:头文件如下 #include<string> #include<cstdio> #include<iostream>using namespace std; 注 ...
三十张图片让你彻底弄明白图的两种遍历方式：DFS和BFS
1 引言遍历是指从某个节点出发,按照一定的的搜索路线,依次访问对数据结构中的全部节点,且每个节点仅访问一次.图的遍历.遍历过程中得到的顶点序列称为图遍历序列. 2 深度优先搜索 2.1 算法思想 ...

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

图形验证码的两种实现方式相关推荐

最新文章

热门文章