如何在 uniapp 中实现图形验证码

全篇大概2000 字(含代码),建议阅读时间10分钟。

什么是图形验证码?

        图形验证码(也称为图片验证码或验证码图像)通常用于防止机器人自动提交表单,确保用户是人工操作。

一、需求

我们希望在一个表单中实现以下功能:

1.用户输入手机号。

2.用户看到一个图形验证码,并输入验证码内容。

3.用户点击“发送短信”按钮,发送验证码到指定手机号。

二、实现步骤

2.1 项目准备 

创建一下一个uniapp项目,项目名称自拟。

2.2 页面结构

首先,我们设计一个简单的页面布局,其中包括手机号输入框、图形验证码图片、验证码输入框以及发送短信按钮。

<template><view class="container"><view class="phone-container"><view class="label-title">手机号<label>*</label></view><input v-model="phone"placeholder="请输入手机号"type="number"maxlength="11" /></view><view class="verification-container"><img:src="captchaImage"alt="验证码"class="captcha"@click="refreshCaptcha"/><input v-model="verificationCode" placeholder="请输入验证码" maxlength="4" type="number" class="verification-input" /></view><button @click="sendSMS" class="sendBtn">发送短信</button></view>
</template>

2.3 处理数据和方法

接下来,我们将处理数据和方法的部分。

data 中定义手机号、验证码输入、图形验证码等字段。

methods 中,我们需要实现以下几个功能:

generateCaptcha:生成一个随机的图形验证码。

refreshCaptcha:点击图形验证码时刷新验证码。

sendSMS:点击发送短信按钮时触发发送短信的逻辑。

