做前端不得不会的纯js验证码，你知道吗?

今天星期三了，如果不发生什么不可抗力事件，再过两天就放假了。

倒计时两天

不过不要高兴太早，三天后就是年度最大电商节了，钱包是不是又要瘦身了。

me too

话说小编这两天在忙着给项目做登录界面，涉及到验证码，找了一下，发现现在网上大部分验证码都是后台生成图片，在前台显示，验证也是在后台验证。小编就在想，只用前端技术能不能做出验证码呢？经过一番努力，终于做出来了，先看大家一下效果图

感觉看着和图片没差

下面给大家一步一步讲解代码：

HTML代码：

<table>

<tr>

<td style="width: 70px;height: 40px;"><span >验证码：</span></td>

/* 输入框*/

<td><input id="Text3" type="text" class="txtCode"/></td>

/* 画布，用来显示验证码 */

<td><canvas id="canvas" width="120" height="40"></canvas></td>

</tr>

</table>

<script>

document.getElementById("Text3").addEventListener("change",defined);

//给输入验证码的input添加监听事件，当输入框的值改变的时候，触发defined()函数。

var code = " ";

function defined() {

var text = document.getElementById("Text3").value.toUpperCase();

//获取输入框的值，并用toUpperCase()将其转化为大写。

function clearAndUpdate() {

//定义clearAndUpdate()函数。用于在验证码错误的情况下刷新验证码和清空输入框的值。

document.getElementById("Text3").value = '';

//清空输入框的值。

drawPic();

调用drawPic()，刷新验证码。

}

//对验证码进行验证。

if(text.length < 0){//判断为空的情况，弹出提示框。

alert("请输入验证码");

}else if(text.length !==4){//判断验证码位数不等于4的情况。

alert("请输入正确格式的验证码");

clearAndUpdate();

}else if(text == code){//比较验证码

alert("通过验证");

}else{

alert("验证码错误");//其他情况

clearAndUpdate();

}

}

下面是生成验证码的代码，是利用画布生成类似图片的验证码。

//生成一个随机数

function randomNum(min,max){

return Math.floor( Math.random()*(max-min)+min);//在max和min之间生成随机数。

}

//生成一个随机色

function randomColor(min,max){//采用rgb颜色，注意颜色是0-255。

var r = randomNum(min,max);

var g = randomNum(min,max);

var b = randomNum(min,max);

return "rgb("+r+","+g+","+b+")";

}

drawPic();

//点击验证码，则刷新验证码

document.getElementById("canvas").onclick = function(e){

e.preventDefault();

drawPic();

};

//绘制验证码图片

function drawPic(){

var canvas=document.getElementById("canvas");//获取画布容器

var width=canvas.width;//分别获取画布的宽和高。

var height=canvas.height;

var ctx = canvas.getContext('2d');//获取该canvas的2D绘图环境对象

ctx.textBaseline = 'bottom';设置文本基线是画布的底部。

//绘制背景色

ctx.fillStyle = randomColor(200,240); //颜色若太深可能导致看不清

ctx.fillRect(0,0,width,height);//画出矩形，要记得ctx.fillStyle放在ctx.fillRect哦。

//绘制文字

var str = 'ABCEFGHJKLMNPQRSTWXY123456789';//选择全部大写字母和数字，这下知道为啥要把获取的值转化为大写了吧。

code = "";//定义一个变量code用于存储生成的验证码。

for(var i=0; i<4; i++){//这里i<4是生成4位数的验证码。

var txt = str[randomNum(0,str.length)];//随机获取str的一个元素。

code += txt;//将元素加入到code里。

ctx.fillStyle = randomColor(50,160); //随机生成字体颜色

ctx.font = randomNum(15,30)+'px SimHei'; //随机生成字体大小

var x = 10+i*25;//元素在水平方向上的位置。

var y = randomNum(25,35);//元素在竖直方向上的位置，尽量保持在中间，防止部分元素在画布外。

var deg = randomNum(-45, 45);//随机生成旋转角度。

//修改坐标原点和旋转角度

ctx.translate(x,y);//平移元素

ctx.rotate(deg*Math.PI/180);//旋转元素

ctx.fillText(txt, 0,0);

//恢复坐标原点和旋转角度

ctx.rotate(-deg*Math.PI/180);

ctx.translate(-x,-y);

}

//绘制干扰线

for(var i=0; i<2; i++){

ctx.strokeStyle = randomColor(40,180);//干扰线颜色。

ctx.beginPath();//开始绘制。

ctx.moveTo( randomNum(0,width), randomNum(0,height) );//起点位置

ctx.lineTo( randomNum(0,width), randomNum(0,height) );//终点位置

ctx.stroke();

}

/**绘制干扰点**/

for(var i=0; i<50; i++){

ctx.fillStyle = randomColor(0,255);

ctx.beginPath();

ctx.arc(randomNum(0,width),randomNum(0,height), 1, 0, 2*Math.PI);绘制点，下面说arc函数。

ctx.fill();

}

}

</script>

arc() 方法创建弧/曲线

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

x圆的中心的 x 坐标。

y圆的中心的 y 坐标。

r圆的半径。

sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle结束角，以弧度计。

counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

这就是全部的代码了。

在页面上试一下，首先是随机生成的验证码，

开始输入不是4位数的验证码，点击确定后会刷新验证码。

然后是4位数，但是不正确的验证码，

当我们输入正确的验证码时，

这就是我做的验证码功能了，都是原生的js，没有用后台的知识，小伙伴有没有理解哦。

最近因为项目快要交付了，所有人都开始动员起来测试系统，因为小编参与了整个的开发流程，所以很多同事遇到bug都来问我，需要在哪里改，东西写在哪了。第一次知道改bug这么费精力，改了这个，又出来好几个新的，简直爆炸。

打死也不承认是我写的

不说了，一会经理要问我改多少bug了。

不敢跑，不敢跑