验证码这个玩意，无论是开发者还是用户都十分熟悉：
注册？请输入验证码...登录？请输入验证码...修改密码？请输入验证码...删除？请输入验证码...……总之，各类敏感操作，请输入验证码！
这么多场景中用到验证码，它到底有什么用？作为前端开发者，如何去实现呢？接下来步入正题。
验证码
是一种区分用户是计算机还是人的公共全自动程序。区分用户是真人还是程序，防止程序频繁访问服务器占用过多的资源。作用：
防止恶意破解密码、刷票、论坛灌水等；有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试敏感操作前的提示防止恶意注册验证码表现方式：
随机字符串验证码算数验证码Gif动画验证码滑动验证码点选验证码短信验证码手机语音验证码接下来会使用纯前端方式实现其中的一些表现，如随机字符串验证码、算数验证码、滑动验证码等。
本篇记录随机字符串验证码。
随机字符串验证码
一般来讲，字符串、算数、gif、短信语音等验证码放在后端实现，但本着技术无界限的原则，前端依然是能照葫芦画瓢给实现出来的。本次要实现的效果如下：
效果分析验证码实现步骤：
canvas画布生成随机字符串随机颜色背景色（可固定色）噪音线设置绘制验证码其他一些基础内容也包含其中，如点击验证码刷新、点击下一步验证等操作。
步骤实现：注：本案例基于vue操作，UI使用element完成，原生js同样道理
1. canvas画布html
代码语言：javascript代码运行次数：0运行复制
js
代码语言：javascript代码运行次数：0运行复制// 需要的数据
data() {
return {
inputCode: '', // 输入的值
checkCode: '', // 图片验证码的值
// canvas各种设置
cvs: {
w: 100, // 给出默认宽度 宽度会在图片绘制时根据长度更改
h: 40, // 高 与input保持一致
fontSize: 24, // 字体大小
// 字符串生成范围
str: '1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM',
len: 4, // 字符串长度
line: 3 // 噪音线个数
}
}
}2. 生成随机字符串
写一个随机整数生成器，在各个环节都会用到生成随机字符串，长度是在 data里面 cvs中对应长度代码语言：javascript代码运行次数：0运行复制// 随机整数生成器，范围[0, max)
rInt(max) {
return Math.floor(Math.random() * 100000 % max);
},
// 生成随机字符串
rCode() {
let code = '';
let len = this.cvs.len;
let strLen = this.cvs.str.length;
for(let i = 0; i < len; i ++) {
code += this.cvs.str.charAt(this.rInt(strLen));
}
this.checkCode = code;
return code;
},3. 生成随机颜色rgba格式a：透明度，取值为0.5-1代码语言：javascript代码运行次数：0运行复制// 生成随机颜色 rgba格式
rColor() {
let a = ((Math.random()*5 + 5) / 10).toFixed(2);
return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`
}, 4. 开始绘制
方法接收一个dom对象判断浏览器对canvas支持程度取随机字符串设置canvas宽高大小绘制具体过程如下：
代码语言：javascript代码运行次数：0运行复制// 验证码图片绘制
drawCode(domCvs) {
let _this = this;
// 随机字符串
let checkCode = this.rCode();
// 宽设置
this.cvs.w = 10 + this.cvs.fontSize * this.cvs.len;
// 判断是否支持canvas
if(domCvs !== null && domCvs.getContext && domCvs.getContext('2d')){
// 设置显示区域大小
domCvs.style.width = _this.cvs.w;
// 设置画板宽高
domCvs.setAttribute('width', _this.cvs.w);
domCvs.setAttribute('height', _this.cvs.h);
// 画笔
let pen = domCvs.getContext('2d');
// 背景: 颜色 区域
pen.fillStyle = '#eee';
pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
// 水平线位置
pen.textBaseline = 'middle'; // top middle bottom
// 内容
for(let i = 0; i < _this.cvs.len; i ++) {
pen.fillStyle = _this.rColor(); // 随机颜色
pen.font = `bold ${_this.cvs.fontSize}px 微软雅黑`; // 字体设置
// 字符绘制: (字符, X坐标, Y坐标)
pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 17 + _this.rInt(10));
}
// 噪音线
for(let i = 0; i < _this.cvs.line; i ++) {
// 起点
pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h));
// 终点
pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h));
// 颜色
pen.strokeStyle = _this.rColor();
// 粗细
pen.lineWidth = '2';
// 绘制
pen.stroke();
}
} else {
this.$message.error('不支持验证码格式，请升级或更换浏览器重试');
}
},5. 绑定canvas的dom元素html
代码语言：javascript代码运行次数：0运行复制js：getCode方法
代码语言：javascript代码运行次数：0运行复制// vue的话可直接用$refs取值，不用vue的话可绑定id然后通过document处理
let domCvs = this.$refs.checkCode;
this.drawCode(domCvs);6. 完成~
在页面初始化的时候，也来一个验证码点击下一步， 验证 data中 inputCode和 checkCode的值是否一样即可。注意，要都换成小写 toLowerCase()或者大写去处理~代码语言：javascript代码运行次数：0运行复制// 初始化先搞一个验证码~点击canvas的时候重新执行getCode()
mounted() {
// 获取验证码图
this.getCode();
}结语
搞定，收工～最终效果如效果图所示~ 根据本篇，那算术验证码的效果已然是呼之欲出了……下一篇更新！