实现发送验证码功能

article/2025/11/9 5:59:05

 

// 需求一：发送验证码// 用户点击之后，显示05秒后重新获取// 时间到了，自动改为重新获取let code =document.querySelector('.code')code.addEventListener('click', function () {this.innerHTML = `05秒后重新获取`let mark = 5let time = setInterval(function () {mark--code.innerHTML = `0${mark}秒后重新获取`if (mark === 0) {clearInterval(time)code.innerHTML = `重新获取`}}, 1000)})

<head><meta charset="UTF-8"><title>注册页面</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><!--<link rel="shortcut icon" href="./favicon.ico">--><link rel="stylesheet" href="./common.css"><link rel="stylesheet" href="./register.css"><link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body><!-- 项部导航 --><div class="xtx_topnav"><div class="wrapper"><!-- 顶部导航 --><ul class="xtx_navs"><li><a href="./login.html">请先登录</a></li><li><a href="./register.html">免费注册</a></li><li><a href="./center-order.html">我的订单</a></li><li><a href="./center.html">会员中心</a></li><li><a href="javascript:;">帮助中心</a></li><li><a href="javascript:;">在线客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i> 手机版</a></li></ul></div></div><!-- 头部 --><div class="xtx_header"><div class="wrapper"><!-- 网站Logo --><h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1><!-- 主导航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="./index.html">首页</a></li><li><a href="./category01.html">生鲜</a></li><li><a href="./category01.html">美食</a></li><li><a href="./category01.html">餐厨</a></li><li><a href="./category01.html">电器</a></li><li><a href="./category01.html">居家</a></li><li><a href="./category01.html">洗护</a></li><li><a href="./category01.html">孕婴</a></li><li><a href="./category01.html">服装</a></li></ul></div><!-- 站内搜索 --><div class="xtx_search clearfix"><!-- 购物车 --><a href="./cart-none.html" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜" onclick="location.href='./search.html'"></div></div></div></div><div class="xtx-wrapper"><div class="container"><!-- 卡片 --><div class="xtx-card"><h3>新用户注册</h3><form class="xtx-form"><div data-prop="username" class="xtx-form-item"><span class="iconfont icon-zhanghao"></span><input name="username" type="text" placeholder="设置用户名称"><span class="msg"></span></div><div data-prop="phone" class="xtx-form-item"><span class="iconfont icon-shouji"></span><input name="phone" type="text" placeholder="输入手机号码  "><span class="msg"></span></div><div data-prop="code" class="xtx-form-item"><span class="iconfont icon-zhibiaozhushibiaozhu"></span><input name="code" type="text" placeholder="短信验证码"><span class="msg"></span><a class="code" href="javascript:;">发送验证码</a></div><div data-prop="password" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合"><span class="msg"></span></div><div data-prop="confirm" class="xtx-form-item"><span class="iconfont icon-suo"></span><input name="confirm" type="password" placeholder="请再次输入上面密码"><span class="msg"></span></div><div class="xtx-form-item pl50"><i class="iconfont icon-queren"></i> 已阅读并同意<i>《用户服务协议》</i></div><div class="xtx-form-item"><button class="submit">下一步</button><!-- <a class="submit" href="javascript:;">下一步</a> --></div></form></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 联系我们 --><div class="contact clearfix"><dl><dt>客户服务</dt><dd class="chat">在线客服</dd><dd class="feedback">问题反馈</dd></dl><dl><dt>关注我们</dt><dd class="weixin">公众号</dd><dd class="weibo">微博</dd></dl><dl><dt>下载APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>扫描二维码</span><span>立马下载APP</span><a href="javascript:;">下载页面</a></dd></dl><dl><dt>服务热线</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口号 --><div class="slogan"><a href="javascript:;" class="price">价格亲民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品质新鲜</a></div><!-- 版权信息 --><div class="copyright"><p><a href="javascript:;">关于我们</a><a href="javascript:;">帮助中心</a><a href="javascript:;">售后服务</a><a href="javascript:;">配送与验收</a><a href="javascript:;">商务合作</a><a href="javascript:;">搜索推荐</a><a href="javascript:;">友情链接</a></p><p>CopyRight &copy; 小兔鲜儿</p></div></div></div></div><script>// 需求一：发送验证码// 用户点击之后，显示05秒后重新获取// 时间到了，自动改为重新获取let code =document.querySelector('.code')code.addEventListener('click', function () {this.innerHTML = `05秒后重新获取`let mark = 5let time = setInterval(function () {mark--code.innerHTML = `0${mark}秒后重新获取`if (mark === 0) {clearInterval(time)code.innerHTML = `重新获取`}}, 1000)})// 需求二：用户名验证 自定义封装函数// 正则 /^[a-zA-Z0-9-_]{6,10}$/// 如果不符合要求，则出现提示信息 并 return false// 否则 则返回return true// 之所以返回布尔值，是为了最后的提交按钮做准备// [name=username]  css 属性选择器// 需求三：手机号验证// 正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/// 需求四：验证码验证// 正则 /^\d{6}$/// 需求五： 密码验证// 正则 /^[a-zA-Z0-9-_]{6,20}$/// 需求六：再次密码验证// 如果本次密码不等于上面输入的密码则返回错误信息// 需求七：我同意模块// 切换类  .icon-queren2  则是默认选中样式// 需求八：提交按钮模块// 使用 submit 提交事件// 如果上面的每个模块，返回的是 false 则 阻止提交// 如果没有勾选同意协议，则提示  需要勾选// 在提交之前先验证</script>
</body>
</html>