<script>
export default {data() {return {phone: '',             // 用户输入的手机号verificationCode: '', // 用户输入的验证码captchaImage: '',     // 图形验证码图片地址};},methods: {sendSMS() {/** 发送短信*/console.log('发送短信到:', this.phone);},generateCaptcha() {/** 生成一个随机的验证码并显示为图片*/// 生成一个4位数的验证码const captcha = Math.floor(1000 + Math.random() * 9000);// 使用一个免费的图片生成服务this.captchaImage = `https://dummyimage.com/100x40/000/fff&text=${captcha}`; },refreshCaptcha() {/** 刷新验证码*/this.generateCaptcha(); // 重新生成验证码},},mounted() {/** 页面加载时生成验证码*/this.generateCaptcha();},
};
</script>

2.4 CSS样式

<style>
.container {padding: 20px;
}.phone-container {margin-bottom: 20px;
}.label-title {font-size: 16px;margin-bottom: 5px;
}input {width: 100%;padding: 10px;margin-top: 5px;border: 1px solid #ccc;border-radius: 4px;
}.verification-container {display: flex;align-items: center;margin-bottom: 20px;
}.captcha {width: 100px;height: 40px;margin-right: 10px;cursor: pointer;
}.verification-input {flex: 1;padding: 10px;font-size: 16px;border: 1px solid #ddd;border-radius: 4px;
}.sendBtn {background-color: #00ac56;color: white;padding: 10px;border-radius: 4px;font-size: 16px;cursor: pointer;
}.sendBtn:hover {background-color: #008c4e;
}
</style>

三、图形验证码实现逻辑

生成验证码:使用一个免费的图片生成服务(https://dummyimage.com/)来生成验证码。我们生成一个随机的4位数,然后通过 dummyimage.com 服务生成带有文本的图片作为验证码。

刷新验证码:当用户点击验证码图片时,调用 refreshCaptcha 方法重新生成一个新的验证码。

 

四、总结

图形验证码是防止机器人滥用表单的有效手段。通过集成免费的验证码图片生成服务,我们可以快速构建图形验证码的功能,并结合输入框和按钮完成整个用户交互流程。

希望这篇文章对你有所帮助,如果有任何问题或改进建议,欢迎在评论区留言!

相关文章

你从未见过的 10 个令人惊叹的 JavaScript 技巧

 HTML+CSS+JS 实现动态模态超级英雄卡片效果

使用 HTML 和 CSS 创建 3D 菜单效果 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/6940.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

基于 Java(SpringBoot)+MySQL 开发古诗词学习网站

古诗词系统设计与实现 引言 编写目的 为了保证项目团队按时保质地完成项目目标&#xff0c;便于项目团队成员更好地了解项目情况&#xff0c;使项目工作开展的各个过程合理有序&#xff0c;有必要以文件化的形式&#xff0c;把对于在项目生命周期内的工作任务范围、各项工作…

基于JavaWeb+MySQL实现口算题卡

爱 math 口算题卡 1. 总体要求 综合运用软件工程的思想&#xff0c;协同完成一个软件项目的开发&#xff0c;掌软件工程相关的技术和方法&#xff1b;组成小组进行选题&#xff0c;通过调研完成项目的需求分析&#xff0c;并详细说明小组成员的分工、项目的时间管理等方面。根…

Sibyl:提升复杂现实世界推理能力的LLM智能体框架

人工智能咨询培训老师叶梓 转载标明出处 大模型&#xff08;LLMs&#xff09;以其卓越的问题解决能力而闻名&#xff0c;这主要归功于它们内在的知识储备、强大的上下文学习能力以及零样本&#xff08;zero-shot&#xff09;能力。然而&#xff0c;这些基于LLM的智能体在长期推…

Jest项目实战(4):将工具库顺利迁移到GitHub的完整指南

开源代码&#xff1a;将工具库迁移到GitHub 随着项目的成熟和完善&#xff0c;将其开源不仅可以获得更多的用户和贡献者&#xff0c;还能促进项目本身的发展。GitHub作为全球最大的开源协作平台&#xff0c;自然成为了大多数开发者的首选。本文将引导您完成将工具库迁移至GitH…

ai面试辅助工具有哪些

目前市场上常见的AI面试辅助工具包括以下几款‌&#xff1a; ‌白瓜面试‌&#xff1a;这是一款专为在线面试和笔试场景设计的AI助手&#xff0c;支持实时语音识别、图片识别、智能辅助回答等功能&#xff0c;适用于多种岗位和面试平台‌ ‌Interview‌&#xff1a;这是一款基…

Redis - Zset 有序集合

一、基本认识 有序集合相对于字符串、列表、哈希、集合来说会有⼀些陌⽣。它保留了集合不能有重复成员的 特点&#xff0c;但与集合不同的是&#xff0c;有序集合中的每个元素都有⼀个唯⼀的浮点类型的分数&#xff08;score&#xff09;与之关 联&#xff0c;着使得有序集合中…

Linux下的WatchDog

看门狗&#x1f415; 看门狗简介 看门狗定时器&#xff08;Watchdog Timer&#xff09;是一种定时器&#xff0c;用于检测系统是否正常运行。如果系统在规定时间内没有向看门狗定时器发送复位信号&#xff0c;看门狗定时器就会产生复位信号&#xff0c;使系统复位。看门狗定时…

vue3+vite搭建脚手架项目本地运行electron桌面应用

1.搭建脚手架项目 搭建Vue3ViteTs脚手架-CSDN博客 2.创建完项目后&#xff0c;安装所需依赖包 npm i vite-plugin-electron electron26.1.0 3.根目录下创建electron/main.ts electron/main.ts /** electron/main.ts */import { app, BrowserWindow } from "electron&qu…

推荐一款基于Flash的交互式园林设计工具:Garden Planner

Garden Planner是一款由Artifact Interactive开发的基于Flash的交互式园林设计工具。它允许用户以拖放的方式安排植物、树木、建筑物和各种对象&#xff0c;使园林规划变得简单直观。此外&#xff0c;Garden Planner提供工具来快速创建铺路、路径和围栏&#xff0c;帮助用户设计…

H7-TOOL的LUA小程序教程第17期:扩展驱动AD7606, ADS1256,MCP3421, 8路继电器和5路DS18B20(2024-11-01)

LUA脚本的好处是用户可以根据自己注册的一批API&#xff08;当前TOOL已经提供了几百个函数供大家使用&#xff09;&#xff0c;实现各种小程序&#xff0c;不再限制Flash里面已经下载的程序&#xff0c;就跟手机安装APP差不多&#xff0c;所以在H7-TOOL里面被广泛使用&#xff…

JAVA基础:数组 (习题笔记)

一&#xff0c;编码题 1&#xff0c;数组查找操作&#xff1a;定义一个长度为10 的一维字符串数组&#xff0c;在每一个元素存放一个单词&#xff1b;然后运行时从命令行输入一个单词&#xff0c;程序判断数组是否包含有这个单词&#xff0c;包含这个单词就打印出“Yes”&…

为开源 AI 模型引入激励机制?解读加密 AI 协议 Sentient 的大模型代币化解决方案

撰文&#xff1a;Shlok Khemani 编译&#xff1a;Glendon&#xff0c;Techub News 古时候&#xff0c;中国人深信「阴阳」的概念——宇宙的每一个方面都蕴含着内在的二元性&#xff0c;这两种相反的力量不断地相互联系&#xff0c;形成一个统一的整体。就好比女性代表「阴」&a…

ONES 功能上新|ONES Project 甘特图全面升级

ONES Project 甘特图全面升级&#xff0c;提供更加专业、灵活的工具。 项目经理往往面临项目进度难以直观把控、关键任务容易遗漏、里程碑节点缺乏明确标记、进度偏差无法及时发现等挑战。 针对这些痛点&#xff0c;ONES 新增了关键路径、基线对比、里程碑视图、交付物视图等 1…

windows 进程降权和提权代码示例(2) c++

强制完整性控制 - Win32 应用程序 |Microsoft 学习 一、强制完整性控制 品03/26/20217 个参与者 反馈 本文内容 诚信标签进程创建强制性政策 强制完整性控制 &#xff08;MIC&#xff09; 提供了一种用于控制对安全对象的访问的机制。此机制是对自主访问控制的补充&#xff…

基于Python的旅游景点推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

【C++】vector 类深度解析:探索动态数组的奥秘

&#x1f31f;快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 &#x1f31f; 如果你对string类还存在疑惑&#xff0c;欢迎阅读我之前的作品 &#xff1a; &#x1f449;【C】string 类深度解析&#xff1a;…

Hugging Face 平台轻松上手 | 书生大模型

文章目录 HF 的 Transformers 库GitHub CodeSpace 使用终端安装依赖下载 internlm2_5-7b-chat 的配置文件 参考文献 HF 的 Transformers 库 直接使用预训练模型进行推理提供了大量预训练模型可供使用使用预训练模型进行迁移学习 因此在使用 HF 前&#xff0c;我们需要下载 Tra…

项目升级到.Net8.0 Autofac引发诡异的问题

前两天把项目升级到.Net8.0了&#xff0c;把.Net框架升级了&#xff0c;其他一些第三方库升级了一部分&#xff0c;升级完以后项目跑不起来了&#xff0c;报如下错误&#xff1a; An unhandled exception occurred while processing the request. DependencyResolutionExcepti…

如何开发查找附近地点的微信小程序

我开发的是找附近卫生间的小程序。 在现代城市生活中&#xff0c;找到一个干净、方便的公共卫生间有时可能是一个挑战。为了解决这个问题&#xff0c;我们可以开发一款微信小程序&#xff0c;帮助用户快速找到附近的卫生间。本文将介绍如何开发这样一款小程序&#xff0c;包…

canfestival主站多电机对象字典配置

不要使用数组进行命名&#xff1a;无法运行PDO 使用各自命名的方式&#xff1a;