邮箱验证前端

最新推荐文章于 2024-03-17 23:19:29 发布
最新推荐文章于 2024-03-17 23:19:29 发布
阅读量1.4k 收藏 4
点赞数
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45407302/article/details/123938404
版权

邮箱验证前端代码（带定时器）

<!DOCTYPE html>
<html  >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户忘记密码</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <!-- Google fonts - Popppins for copy-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,800">
    <!-- orion icons-->
    <link rel="stylesheet" href="/css/orionicons.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/img/favicon.png?3">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<!-- navbar-->

<div class="d-flex align-items-stretch">

    <div class="page-holder w-100 d-flex flex-wrap">
        <div class="container-fluid px-xl-5">
            <section class="py-5">
                <div class="row">
                    <!-- Basic Form-->
                    <div class="col-lg-8 mb-5" style="margin:50px auto">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="h6 text-uppercase mb-0">Send Email</h3>
                            </div>
                            <div class="card-body">

                                <form action="/forgetPasswordChange" method="post">
                                    <div class="form-group">
                                        <div>
                                            <label class="form-control-label text-uppercase">邮箱</label>
                                        </div>
                                        <input type="text" id="email" placeholder="Email" class="form-control" style="width: 80%;display: inline-block">
                                        <button type="button" class="btn btn-primary" id="sendbtn"  onclick="send()" style="width: 19%" >发送验证码</button>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-control-label text-uppercase">验证码</label>
                                        <input  type="text" id="code" placeholder="Code"  class="form-control">
                                    </div>

                                    <div class="form-group" >
                                        <button type="submit" class="btn btn-primary" style="margin-left: 250px">确认</button>

                                        <button type="button" id="exit" onclick="exitpwd()" class="btn btn-secondary" style="margin-left: 280px">返回</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </section>
        </div>

    </div>
</div>
<!-- JavaScript files-->
<script src="/vendor/jquery/jquery.min.js"></script>
<script src="/vendor/popper.js/umd/popper.min.js"> </script>
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="/vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="/vendor/chart.js/Chart.min.js"></script>
<script src="/js/js.cookie.min.js"></script>
<script src="/js/front.js"></script>
<script>
    anxia = false;
    miao = 60;
    var ding;
    var yan = document.getElementById("sendbtn");
    function send() {
        var email = document.getElementById("email").value;
        if (!anxia) {
            anxia = true;
            ding=setInterval(jian, 1000);

        } else {
            yan.disabled = true;
        }


        /*$.ajax({
            url:"/sendEmail" , // 请求路径
            type:"POST" , //请求方式

            data:{"email":email},
            success:function (data) {
               document.log("成功")
            },//响应成功后的回调函数
            dataType:"json"//设置接受到的响应数据的格式
        });
*/


    }

    function jian() {
        //alert(miao);
        if(miao>0){
            yan.innerText = (miao--) + "秒后再获取";
        }else{
            miao=60;
            clearInterval(ding);
            yan.innerText ="重新获取";
            yan.disabled = false;
            anxia = false;


        }

    }
</script>
</body>
</html>

这里需要引入bootstrap，页面才好看。效果如下：
在这里插入图片描述
点击之后的：
在这里插入图片描述
等60秒后的：
在这里插入图片描述