运行结果：

 


http://chatgpt.dhexx.cn/article/qCl5ylwe.shtml

相关文章

发送验证码倒计时

发送验证码倒计时

点击发送验证码按钮的时候 会调用ajax请求发送验证码 但是 如果没有设置倒计时 如果一直重复点击按钮的话 会一直请求发送验证码 所以我们要设置一个验证码倒计时 <input id"sendCodeId" type"button" class"btn btn-danger" click"sen…
阅读更多...
微信小程序发送验证码

微信小程序发送验证码

记录一下&#xff0c;小程序发送验证码的小案例。废话不多说&#xff0c;直接撸代码。。。 1、效果图如下 wxml: <view classheader> <input typenumber placeholder请输入手机号 bindinputmInput></input> </view> <view classnav> <v…
阅读更多...
Javascript发送验证码

Javascript发送验证码

一、请求原理 由于现在网站的都有手机登陆或注册&#xff0c;向制定地址发送一个post活get请求&#xff0c;那么我们利用这一思路&#xff0c;就可以在本地上利用Ajax来模拟网站的登陆注册操作&#xff0c;从而实现向发送验证码。 二、获取第三方网站验证码接口 随便找一个带验…
阅读更多...
简析发送手机验证码原理

简析发送手机验证码原理

文章目录 发放手机验证码手机验证码校验小结 在一般互联网网站&#xff08;如淘宝、京东等&#xff09;注册账号或者找回密码时通常让用户进行手机号码进行 发送验证码验证&#xff0c;这种方式能有效的保证帐号安全&#xff0c;下面来解析一下它的原理。 整体流程如下图如示&…
阅读更多...
App接口测试总结

App接口测试总结

使用工具 Fiddler、Jmeter 测试步骤&#xff1a; 1. 确认接口 从开发人员那里获取接口文档&#xff0c;接口文档应该包括完整的功能接口、接口请求方式、接口请求URL、接口请求参数、接口返回参数。 如果当前项目没有接口文档&#xff0c;则可以使用fiddler对APP进行抓包确认…
阅读更多...
Xilinx DDR3 —— MIG IP核的原理（APP接口）

Xilinx DDR3 —— MIG IP核的原理（APP接口）

DDR3 SDRAM&#xff08;Double-Data-Rate Three Synchronous Dynamic Random Access Memory&#xff09;是 DDR SDRAM的第三代产品&#xff0c;DDR SDRAM 的最大特点是双沿触发&#xff0c;即在时钟的上升沿和下降沿都能进行数据采集和发送&#xff0c;同样的工作时钟&#xff…
阅读更多...
APP接口设计规范

APP接口设计规范

APP接口设计规范 效率安全版本兼容性面向对象设计数据格式Json服务端的异常处理https协议 1.效率 APP对服务器端要求是比较严格的&#xff0c;在移动端有限的带宽条件下&#xff0c;要求接口响应速度要快&#xff0c;所有在开发过程中尽量选择效率高的框架&#xff0c;对数据…
阅读更多...
TP6+JWT开发APP接口

TP6+JWT开发APP接口

1. 开发环境 PHP框架: ThinkPHP6操作系统: MacOsWeb服务器: Nginx 2. APP接口 2.1. 简介 客户端与服务端进行数据交互的通道, 大部分APP接口都是通过HTTP协议通信的 2.2. HTTP通信的三要素 URL 通信地址Method 通信方式(GET|POST|PUT|DELETE)Params 通信的内容 2.3 APP接…
阅读更多...
快速开发一个混合APP（Hybrid APP）

快速开发一个混合APP（Hybrid APP）

混合开发APP&#xff08;Hybrid APP&#xff09;简单说就是将原生功能封装成JS接口&#xff0c;前端通过调用接口实现功能。前端使用html来开发APP&#xff0c;可以实现自动更新&#xff0c;一套代码同时生成Android和iOS两端安装包&#xff0c;开发速度快&#xff0c;用户体验…
阅读更多...
Hybrid App开发 四大主流平台

Hybrid App开发 四大主流平台

