uni - 随机验证码

本是古典何须时尚 2022-12-04 07:52 191阅读 0赞

样式：

<view class="canvas-img-code" @click="refresh()">
    	<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
    </view>

JS：

<script>
    export default { 
    	data() { 
    		return { 
    			width: 120,
    			height: 45
    		}
    	},
    	onShow() { 
    		var _this = this;
    		setTimeout(function() { 
    			_this.init();
    		}, 1000)
    	},
    	methods: { 
    		// 初始化验证码
    		init: function() { 
    			console.log('start');
    			var context = uni.createCanvasContext('imgcanvas', this),
    				w = this.width,
    				h = this.height;
    			context.setFillStyle("white");
    			context.setLineWidth(5);
    			context.fillRect(0, 0, w, h);
    			var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
    					"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
    				],
    				str = '';
    			for (var i = 0; i < 4; i++) { 
    				var c = pool[this.rn(0, pool.length - 1)];
    				var deg = this.rn(-30, 30);
    				context.setFontSize(18);
    				context.setTextBaseline("top");
    				context.setFillStyle(this.rc(80, 150));
    				context.save();
    				context.translate(30 * i + 15, parseInt(h / 1.5));
    				context.rotate(deg * Math.PI / 180);
    				context.fillText(c, -15 + 5, -15);
    				context.restore();
    				str += c;
    			}
    			uni.setStorage({ 
    				key: 'imgcode',
    				data: str,
    			});
    			for (var i = 0; i < 40; i++) { 
    				context.beginPath();
    				context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
    				context.closePath();
    				context.setFillStyle(this.rc(150, 200));
    				context.fill();
    			}
    			context.draw();
    			console.log(str);
    			console.log('end');
    		},
    		rc: function(min, max) { 
    			var r = this.rn(min, max);
    			var g = this.rn(min, max);
    			var b = this.rn(min, max);
    			return "rgb(" + r + "," + g + "," + b + ")";
    		},
    		rn: function(max, min) { 
    			return parseInt(Math.random() * (max - min)) + min;
    		},
    		refresh: function() { 
    			this.init();
    		},
    		canvasIdErrorCallback: function(e) { 
    			console.error(e.detail.errMsg)
    		}
    	}
    }
    </script>

验证码表单验证：

if (this.verCode.length != 4) { 
    					uni.showToast({ 
    						icon: 'none',
    						position: 'bottom',
    						title: '验证码不正确'
    					});
    					return false;
    				}
    				if (this.verCode.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) { 
    					uni.showToast({ 
    						icon: 'none',
    						position: 'bottom',
    						title: '验证码不正确'
    					});
    					return false;
    				}

![在这里插入图片描述][20200906205304464.png_pic_center]

[20200906205304464.png_pic_center]: /images/20221123/8385d148f086454cbdb02c5cf2749aaa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现随机验证码并验证

前言在许多登录页面里，我们都可以看到验证码的身影，每次登录都需要重新输入验证码。这个功能非常重要，它可以有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不

àì夳堔傛蜴生んèń/ 2023年01月13日 15:00/ 0 赞/ 218 阅读

相关 uni - 随机验证码

样式：  <view class="canvas-img-code" @click="refresh()"> <ca

本是古典何须时尚/ 2022年12月04日 07:52/ 0 赞/ 192 阅读

相关随机验证码函数

// 验证码函数 function randomCode(num) \{ var str = 'qwertyuioplkjhgfdsazxcvbnm12345678

客官°小女子只卖身不卖艺/ 2022年09月10日 04:19/ 0 赞/ 226 阅读

相关随机生成验证码

//login.jsp加入 <dt>验证码</dt> <dd> <input type="text" name="c

蔚落/ 2022年05月14日 14:28/ 0 赞/ 422 阅读

相关 java 生产运算验证码&随机验证码

public class ValidateCodeUtil { // 图片的宽度。 private int width = 160;

雨点打透心脏的1/2处/ 2022年05月09日 13:03/ 0 赞/ 308 阅读

相关随机验证码的生成

随机验证码的生成（手机或者邮箱验证码）先写了个随机验证码的工具类 public class Randomutil \{ private Randomutil() \

怼烎@/ 2022年05月08日 10:22/ 0 赞/ 368 阅读

相关 JS实现随机验证码

验证码验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，一般都是后台返回的，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的

待我称王封你为后i/ 2022年03月29日 09:41/ 0 赞/ 422 阅读

相关 javascript随机验证码

随机验证码 box { width: 100px; height: 40px;

川长思鸟来/ 2022年01月28日 00:29/ 0 赞/ 311 阅读

相关【验证码】PHP生成随机验证码

<?php // Header("Content-type: image/gif"); / 初始化 / $bo

本是古典何须时尚/ 2021年09月26日 02:36/ 0 赞/ 573 阅读

相关前端随机验证码

[前端随机验证码 ][Link 1] 前端登录或者注册的时候经常会有一个验证码，数字或者字母，本验证码是基于canves的。使用方法： <!DOCTY

蔚落/ 2021年09月02日 05:12/ 0 赞/ 481 阅读