如何在 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.mzph.cn/news/884900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习—例子:图像识别

在上篇文章中&#xff0c;在一个需求预测示例中看到了神经网络是如何工作的&#xff0c;那么如何将类似类型的想法应用于计算机视觉应用程序。 如果你正在开发人脸识别应用程序&#xff0c;让我们深入研究一下。假设一个神经网络将这样的图片作为输入&#xff0c;并输出图片中…

别再被多线程搞晕了!一篇文章轻松搞懂 Linux 多线程同步!

前言 大家有没有遇到过&#xff0c;代码跑着跑着&#xff0c;线程突然抢资源抢疯了&#xff1f;其实&#xff0c;这都是“多线程同步”在作怪。多线程同步是个老生常谈的话题&#xff0c;可每次真正要处理时还是让人头疼。这篇文章&#xff0c;带你从头到尾掌握 Linux 的多线程…

华为OD机试真题-推荐多样性

题目描述 推荐多样性需要从多个列表中选择元素&#xff0c;一次性要返回N屏数据&#xff08;窗口数量&#xff09;&#xff0c;每屏展示K个元素&#xff08;窗口大小&#xff09;&#xff0c;选择策略&#xff1a; 各个列表元素需要做穿插处理&#xff0c;即先从第一个列表中为…

HTML、CSS 和 JavaScript 在网页设计方面的介绍

关于 HTML、CSS 和 JavaScript 在网页设计方面的介绍: HTML(超文本标记语言 - HyperText Markup Language) 结构基础:HTML 是网页内容的骨架。它通过一系列的标签来定义网页中的各种元素,比如 <html> 标签是整个页面的根标签,<head> 标签用于包含页面的元信…

对于用户密码的加密

这篇文章也是在做项目的时候使用到的内容&#xff0c;来做成一篇博客 &#xff08;一&#xff09;加密是什么&#xff1f; 我们在https中也说到了加密&#xff0c;因为https就是http加密后的产物&#xff0c;当时又说到了运营商劫持&#xff0c;然后引出加密&#xff0c;然后加…

Hive数据库操作语法

数据类型 内部表和外部表 内部表 &#xff08;CREATE TABLE table_name ......&#xff09;未被external关键字修饰的即是内部表&#xff0c; 即普通表。 内部表又称管理表,内部表数据存储的位置由hive.metastore.warehouse.dir参数决定&#xff08;默认&#xff1a;/user/h…

车载通信架构 --- PNC、UB与信号的关系

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

CLIP-Driven Universal Model for Organ Segmentation and Tumor Detection论文解读和实验复现

背景 医学图像数据集的增长&#xff1a;随着公开的医学图像数据集数量的增加&#xff0c;自动化器官分割和肿瘤检测技术得到了显著发展。数据集的局限性&#xff1a;尽管数据集数量增加&#xff0c;但每个数据集通常规模较小&#xff0c;且存在部分标注问题。这意味着不是所有…

如何使用Varjo直接观看Blender内容

最近&#xff0c;开源的3D建模程序Blender为Varjo提供了出色的OpenXR支持&#xff0c;包括四视图和凹进渲染扩展。但是在Blender中&#xff0c;默认不启用VR场景检查。要开始使用VR场景检查&#xff0c;只需遵循以下步骤&#xff1a; 1. 下载并安装Blender 2.启用Blender VR场景…

Go 语言之搭建通用 Web 项目开发脚手架

Go 语言之搭建通用 Web 项目开发脚手架 MVC 模式 MVC 模式代表 Model-View-Controller&#xff08;模型-视图-控制器&#xff09; 模式。这种模式用于应用程序的分层开发。 Model&#xff08;模型&#xff09; - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑&…

Python爬虫基础-正则表达式!

前言 正则表达式是对字符串的一种逻辑公式&#xff0c;用事先定义好的一些特定字符、及这些特定字符的组合&#xff0c;组成一个“规则的字符串”&#xff0c;此字符串用来表示对字符串的一种“过滤”逻辑。正在在很多开发语言中都存在&#xff0c;而非python独有。对其知识点…

