js实现手机发送验证码功能

2024-10-05 23:11:55

效果图：

代码如下：

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送验证码倒计时功能</title>
<style>
@charset "utf-8";
*{ margin:0; padding:0; list-style:none}
body{ background:#EBECED; font-family:'微软雅黑'}
.form{width: 450px;height: auto; margin:100px auto; overflow:hidden;font-size: 16px;color: #1b1b1b;text-align: left; padding:50px; border:1px solid #ccc; border-radius:10px;}
.form div{padding:5px 0;overflow: hidden;}
.form label{width: 90px;display: block;float: left;}
.form .infos{width:200px;height: 26px;line-height: 26px;border:1px solid #BFBFBF;padding:2px;border-radius:4px;float: left;}
.form .div-phone a.send1{height: 26px;text-decoration:none;line-height: 26px;padding:2px;width: 80px;background: #AA8926;font-family: '宋体';color: #fff;font-size: 12px;text-align: center;display: block;float: left;border-radius:2px;margin-left:2px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.form .div-phone a.send1:hover{text-decoration: none;background: #866c1b;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-ms-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.form .div-phone a.send0{height: 26px;text-decoration:none;line-height: 26px;padding:2px;width: 80px;background: #A1A1A1;font-family: '宋体';color: #fff;font-size: 12px;text-align: center;display: block;float: left;border-radius:2px;margin-left:2px;}
.form .div-phone a.send0:hover{background: #A1A1A1;font-family: '宋体';color: #fff;font-size: 12px;text-decoration: none;}
.form span.error{height: 26px;line-height: 26px;padding:2px;width: 100px;color: red;padding-left:20px;display: block;float: left;margin-left:10px;font-size: 12px;font-family: '宋体';background: url(../images/error.png) no-repeat left center;}
.form #phone{width: 116px;}
.form .div-conform{padding-right:153px;}
.form .div-conform a.conform{width: 136px;height: 34px;display: block;text-align: left;overflow: hidden;background: url(../images/btn.jpg) no-repeat;float: right;text-indent: -1000px;}
</style>
</head>
<body>
<!--代码部分begin-->
<div class="form">
 <div class="div-name">
 <label for="name">用户名</label><input type="text" id="name" class="infos" placeholder="请输入用户名" />
 </div>
 <div class="div-phone">
 <label for="phone">手机</label><input type="text" id="phone" class="infos" placeholder="请输入手机" />
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="send1" onclick="sends.send();">发送验证码</a>
 </div>
 <div class="div-ranks">
 <label for="ranks">验证码</label><input type="text" id="ranks" class="infos" placeholder="请输入验证码" />
 </div>
 <div class="div-conform">
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="conform" onclick="sends.conform();">提交</a>
 </div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
var sends = {
 checked:1,
 send:function(){
  var numbers = /^1\d{10}$/;
  var val = $('#phone').val().replace(/\s+/g,""); //获取输入手机号码
  if($('.div-phone').find('span').length == 0 && $('.div-phone a').attr('class') == 'send1'){
  if(!numbers.test(val) || val.length ==0){
   $('.div-phone').append('<span class="error">手机格式错误</span>');
   return false;
  }
  }
  if(numbers.test(val)){
  var time = 30;
  $('.div-phone span').remove();
  function timeCountDown(){
   if(time==0){
   clearInterval(timer);
   $('.div-phone a').addClass('send1').removeClass('send0').html("发送验证码");
   sends.checked = 1;
   return true;
   }
   $('.div-phone a').html(time+"S后再次发送");
   time--;
   return false;
   sends.checked = 0;
  }
  $('.div-phone a').addClass('send0').removeClass('send1');
  timeCountDown();
  var timer = setInterval(timeCountDown,1000);
  }
 }
}
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

JS/jQ实现免费获取手机验证码倒计时效果

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面
js验证手机号、密码、短信验证码代码工具类

本文实例为大家分享了js验证手机号.密码.短信验证码的代码工具类,供大家参考,具体内容如下代码工具类 /** * 参数较验 * * */ var verification = { stop : false, //倒计时 //验证手机号 phone : function (tel, id) { if ("" == tel || !tel) { mui.toast('手机号不可以为空!'); } else { var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
Js实现手机发送验证码时按钮延迟操作

实例代码记录: <script type="text/javascript"> function start_sms_button(obj){ var count = 1 ; var sum = 30; var i = setInterval(function(){ if(count > 10){ obj.attr('disabled',false); obj.val('发送验证码'); clearInterval(i); }else{ obj.val('剩余'+pa
JS实现表单验证功能(验证手机号是否存在，验证码倒计时)

废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type
JS设置手机验证码60s等待实现代码

html: <div class="input"> <input class="tel input_all" type="text" name="tel" placeholder="手机号"> </div> <div class="input huoqu"> <input class="yzm input_all"
js实现手机发送验证码功能

效果图: 代码如下: <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>发送验证码倒计时功能</title> <style> @charset "utf-8"; *{ margin:0; paddin
jQuery实现的手机发送验证码倒计时效果代码分享

这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演
使用egg.js实现手机、验证码注册的项目实践

目录手机号注册.验证码校验 app/contrpoller/pass.js mode/user.js router.js 路由配置 service.js 获取验证码 sendmsg.js 发送短信验证码手机号注册.验证码校验 app/contrpoller/pass.js 'use strict'; const Controller = require('egg').Controller; class PassController extends Controller { //登录 a
Java实现短信发送验证码功能

1:新建maven工程 2:开通腾讯云的短信服务功能,添加应用. 3:配置短信签名.短信正文模板,并审核通过(为了方便我就用微信公众号) 4:添加发送短信引用的腾讯云jar包 <dependency> <groupId>com.github.qcloudsms</groupId> <artifactId>qcloudsms</artifactId> <version>1.0.2</version> </depende
Vue简易注册页面+发送验证码功能的实现示例

目录 1. 效果展示 2. 增强版验证码及邮件推送管理(见以后的博客) 3. 大致思路 4. 前期准备 5. 前端代码 6. 后端 1. 效果展示 2. 增强版验证码及邮件推送管理(见以后的博客) 3. 大致思路用户角度分析一下注册时候的步骤: 填写自己的邮箱号点击"发送验证码"按钮邮箱中收到验证码填写其余注册信息并填写验证码注册成功! 系统设计者角度分析一下步骤: 系统随机生成六位数根据用户提供的邮箱号将验证码发送到其邮箱根据用户提供的信息,进行验证码的校验如果校验成
flutter发送验证码功能

一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字按惯例先上图: class MyBody extends StatefulWidget { @override _MyBodyState createState() => _MyBodyState(); } class _MyBodyState extends State<MyBody> { bool isButtonEnable=true; //按钮状态是否可点击 String buttonText='发送验证码'; /
python中使用Celery容联云异步发送验证码功能

目录 1.celery异步消息队列介绍 celery应用举例 Celery有以下优点 Celery 特性 2.工作原理 ***** Celery 扮演生产者和消费者的角色思维导图 3.异步发短信 3.1.settings同级目录下创建 celery 文件 3.2.redis及容联云配置 3.3.配置settings文件 3.4.配置 settings同级目录下 init 文件 3.5.在utils下新建一个task.py文件 3.6.接口中调用 3.7.先启动django项目 1.celery
jquery实现手机发送验证码的倒计时代码

复制代码代码如下: var wait=60;//时间 function time(o,p) {//o为按钮的对象,p为可选,这里是60秒过后,提示文字的改变 if (wait == 0) { o.removeAttr("disabled"); o.val("点击发送验证码");//改变按钮中value的值 p.html("如果您在1分钟内没有收到验证码,请检查您填写的手机号码是否正确或重新发送"); wait = 60; } else { o.
C#实现发送手机验证码功能

之前不怎么了解这个,一直以为做起来很复杂. 直到前两天公司要求要做这个功能. 做了之后才发现这不过就是一个POST请求就能实现的东西.现在给大家分享一下,有不足之处还请多多指教. 废话不多说直接上代码. 1.先获取一个随机数字验证码(这里是6位数),然后编辑好需要发送的内容. 这里还做了个手机号码合法性的验证. public string VerificationCode(string mobile) { if (IsHandset(mobile)) { string code = new

js实现手机发送验证码功能

相关推荐

随机推荐