网页设计中，尤其表单填写提交过程中，为防止机器自动登录，很多网页都采用验证码技术，允许用户输入而尽量避免自动登录。验证码实现的方法有很多，PHP绘图技术可以在服务端生成验证码并发送客户端，HTML5技术下可以使用canvas与JS脚本实现在客户端浏览器自动生成验证码。本文给出JS+Canvas验证码的解决措施，所制作验证码实现效果如下图所示：

实现原理

本例验证码的实现主要包括验证码字符串的生成、背景干扰点实现及干扰直线的生成三部分。最终通过canvas绘图技术将生成的验证码字符串、背景及干扰直线显示到画布上。主要涉及技术或知识点包括canvas绘图技术、数组、鼠标点击事件、随机函数等。以下从验证字符串、背景干扰点及干扰直线三方面对实现过程进行说明。

验证字符串

验证字符串部分主要借助数组存储验证码所有字符，通过调用Math对象的随机函数获取数组下标，并通过数组下表读取数组元素，将读取的数组元素组装成完整字符串。其实现核心代码如下：

如上图所示，本例验证码字符包括数字与大写字母，getCode函数返回值即为4位验证码字符串。

背景干扰点

背景干扰点可以直接使用canvas对应的绘图方法进行绘制，本例为简化开发过程，降低难度直接使用drawImage绘图方式加载背景图片，实现干扰点效果。背景图片如下：

通过调用drawImage方法，指定截取的坐标位置参数，可实现背景干扰点的动态变化效果，背景干扰点实现核心代码如下：

其中getXsize与getYsize为获取绘图截取背景图片的坐标位置，通过使用随机函数实现从背景图片不同位置截取进行绘图输出。

干扰直线

干扰直线实现较为简单，直接通过JS提供的moveTo与lineTo方法完成直线的绘制，本例绘制了两条直线，一条为黑色干扰线，一条为白色干扰线。在绘制过程两端点需要使用Math随机函数生成符合条件随机坐标。干扰直线相关实现代码如下：

干扰直线实现核心代码如上图，其中getLsize方法主要用于获取随机端点Y轴坐标值。strokeStyle主要用于设置绘图直线的颜色。

验证码显示输出

验证码的显示输出主要使用fillText()方法在canvas指定位置进行文字输出，本例使用第三方ttf字体，因此在HTML页面中对字体进行了加载。验证码显示输出实现代码如下：

验证码显示输出核心代码如上图所示，其中myfont为加载的第三方字体。

绘图基础部分

绘图基础部分主要包括前端canvas元素的布局等。包括属性的设置，js部分元素的获取及属性设置等。

其他工作

我们一般接触的验证码，都可以点击图片实现验证码的刷新，因此本例为canvas标记添加了onclick事件，将所有验证码生成的代码封装到showCode()函数中，通过调用showCode函数实现验证码的刷新。本例完整JS脚本部分代码如下：

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！如需案例完整代码请关注并私信，往期前端设计文章链接如下：

1. 前端设计-Ajax技术及实例展示
2. 前端设计-响应式页面开发基础
3. Web开发前端、后端与全栈的区别是什么？

web的开发中，经常会使用到验证码功能，如登录、注册或其他关键功能使用之前常常需要验证码认证。 其目的是为了防止网站被恶意破解密码，刷票，论坛灌水，且有效防止某个黑客对某一个特定注册用户限定程序暴力破解方式进行不断登陆。今天我们就来说说如何快速设计验证码。

实现效果：

实现原理：

由后台提供生成验证码的接口，前端每次请求会后端会生成验证码图片和验证码，验证码图片发送到客户端供客户端显示，

验证码字符串保存再后端的Session中，待前端再次请求业务接口与session里的验证码字符串做比对。

实现思路：

1、先由后端提供可以生产验证码图片的接口

2、前端通过 img 中设置 src 属性，请求验证码生成的接口。

3、对img设置点击事件，每次点击img的时候，都会改变src值重新请求src

4、做页面接口操作时，比对输入的验证码是否正确

实现代码：

前端：

html:

js:

验证码的种类还有很多种，在这里就不一一阐述了，如果你还对其他类型的验证码形成有兴趣，欢迎留言，小编会持续更新。

对编程感兴趣，想了解更多的编程知识，关注头条号一起玩转编程

更多编程资讯、干货持续更新中~

些日子接触到一个项目，要求实现一个简单的验证码，参考万能的百度结合自己的想法实现了一个简单的前端验证码，当然跟后台的不能比安全性，

页面部分：

<div class="new-web-row"><span class="web-form-span " >验证码</span><input type="text" class=" web-form-input " required="required" id="Yzm" style="width: 30%;float: initial; margin-left: 27%;" ><input type = "button" id="code" value="点我验证" class="btn-list-btn" style="margin:0;float: right;width:20%" onclick="createCode()"/>

js实现部分：

var code ; //在全局定义验证码

//产生验证码

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值赋给验证码

}

//校验验证码

document.getElementById("Yzm").addEventListener("change",validate);

function validate(){

var inputCode = document.getElementById("Yzm").value.toUpperCase(); //取得输入的验证码并转化为大写

if(inputCode.length <= 0) { //若输入的验证码长度为0

alert("请输入验证码！"); //则弹出请输入验证码

$("#Yzm").focus();

YZM = false;

}

else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时

alert("验证码输入错误！@_@"); //则弹出验证码输入错误

createCode();//刷新验证码

$("#Yzm").val("");//清空文本框

$("#Yzm").focus();//重新聚焦验证码框

YZM = false;

}

else { //输入正确时

$("#Yzm").blur();//绑定验证码输入正确时要做的事

YZM = true;

}

};

附效果图：