How to realize login random verification code by vue+Element

Today, I would like to share with you the relevant knowledge points about how to log in to random CAPTCHA by vue+Element. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

CAPTCHA verification is only the front end, no background interaction is required.

First, create an identify.vue page to write all kinds of: random numbers / letters, random colors, interference points / lines

Identify.vue

Export default {name: 'SIdentify', props: {identifyCode: {type: String, default:' 1234'}, fontSizeMin: {type: Number, default: 16}, fontSizeMax: {type: Number, default: 40}, backgroundColorMin: {type: Number, default: 180}, backgroundColorMax: {type: Number, default: 240}, colorMin: {type: Number Default: 50}, colorMax: {type: Number, default: 160}, lineColorMin: {type: Number, default: 40}, lineColorMax: {type: Number, default: 180}, dotColorMin: {type: Number, default: 0}, dotColorMax: {type: Number, default: 255}, contentWidth: {type: Number, default: 112} ContentHeight: {type: Number, default: 38}}, methods: {/ / generate a random number randomNum (min, max) {return Math.floor (Math.random () * (max-min) + min)}, / / generate a random color randomColor (min, max) {var r = this.randomNum (min, max) var g = this.randomNum (min Max) var b = this.randomNum (min, max) return 'rgb (' + r +','+ g +','+ b +')}, drawPic () {var canvas = document.getElementById var ctx = canvas.getContext ('2d') ctx.textBaseline =' bottom' / / drawing background ctx.fillStyle = this.randomColor (this.backgroundColorMin, this.backgroundColorMax) ctx.fillRect (0,0, this.contentWidth) This.contentHeight) / / draw text 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'; var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1)) var 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 < 8; 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 < 100; 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() } } 然后就是在你需要的页面 html代码只是简单的输入行，图片，加验证码替换 @keyup.enter.native="submitForm()是我登录时摁下Enter直接登录的方法可有可无，自己选择 看不清，换一张 然后就是script 首先引入SIdentify import SIdentify from '../../components/page/identify.vue' 下面各种方法，验证及规则就直接写完了 export default { data: function() { /* 自定义验证码规则 */ const validateVerifycode = (rule, value, callback) =>

{if (value = ='') {callback (new Error ('Please enter CAPTCHA'))} else if (value! = = this.identifyCode) {console.log ('validateVerifycode:', value) Callback (new Error ('incorrect verification code!'))} else {callback ()} return {identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyzyme, identifyCode:'', rules: {verifycode: [{required: true, trigger: 'blur', validator: validateVerifycode,}]} }, components: {SIdentify}, mounted () {this.identifyCode=''; this.makeCode (this.identifyCodes,4); disableBrowserBack (); history.pushState (null, null, document.URL); if (window.history & & window.history.pushState) {$window. On ('popstate', function () {window.history.pushState (' forward', null,'') Window.history.forward (1);}); window.history.pushState ('forward', null,'); / / these two lines must be window.history.forward (1) in IE }, methods: {randomNum (min, max) {return Math.floor (Math.random () * (max-min) + min)}, / / switch verification code refreshCode () {this.identifyCode =''this.makeCode (this.identifyCodes, 4)}, makeCode (o, l) {for (let I = 0; I < l) This.identifyCode +) {this.identifyCode + = this.identifyCodes [this.randomNum (0, this.identifyCodes.length)]} console.log (this.identifyCode) / * alert (this.identifyCode) * /}

It's done here, and you can add css style to perfect it.

Identifybox {display: flex; justify-content: space-between; margin-top: 7px;} above is all the content of the article "how to login random verification code for vue+Element". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.