网页设计中，尤其表单填写提交过程中，为防止机器自动登录，很多网页都采用验证码技术，允许用户输入而尽量避免自动登录。验证码实现的方法有很多，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开发前端、后端与全栈的区别是什么？

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

页面部分：

<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;

}

};

附效果图：