Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.