app前端图形验证码（全部代码）

最新推荐文章于 2025-07-17 17:11:09 发布

原创最新推荐文章于 2025-07-17 17:11:09 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在前端开发中生成并使用图形验证码。通过代码示例，展示了如何创建一个包含字母和数字的随机验证码，并将其显示在按钮上，同时提供输入框供用户输入验证。适合初学者和开发者快速掌握图形验证码的实现。

直接上代码

<view >
				<input type="text" placeholder="请输入图形验证码" v-model="imgCode" placeholder-class="placeholder" />
				<button type="button" @click="createCode" >{{checkCode}}</button>
	</view>

data() {
			return {
				imgCode: "", //图片验证码
				checkCode: "",
				picLyanzhengma: "",
						};
		},

onShow() {
			var that = this;
			that.createCode();
			}

createCode() {
				//先清空验证码的输入
				this.imgCode1 = "";
				this.checkCode = "";
				this.picLyanzhengma = "";
				//验证码的长度  
				var codeLength = 4;
				var random = new Array(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');
				for (var i = 0; i < codeLength; i++) {
				//随机数 
					//取得随机数的索引（0~35）
					var index = Math.floor(Math.random() * 36);
					//根据索引取得随机数加到imgCode上
					this.imgCode1 += random[index];
				}
				//把imgCode值赋给验证码  
				this.checkCode = this.imgCode1;
			},