AI之硬件对比:据传英伟达Nvidia2025年将推出RTX 5090-32GB/RTX 5080-24GB、华为2025年推出910C/910D

AI之硬件对比&#xff1a;据传英伟达Nvidia2025年将推出RTX 5090-32GB/RTX 5080-24GB、华为2025年推出910C/910D 目录 Nvidia的显卡 Nvidia的5090/5080/4090/4080&#xff1a;据传传英伟达Nvidia RTX 5090后续推出32GB版且RTX 5080后续或推出24GB版 RTX 5090相较于RTX 4090&…

SRS:构建实时免费视频服务器的全方位指南

SRS&#xff08;Simple Realtime Server&#xff09;是一个开源的、基于MIT协议的实时视频服务器&#xff0c;以其简单、高效而著称。它支持多种流媒体协议&#xff0c;包括RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等&#xff0c;使其成为直播和WebRTC领域的理想…

Day95 Docker

Docker的使用 1、Docker是什么 docker是一个用来管理镜像的容器 容器(container)&#xff1a;可以装东西 镜像( image )&#xff1a;所谓的镜像&#xff0c;你可以认为就是一个虚拟机 虚拟机&#xff1a;用软件代理硬件来模拟整个计算机的这样一套软件就成为 虚拟机 镜像说白了…

Imperva 数据库与安全解决方案

Imperva是网络安全解决方案的专业提供商&#xff0c;能够在云端和本地对业务关键数据和应用程序提供保护。公司成立于 2002 年&#xff0c;拥有稳定的发展和成功历史并于 2014 年实现产值1.64亿美元&#xff0c;公司的3700多位客户及300个合作伙伴分布于全球各地的90多个国家。…

搜维尔科技:【煤矿虚拟仿真】煤矿企业、高校、科研单位-多语言支持、数字孪生、交互式学习体验

品牌&#xff1a;SouVR 发票&#xff1a;支持专票、普票 单位&#xff1a;套 版本号&#xff1a;1.0 包装清单&#xff1a;软件1套 软件形式&#xff1a;U盘、光盘 运行环境&#xff1a;windows 应用对象&#xff1a;煤矿企业、高校、科研单位 系统配置&#xff1a;…

[C++]——哈希(附源码)

目录 ​编辑 ​编辑 一、前言 二、正文 2.1 unorder系列关联式容器 2.1.1 unordered_map 2.1.1.1 unorderer_map的介绍 ①unordered_map的构造 ②unordered_map的容量 ③unordered_map的迭代器 ④unordered_map的元素访问 ⑤unordered_map的查询 ⑥unordered_map的修改操…

Linux:防火墙和selinux对服务的影响

1-1selinux 1-1 SELinux是对程序、文件等权限设置依据的一个内核模块。由于启动网络服务的也是程序&#xff0c;因此刚好也 是能够控制网络服务能否访问系统资源的一道关卡。 1-2 SELinux是通过MAC的方式来控制管理进程&#xff0c;它控制的主体是进程&#xff0c;而目标则是…

qt QProgressBar详解

1、概述 QProgressBar是Qt框架中的一个控件&#xff0c;专门用于显示任务的进度。它提供了一个可视化的进度条&#xff0c;让用户能够直观地了解任务的完成程度。QProgressBar支持水平和垂直两种显示方向&#xff0c;并且可以通过设置最小值和最大值来指定进度条的范围。此外&…

力扣最热一百题——杨辉三角

目录 题目链接&#xff1a;118. 杨辉三角 - 力扣&#xff08;LeetCode&#xff09; 题目描述 示例 提示: 解法一&#xff1a;利用特性构建杨辉三角 1. 结果存储结构&#xff1a; 2. 初始化和循环遍历每一层&#xff1a; 3. 构建每一层&#xff1a; 4. 填充中间的元素&…