vue+uniapp实现图形验证码功能-插件（附源码）_uniapp图片验证码(1)

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1、/ components / captcha.vue

<uni-popup ref="popup" type="center">
	<div class="popup-content">
		<image style="width: 130px; height: 50px; background-color: #eeeeee;" :src="captchaBase64" />
		<div style="text-align: right;font-size: 12px;">
			<a href="javascript:void(0);" title="点我换一个" @click="queryList()" class="tar cup c43a3c1">看不清？</a>
		</div>
		<div style="margin-top: 10px;">
			<uni-easyinput v-model="formData.captcha" placeholder="请输入图形码" @keyup.enter.native="submit()" autocomplete="off" clear focus />
		</div>
	</div>
	<div class="popup-footer">
		<button type="primary" class="btn-submit" @click="submit" :disabled="formData.captcha?false:true">{{btnTitle || '验证'}}</button>
	</div>
	<div class="popup-close" @click="close">
		<uni-icons type="close" size="25" color="#bbb"></uni-icons>
	</div>
</uni-popup>
......
......

2、/ pages / login.vue

......
<captcha ref="captcha" title="请输入图片验证码" :btn-title="'发送短信验证码'" type="getLoginSms" :req-data="captchaData" @success="captchaSuccess()"></captcha>
......

源码链接：vue+uniapp实现图形验证码功能-插件（附源码）
源码链接：vue+uniapp实现图形验证码功能-插件（附源码）
源码链接：vue+uniapp实现图形验证码功能-插件（附源码）

三、附：发短信相关安全机制

1. 限制每个手机号的每日发送次数，超过次数则拒发送，提示超过当日次数。
2. 限制每个ip的最大限制次数。超过次数则拒发送，提示超过ip当日发送最大次数。
3. 限制每个手机号发送的时间间隔，比如两分钟，没超过2分钟，不允许发送，提示操作频繁。
4. 发送短信增加图片验证码，服务端和输入验证码对比，不一致则拒绝发送。

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】