主体思路,使用canvas画布生成验证码,跟输入框内数据通过from表单进行对比
代码
//rules判断
rules: [{ validator: validateCode, trigger: 'change' }],
//validateCode方法内容
validateCode(rule, value, callback) {
if (value == '') {
callback(new Error('验证码不能为空'))
} else if (value !== this.identifyCode) {
callback(new Error('验证码错误!'))
} else {
callback()
}
},
//组件化------验证码封装后的页面引入
<verificationPage :identifyCode="identifyCode" style="cursor: pointer" @click.native="getCode()" />
//date中要声明identifyCode这个变量,用于对比输入的值与验证码页面生成的验证码是否一致
identifyCode: '',
//getCode方法触发验证码的生成与重新生成
//(这个方法在页面dom元素加载完时就需要调用一次,让验证码页面生成一个验证码)
getCode() {
var a = [
'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',
]
var code = ''
for (var i = 0; i < 4; i++) {
//0-1的随机小数 --> 0~数组长度-1的范围 取整
var randPosition = Math.floor(Math.random() * (a.length - 1)) //每次生成一个随机数的位置
code += a[randPosition] //带有随机位置作为下标,指示到当前随机产生的某个字符上,
}
this.identifyCode = code
},
验证码组件页面代码
<template>
<div class="s-canvas" style="display: inline">
<canvas
id="s-canvas"
:width="contentWidth"
:height="contentHeight"
></canvas>
</div>
</template>
<script>
export default {
name: "SIdentify",
props: {
identifyCode: {
// 默认注册码
type: String,
default: "1234",
},
fontSizeMin: {
// 字体最小值
type: Number,
default: 25,
},
fontSizeMax: {
// 字体最大值
type: Number,
default: 35,
},
backgroundColorMin: {
// 验证码图片背景色最小值
type: Number,
default: 200,
},
backgroundColorMax: {
// 验证码图片背景色最大值
type: Number,
default: 220,
},
dotColorMin: {
// 背景干扰点最小值
type: Number,
default: 60,
},
dotColorMax: {
// 背景干扰点最大值
type: Number,
default: 120,
},
contentWidth: {
// 容器宽度
type: Number,
default: 117,
},
contentHeight: {
// 容器高度
type: Number,
default: 32,
},
},
methods: {
// 生成一个随机数
randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
// 生成一个随机的颜色
randomColor(min, max) {
let r = this.randomNum(min, max);
let g = this.randomNum(min, max);
let b = this.randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
},
drawPic() {
let canvas = document.getElementById("s-canvas");
let ctx = canvas.getContext("2d");
ctx.textBaseline = "bottom";
// 绘制背景
ctx.fillStyle = "#e6ecfd";
ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);
// 绘制文字
for (let i = 0; i < this.identifyCode.length; i++) {
this.drawText(ctx, this.identifyCode[i], i);
}
this.drawLine(ctx);
this.drawDot(ctx);
},
drawText(ctx, txt, i) {
ctx.fillStyle = this.randomColor(50, 160); // 随机生成字体颜色
ctx.font =
this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei"; // 随机生成字体大小
let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
var deg = this.randomNum(-30, 30);
// 修改坐标原点和旋转角度
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);
},
drawLine(ctx) {
// 绘制干扰线
for (let i = 0; i < 4; i++) {
ctx.strokeStyle = this.randomColor(100, 200);
ctx.beginPath();
ctx.moveTo(
this.randomNum(0, this.contentWidth),
this.randomNum(0, this.contentHeight)
);
ctx.lineTo(
this.randomNum(0, this.contentWidth),
this.randomNum(0, this.contentHeight)
);
ctx.stroke();
}
},
drawDot(ctx) {
// 绘制干扰点
for (let i = 0; i < 30; i++) {
ctx.fillStyle = this.randomColor(0, 255);
ctx.beginPath();
ctx.arc(
this.randomNum(0, this.contentWidth),
this.randomNum(0, this.contentHeight),
1,
0,
2 * Math.PI
);
ctx.fill();
}
},
},
watch: {
identifyCode() {
this.drawPic();
},
},
mounted() {
this.drawPic();
},
};
</script>