如何在 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 的多线程…

深度学习:从神经网络到人工智能的飞跃

深度学习&#xff1a;从神经网络到人工智能的飞跃 深度学习&#xff08;Deep Learning&#xff09;是人工智能&#xff08;AI&#xff09;领域的一个重要分支&#xff0c;近年来在图像识别、自然语言处理、语音识别等领域取得了显著的进展。深度学习通过构建多层神经网络&…

华为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;然后加…

SQL拦截(二)InnerInterceptor

一、介绍 1、简介 InnerInterceptor 接口是 MyBatis-Plus 提供的一个拦截器接口&#xff0c;用于实现一些常用的 SQL 处理逻辑。 二、API InnerInterceptor 接口继承自 MyBatis 的 Interceptor 接口&#xff0c;并添加了一些新的方法&#xff0c;用于处理 MyBatis-Plus 的特…

Hive数据库操作语法

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

2024年最新crm系统TOP10!

在当今竞争激烈的商业环境中&#xff0c;维持良好的客户关系是企业成功的关键所在。CRM&#xff08;客户关系管理&#xff09;系统已成为帮助企业优化客户关系、提高客户满意度和增加业务收入的有力工具。随着技术的不断进步&#xff0c;2024年最新的CRM系统提供了更先进的功能…

车载通信架构 --- 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。它也可以带有逻辑&…

【LeetCode】【算法】160.相交链表

Leetcode 160. 相交链表 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 思路 AB&#xff0c;一个指针&#xff0c;访问完A访问B&#xff1b;另一个指针&#…

[UUCTF 2022 新生赛]ezpop 详细题解(字符串逃逸)

知识点: php反序列化字符串逃逸 php反序列化魔术方法 构造pop链 变量引用 其实这一题还是比较简单的,只要看懂代码,并且理解为什么要用反序列化字符串逃逸,下面会详细解释 题目源码: <?php //flag in flag.php error_reporting(0); class UUCTF{public $name,$key,$…

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

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

从 HTTP 到 HTTPS 再到 HSTS:网站安全的演变与实践

近年来&#xff0c;随着域名劫持、信息泄漏等网络安全事件的频繁发生&#xff0c;网站安全变得越来越重要。这促使网络传输协议从 HTTP 发展到 HTTPS&#xff0c;再到 HSTS。本文将详细介绍这些协议的演变过程及其在实际应用中的重要性。 一、HTTP 协议 1.1 HTTP 简介 HTTP&…

Oracle 第15章:安全性管理

在Oracle数据库中&#xff0c;安全性管理是一个至关重要的方面&#xff0c;它确保了数据的完整性和机密性。第15章通常会涵盖用户权限、角色分配、数据库审计和安全策略等内容。下面我会概述这些主题&#xff0c;并提供一些示例来帮助理解。 用户权限与角色 用户权限 在Orac…

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领域的理想…