发送邮箱验证码

最新推荐文章于 2023-04-08 14:42:45 发布
最新推荐文章于 2023-04-08 14:42:45 发布
阅读量1.7k 收藏 9
点赞数 2
分类专栏： Java Web html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skye_95/article/details/81665402
版权

发送邮箱验证码与发送短信验证码很像，只是校验的方法不同。

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../layui/css/layui.css" />
	</head>
	<body>
		<form class="layui-form">
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" lay-verify="email" id="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱验证码</label>
				<div class="layui-input-inline">
					<input type="text" name="emailcode" lay-verify="required" placeholder="请输入邮箱验证码" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline">
					<input id="send-email-code" style="width: 120px;height: 39px;text-align: center;background-color: white;border: 1px solid #E2E2E2" name="send-email-code" type="button"   value="获取验证码"  />
				</div>
			</div>
			<div class="layui-form-item">
				<span id="emailTip"></span>
			</div>
			<div class="layui-form-item">
			    <div class="layui-input-block">
  			    <button class="layui-btn" lay-submit="" id="submit-email-code" >立即提交</button>
            </div>
			</div>
		</form>
		
		<script type="text/javascript" src="../../layui/layui.js" ></script>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../../js/user/emailcodeVerify.js" ></script>
		<script>
			layui.use(['form','jquery'],function(){
				var form = layui.form,
				$ = layui.$;
				
	
				
			});
		</script>
	</body>
</html>

js

var InterValObj; //timer变量，控制时间
var count = 60; //间隔函数，1秒执行
var curCount;//当前剩余秒数
//向邮箱发送验证码
$('#send-email-code').click(function(){
	//校验邮箱
	var email = $("#email").val();
    if(!email.match(/^[a-z0-9]+([._]*[a-z0-9]+)*@[a-z0-9]+([_.][a-z0-9]+)+$/gi)){
        alert("邮箱格式不正确！请重新输入");
        return false;
    }
    
	// 设置button效果，开始计时
	curCount = count;
	document.getElementById("send-email-code").setAttribute("disabled","true" );//设置按钮为禁用状态
	document.getElementById("send-email-code").value=curCount + "秒后重获";//更改按钮文字
	InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
    
    //请求发送验证码
//  $.ajax({
//  	type:"get",
//  	url:"",
//  	async:true,
//  	data:{"email":email},
//  	success:function(obj){
//  		if(){//验证码发送成功
//  			$('#emailTip').html("<font color='#339933'>√ 邮箱验证码已发到您的手机,请查收</font>");
//  		}else if(){
//  			$("#emailTip").html("<font color='red'>× 短信验证码发送失败，请重新发送</font>");
//  		}
//  	},
//  	dataType:"json"
//  });
});

//timer处理函数
function SetRemainTime() {
	if (curCount == 0) {//超时重新获取验证码                
		window.clearInterval(InterValObj);// 停止计时器
		document.getElementById("send-email-code").removeAttribute("disabled");//移除禁用状态改为可用
		document.getElementById("send-email-code").value="重获验证码";
	}else {
		curCount--;
		document.getElementById("send-email-code").value=curCount + "秒后重获";
	}
}

初始界面：

不填写邮箱直接点击提交：

不填写邮箱直接获取验证码：

不填写验证码直接点击提交：

点击获取验证码：