Hybrid App在过去的两年中已经成为移动界的核心话题&#xff0c;但是作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢&#xff1f;是选择学习原生开发&#xff0c;研究Java、 Object-C、C#等语言&#xff0c;还是选择继续使用网页开发&#xff0c;容忍HTML5功能的局限性…
阅读更多...
whatsapp协议api接口

whatsapp协议api接口

测试demo&#xff1a;http://39.109.122.117:8081/login Whatsappapi 一、登录注册 登录 发送验证码 效验短信验证码 查询是否封号 获取版本号 查询是否封号&#xff08;商业版&#xff09; 发送验证码&#xff08;商业版&#xff09; 效验短信验证码&#xff08;商业…
阅读更多...
第一次做APP接口开发过程总结

第一次做APP接口开发过程总结

关于平湖人社APP后台开发总结APP后台接口开发我总结出以下几个部分: 需求分析与整理分析业务需求涉及的模块功能与数据库关联表接口开发文档大致编写并提交产品与APP开发人员 1.主要是webservise 地址:http://XXXX/services/SbcxWebservice?wsdl2.接口函数统一为 sbp_sbcx_XXX…
阅读更多...
做APP接口开发过程总结

做APP接口开发过程总结

关于平湖人社APP后台开发总结 APP后台接口开发我总结出以下几个部分: 需求分析与整理 分析业务需求涉及的模块功能与数据库关联表 接口开发文档大致编写并提交产品与APP开发人员 1.主要是webservise 地址:http://XXXX/services/SbcxWebservice?wsdl 2.接口函数统一为 sbp_sbcx…
阅读更多...
java性能优化案例——面试可能用得到

java性能优化案例——面试可能用得到

一、背景 1.1 业务背景 支付宝卡包存放着用户的会员卡和优惠券。无论是卡券cell&#xff0c;还是卡券详情&#xff0c;都是通过静态模板配置加上动态可变数据&#xff0c;最终呈现给终端用户的。 下面【图1】展现了卡券数据在C端用户的展现形式&#xff0c;【图2】表示了C端…
阅读更多...
Java性能优化可算是讲明白了，优化权威指南就是强

Java性能优化可算是讲明白了，优化权威指南就是强

在JAVA程序中&#xff0c;性能问题的大部分原因并不在于JAVA语言&#xff0c;而是程序本身。养成良好的编码习惯非常重要&#xff0c;能够显著地提升程序性能。 Java是目前软件开发领域中使用最广泛的编程语言之一。Java应用程序在许多垂直领域&#xff08;银行、电信、医疗保…
阅读更多...
面试官：关于Java性能优化，你有什么技巧

面试官：关于Java性能优化，你有什么技巧

通过使用一些辅助性工具来找到程序中的瓶颈&#xff0c;然后就可以对瓶颈部分的代码进行优化。 一般有两种方案&#xff1a;即优化代码或更改设计方法。我们一般会选择后者&#xff0c;因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能。而一个设计良好的程序能…
阅读更多...
JAVA性能优化思路探究，让程序超顺畅

JAVA性能优化思路探究，让程序超顺畅

1、背景介绍 一个系统的上线除了常规的功能性测试外&#xff0c;还需要经过严格的性能测试&#xff0c;满足预期的性能指标&#xff08;常见的有响应时间&#xff0c;tps等&#xff09;&#xff0c;才允许上生产环境。 广义的性能测试一般还包含负载测试&#xff08;用于测试…
阅读更多...
Java接口性能优化实例

Java接口性能优化实例

Java接口性能优化实例 文章目录 Java接口性能优化实例概述用到的工具和环境工具环境 找瓶颈启示和收获 概述 最近公司的下单接口有些慢&#xff0c;老板担心无法支撑双11&#xff0c;想让我优化一把&#xff0c;但是前提是不允许大改&#xff0c;因为下单接口太复杂了&#xf…
阅读更多...
JAVA程序性能优化

JAVA程序性能优化

制约程序性能的根源 常用的性能评估指标 并发&#xff1a;同一时间多少请求访问&#xff1a;如同一时间10个用户请求&#xff0c;并发就是10TPS&#xff1a;transaction per second&#xff1a;相当于写操作QPS&#xff1a;query per second&#xff1a;相当于读请求&#xf…
阅读更多...
Java性能优化的35个细节（珍藏版）

Java性能优化的35个细节（珍藏版）

代码优化&#xff0c;一个很重要的课题。可能有些人觉得没用&#xff0c;一些细小的地方有什么好修改的&#xff0c;改与不改对于代码的运行效率有什么影响呢&#xff1f;这个问题我是这么考虑的&#xff0c;就像大海里面的鲸鱼一样&#xff0c;它吃一条小虾米有用吗&#xff1…
阅读更多...
推荐文章

Copyright @ 2022~2023