Harris_7
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年前端开发：使用JS正则表达式校验邮箱和手机号的方法，程序员的中年危机
2401_84437982的博客
05-06 955
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。最后[外链图片转存中…(img-EswpQz67-1714978178364)][外链图片转存中…(img-wlpjsidd-1714978178365)]资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。↩︎。
xmljava系统源码-myEmail:自己创建的小型邮件收发系统
06-06
xml java系统源码 邮件系统   该系统可以进行简单的收发邮件以及查看详情。   运行在Tomcat8.0之上。 pom.xml中有该系统需要依赖的包，tomcat中的servlet-api包需要自己添加。 src中的java为java代码，为本系统后台代码。 src中的resources中文件为资源文件。 src中的webapp下为前端相关代码。 成果展示 登录界面 登录后展示收信箱 进行发送邮件，向我的QQ邮箱发送邮件 QQ邮箱收信结果如下 发信箱进行更新，并查看详情 使用QQ邮箱对本系统发送邮件 前端收到邮件，响应 查看收信箱，出现最新邮箱 查看详情 在个人中心修改个人资料，修改昵称 修改成功后，右上角用户昵称也进行修改 本系统后端使用Spring、Spring MVC、Mybatis。 数据库使用mysql，数据库名为email，数据库表在webapp/sql中。 查看详情由于我修改了tomcat端口为18080，所以需要在代码中将修改发信箱和收信箱查看详情的地址。 发信使用SMTP协议、收信使用POP3协议。 发信和收信分别使用的是新浪的STMP服务器和POP服务器，需
前端邮箱模版开发实现
qq_36262295的博客
12-03 1442
html邮箱模版
正则表达式校验邮箱
热门推荐
m0_54829066的博客
12-21 1万+
但是，这个正则表达式并不能保证一定能够匹配所有有效的邮箱地址，因为邮箱地址的规则可能会发生变化，所以应该尽量确保正则表达式尽可能全面。正则表达式是一种用于匹配字符串的模式的工具，它可以用于验证邮箱地址的有效性。
前端开发：使用JS正则表达式校验邮箱和手机号的方法
最新发布
m0_60666921的博客
03-17 2608
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等，需要这些文档资料的，直接点击我的GitHub免费领取~[外链图片转存中…(img-1TWT0qO8-1710688758454)][外链图片转存中…(img-3nNLpm9G-1710688758454)]
【验证码】实现前端安全验证字符验证码api
qq_48896417的博客
02-26 654
一款免费的前端字符验证码API,该api是直接可用的,可自定义配置的.
注册邮箱验证
07-09
总的来说，注册邮箱验证是确保用户账户安全和提升用户体验的重要手段，它涉及到多个技术层面，包括前端交互、后端逻辑、数据库管理和网络安全。理解和掌握这个过程对于开发高效、安全的用户注册系统至关重要。
JS非空验证及邮箱验证的实例
10-19
下面小编就为大家带来一篇JS非空验证及邮箱验证的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前端js验证
11-14
- **格式验证**：如邮箱、电话号码、URL等特定格式的输入，通常使用正则表达式进行匹配。 - **数字验证**：检查输入是否为数字，以及数字的范围限制。 - **日期验证**：确保输入的日期格式正确且在有效范围内。 ...
user_reg.rar_邮箱验证
09-21
在这个"用户_reg.rar_邮箱验证"的压缩包中，我们可以推测它包含了一个用户注册系统的源代码，该系统特别强调了邮箱验证和用户界面的交互性。接下来，我们将深入探讨这两个关键知识点。 首先，**邮箱验证**是用户...
js 前端好用的验证方式
05-06
3. 数据类型验证：比如检查是否为数字、邮箱等，可以使用正则表达式，如`/^\d+$/.test(input.value)`。 二、验证码验证 验证码主要用于防止机器自动操作，常见的有图片验证码、短信验证码等。纯前端的图片验证码...
仿邮箱HTML页面,很详细的信息
09-16
仿邮箱HTML,页面很详细的信息,有文件信息与设置信息
前端邮箱校验
qq_42708127的博客
04-07 1933
var checkEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; checkEmail.test...
Web前端_邮箱的正则表达式
IT-小猩猩
11-19 6418
最正宗的邮箱正则表达式^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$js中代码：<script type="text/javascript"> fChkMail=function(szMail){ var szReg=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])
邮箱、帐号、手机号和电话的javascript正则表达式验证方法
查查的前端空间
03-16 4129
邮箱验证：其格式为part1@part2（part1部分由字母、数字、下划线、短线“-”、点号“.”组成；part2部分由字母、数字、短线“-”、域名后缀组成，域名后缀一般为.xxx或.xxx.xx，一区的域名后缀一般为2-4位，如cn,com,net，现在域名有的也会大于4位） function ismail(obj){ var reg=/^(\w-*\.*)+@(\w-?)+(\
表单验证-邮箱验证
小石头
09-03 4275
表单验证-邮箱验证
web前端 Javascript实现邮箱的简单验证
weixin_30782293的博客
01-22 797
我们这里对输入的字符串先设定邮箱的验证规则，一个比较弱的验证规则：它需要包含“@”、“.”符号，并且“@”符号之前必须要有至少1个字符，“@”和“.”也必须有至少1个字符，“.”后面至少有2个字符。如果验证错误，在后面输出红色的错误提示；如果验证正确，输出绿色的正确提示。代码实现如下： <!DOCTYPE html> <meta http-equiv="Content-Ty...
如何实现邮箱发送验证以及前端校验
灰色的小熊的博客
03-29 5779
大家好，今天来写一如何实现前端检验，定时60s后重新发送邮箱实现邮箱发送功能需求分析：1.当我们发送邮箱时，必须填入指定格式的邮箱地址，不然无法实现邮箱发送2.当我们传入为null或者是“”也无法发送邮箱服务，并且会导致后台报错(原因是controller调用方法时没有参数的传递导致的)3.当地址写入正确，发送邮箱验证后，返回邮箱发送成功SUCCESS4.如果发送无法接受邮箱，60s后重新发送邮箱...
vue element 表单验证 邮箱验证
u013361179的博客
08-21 4303
vue element 表单验证 邮箱验证
avue 前端邮箱验证
06-01
Avue 前端提供了邮箱验证功能，可以通过以下步骤实现： 1. 引入 Avue 组件库 ```javascript import Vue from 'vue' import Avue from '@smallwei/avue' import '@smallwei/avue/lib/index.css' Vue.use(Avue) ``` 2. 在表单中使用 avue-input 组件，并设置 type 为 email ```html <avue-input label="邮箱" prop="email" :rule="{type: 'email', message: '请输入正确的邮箱格式'}"> </avue-input> ``` 这样就可以在表单中实现邮箱验证了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值