Skye Lin
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui:输入邮箱号或者手机号验证（同时验证，输入其中之一可校验通过）
weixin_51406702的博客
11-30 1057
最近接到一个需求，要求不管输入邮箱号还是电话号都要校验，并且输入其中之一可校验通过。
java邮箱验证码_Java实现邮箱验证码
weixin_31304499的博客
02-15 1002
原标题：Java实现邮箱验证码声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。邮箱验证码一般能使用邮箱注册的账户，在进行登录、注册或忘记密码等操作时，都能使用邮箱进行验证，所以邮箱验证码也使用得比较广泛，不过相对于短信验证码来说，邮箱验证码使用的少一些，因为现在是个人都有手机号码，但是不一定会有邮箱账号。使用...
短信验证码和邮箱验证码
m0_56357357的博客
05-21 2581
一、短信发送验证码 1、准备工作 注册容联运账号，当然可以选择其他云，目前本人发现其他云以及容联云现在都不能个人认证，但是相对其他云，容联云免费给我们提供8元的短信配额，我们可以免费使用，非常给力。当然愿意且有能力使用其他云的也是可以，自由选择（当然本人下面的所有步骤就会议容联云为主了） 注册完成后前往控制台首页，找到Accout sid、token、Url这三个值。AppID是默认应用的id，注册后会有默认应用，当然我们可以自己在应用管理中添加新的应用，如果使用新的应用，记住其AppID。此处应用可
springboot实现邮箱验证码功能
YXXXYX的博客
04-08 3657
邮箱验证码是一个常见的功能，常用于邮箱绑定、修改密码等操作上，这里我演示一下如何使用springboot实现验证码的发送功能；这里用qq邮箱进行演示，其他都差不多；
实战总结：Java实现邮箱发送验证码
修行者Java的博客
10-13 9177
邮箱发送验证码 目前项目中需要同时支持短信和邮箱验证，短信用的是腾讯云就不多说了，在此分享一下邮箱验证码发送。 首先，作为发送邮箱，需要开启POP3/SMTP/IMAP，登录邮箱–设置–账户–开启POP3/SMTP/IMAP，开启时可能会有短信验证，开启后显示验证码之类的一串英文，复制保存起来，后面要用 开启之后就可以作为发送邮箱，发验证码给用户了，代码如下 pom包引入： <!--邮箱发送--> <dependency> <groupId>com.sun.ma
PHP发送邮箱验证码
09-11
首先，要实现PHP发送邮箱验证码，我们需要了解SMTP（Simple Mail Transfer Protocol）协议。SMTP是互联网上传输电子邮件的标准，大多数邮件服务提供商，包括QQ邮箱，都支持SMTP服务。在QQ邮箱中，你需要先开启SMTP...
SpringBoot发送邮箱验证码功能
08-25
SpringBoot发送邮箱验证码功能 SpringBoot发送邮箱验证码功能是指在 SpringBoot 框架中实现发送邮箱验证码的功能，主要用于用户注册、忘记密码、身份验证等场景。下面将详细介绍 SpringBoot 发送邮箱验证码功能的...
Java发送邮箱验证码、session校验功能
08-28
本篇主要描述“发送邮箱验证码、session校验”相关前(htmljs)后（java）台代码，业务逻辑示例,需要的朋友可以参考下
发送邮箱验证码 可实现
04-18
标签“邮件验证码 html”提示我们，可能涉及到的实现技术包括HTML，可能还会涉及服务器端的编程语言，如PHP、Python或Node.js，以及电子邮件服务API，如SMTP（简单邮件传输协议）或第三方邮件服务提供商。...
SpringBoot使用邮箱发送验证码实现注册功能
08-25
generateNumber() 方法用于生成 6 位随机验证码，而 sendEmailCode() 方法用于发送邮箱验证码： ```java public class EmailCodeUtils { public static String getNumber() { String str = "1234567890...
html中实现邮箱注册，包含验证码
03-01
简单的运用htnl写的邮箱注册，很简单，里面有正则表达式的运用，和注册的编写，对初学者很有帮助
邮箱发送验证码
10-30
项目中用到的 觉得以后还会用到把他弄成一个类一供下次使用
layui中 lay-verify验证
qq_43026206的博客
09-23 1487
layui 框架中 验证机制lay-verify
php 怎么验证邮箱验证码,PHP实现邮箱验证码验证功能
weixin_33265716的博客
03-10 2070
标签：邮箱验证登录格式tar程序body用户名实现include*文章来源：https://blog.egsec.cn/archives/623 (我的主站)*本文将主要说明：PHP实现邮箱验证码验证功能，通过注册或登录向用户发送身份确认验证码，并通过判断输入的验证码是否正确做出登录判断。实现邮箱验证码功能有三个步骤：1、下载 PHPMailer ...
虚拟邮箱地址-可随意接收邮箱验证码——网站
热门推荐
duchengen的博客
08-16 3万+
用途：应对一些临时使用的功能网站需要注册账户验证码的
PHP邮箱注册验证码功能实现（使用PHPMailer）
全栈菜鸟的博客
07-04 5480
PHP邮箱注册验证码功能实现前言php使用PHPMailer类进行邮件发送 前言 本文实现的功能是在网站注册账号时，发送邮箱验证码，并验证邮箱验证码是否正确。下面会对php的邮件发送，验证码制作作详细解说。 php使用PHPMailer类进行邮件发送 开始我以为php邮件发送只要使用mail()函数就ok了，但实际操作给了我沉重一击。mail() 函数需要服务器环境支持，而这个环境支持操作很麻烦（对我以及一些使用第三方服务器的来说）。所以我选择了万金油PHPMailer，PHPMailer 是一个 PHP
邮箱验证(验证码验证)
巴赫旧约的2012博客
12-17 1471
1.添加包 <!-- 邮箱 --> <dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId> <version>1.4.7</version> </dependency> 2.创建邮件...
SpringBoot 发送邮箱验证码（HTML模板）
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
01-25 3024
在 Java 使用 JavaMailSenderImpl 实现发送 QQ 邮件 中详细的讲述了在普通 Java 项目中如何使用QQ邮箱发送邮件。 在本文中会继续详细的为大家讲解如何在 SpringBoot 中更简单的发送邮件。 导入 Mail 和 Thymeleaf 依赖 <!--mail依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g
向邮箱发送验证码去验证邮箱或者密码等等
whatisthespring的博客
12-06 7431
1.首先向邮箱发送一个验证码，其实向其他邮箱发送一份邮件比较简单，主要是要验证这个验证码 假设邮箱能收到验证 //重新发送激活邮件 Member member = UserConext.getCurrentMember(); if(member == null){ return JsonResultUtil.ge
springboot怎么发送邮箱验证码
最新发布
07-13
在 Spring Boot 中发送邮箱验证码可以通过使用 JavaMailSender 来实现。首先，你需要在 `application.properties` 或 `application.yml` 配置文件中配置邮件服务器的相关信息，如下所示： application.properties: ```properties spring.mail.host=your.mail.server spring.mail.port=your.mail.port spring.mail.username=your.username spring.mail.password=your.password spring.mail.properties.mail.smtp.auth=true spring.mail.properties.mail.smtp.starttls.enable=true ``` application.yml: ```yaml spring: mail: host: your.mail.server port: your.mail.port username: your.username password: your.password properties: mail: smtp: auth: true starttls: enable: true ``` 接下来，你可以创建一个邮件服务类来发送验证邮件，示例如下： ```java import org.springframework.beans.factory.annotation.Autowired; import org.springframework.mail.SimpleMailMessage; import org.springframework.mail.javamail.JavaMailSender; import org.springframework.stereotype.Service; @Service public class EmailService { @Autowired private JavaMailSender javaMailSender; public void sendVerificationCode(String to, String code) { SimpleMailMessage message = new SimpleMailMessage(); message.setTo(to); message.setSubject("验证码"); message.setText("您的验证码是：" + code); javaMailSender.send(message); } } ``` 在上述示例中，`JavaMailSender` 是由 Spring Boot 自动配置的邮件发送器。你可以在需要发送验证码的地方调用 `sendVerificationCode` 方法来发送邮件。 注意：为了使用JavaMailSender，你需要在项目的依赖管理文件（例如 pom.xml）中添加相应的依赖。你可以添加以下依赖来使用 Spring Boot 提供的邮件支持： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mail</artifactId> </dependency> ``` 以上就是使用 Spring Boot 发送邮箱验证码的简单示例。你可以根据自己的实际需求进行调整和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值