java生成验证码在vue显示_vue实现随机验证码功能(完整代码)

效果图:

e2f842a97233ca2d14c0570c29513cdd.png

1.html代码

java生成验证码在vue显示_vue实现随机验证码功能(完整代码)_第1张图片

验证码:

2.css样式

java生成验证码在vue显示_vue实现随机验证码功能(完整代码)_第2张图片

/*验证码样式*/

.code{

width:124px;

height:31px;

border:1px solid rgba(186,186,186,1);

}

.login-code{

cursor: pointer;

}

CSS 代码

3.js引入验证码组件,并且定义三个变量。

java生成验证码在vue显示_vue实现随机验证码功能(完整代码)_第3张图片

import SIdentify from '../components/sidentify'

components: { SIdentify },

data () {

return {

identifyCodes: "1234567890",

identifyCode: "",

code:"",//text框输入的验证码

}

},

引入验证码组件,以及需要定义的变量

4.mounted里的代码

ef2b108f22f8be3300b2ce8b0fe1d7b5.png

mounted(){

this.identifyCode = "";

this.makeCode(this.identifyCodes, 4);

},

mounted代码

5.在created里初始化验证码

8081ad5c5168ab1433894bc1684c1913.png

6.methods里添加以下方法。

java生成验证码在vue显示_vue实现随机验证码功能(完整代码)_第4张图片

//验证码

randomNum(min, max) {

return Math.floor(Math.random() * (max - min) + min);

},

refreshCode() {

this.identifyCode = "";

this.makeCode(this.identifyCodes, 4);

},

makeCode(o, l) {

for (let i = 0; i < l; i++) {

this.identifyCode += this.identifyCodes[

this.randomNum(0, this.identifyCodes.length)

];

}

console.log(this.identifyCode);

},

需要用到的方法

在提交表单的时候对验证码进行判断。

java生成验证码在vue显示_vue实现随机验证码功能(完整代码)_第5张图片

sidentify.vue组件代码:

java生成验证码在vue显示_vue实现随机验证码功能(完整代码)_第6张图片

代码:

export default {

name: 'SIdentify',

props: {

identifyCode: {

type: String,

default: '1234'

},

fontSizeMin: {

type: Number,

default: 25

},

fontSizeMax: {

type: Number,

default: 30

},

backgroundColorMin: {

type: Number,

default: 255

},

backgroundColorMax: {

type: Number,

default: 255

},

colorMin: {

type: Number,

default: 0

},

colorMax: {

type: Number,

default: 160

},

lineColorMin: {

type: Number,

default: 100

},

lineColorMax: {

type: Number,

default: 255

},

dotColorMin: {

type: Number,

default: 0

},

dotColorMax: {

type: Number,

default: 255

},

contentWidth: {

type: Number,

default: 112

},

contentHeight: {

type: Number,

default: 31

}

},

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 = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)

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(this.colorMin, this.colorMax)

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(-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)

},

drawLine(ctx) {

// 绘制干扰线

for (let i = 0; i < 5; i++) {

ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)

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 < 80; 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()

}

}

.s-canvas {

height: 38px;

}

.s-canvas canvas{

margin-top: 1px;

margin-left: 8px;

}

这篇文章是我参考别人写的,很感谢那个博主。

总结

以上所述是小编给大家介绍的vue实现随机验证码功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

你可能感兴趣的:(java生成验证码在vue显示)