来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

jQuery实现的手机发送验证码倒计时效果代码分享

那是一款基于jquery完毕的手提式有线电话机发送验证码倒计时效果代码,可实现实时呈现秒数倒计时的效果与利益,还可达成敌手提式有线电话机号码格式验证的效果与利益,是一款常用的网址注册发送手提式有线电话机验证码特效代码。

效果图:

效果与利益描述: 挂号叁个网址,当须求发送验证码到手机上的时候,我们平日遭遇这么的成效:
先是检验手提式有线电话机是不是吻合1开头,九人数字的格式;
若不吻合,则提醒错误消息并赶回false;
不然提交给后台,后台分明接收后回到贰个值,发送开关变为孔雀绿并倒计时。

图片 1

运作效果:

代码如下:

图片 2

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 #code{
 width:80px;
 height:30px;
 font-size:20px;
 font-family:Arial; 
 font-style:italic; 
 font-weight:bold; 
 border:0; 
 letter-spacing:2px; 
 color:blue; 
 }
 </style>
 </head>
 <body>
<div> 
 <input type = "text" id = "input"/> 
 <input type = "button" id="code" /> 
 <input type = "button" value = "验证" id="check"/> 
   </div> 
 <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
  function change(){
    code=$("#code");
  // 验证码组成库
   var arrays=new Array( 
       '1','2','3','4','5','6','7','8','9','0',
       'a','b','c','d','e','f','g','h','i','j', 
       'k','l','m','n','o','p','q','r','s','t', 
       'u','v','w','x','y','z', 
       'A','B','C','D','E','F','G','H','I','J', 
       'K','L','M','N','O','P','Q','R','S','T', 
       'U','V','W','X','Y','Z'        
       ); 
    codes='';// 重新初始化验证码
   for(var i = 0; i<4; i++){
   // 随机获取一个数组的下标
   var r = parseInt(Math.random()*arrays.length);
   codes += arrays[r];
  }
  // 验证码添加到input里
     code.val(codes);
  }
  change();
 code.click(change);
 //单击验证
  $("#check").click(function(){
   var inputCode = $("#input").val().toUpperCase(); //取得输入的验证码并转化为大写 
   console.log(inputCode);
  if(inputCode.length == 0) { //若输入的验证码长度为0
   alert("请输入验证码!"); //则弹出请输入验证码
  }    
  else if(inputCode!=codes.toUpperCase()) { //若输入的验证码与产生的验证码不一致时
   alert("验证码输入错误!请重新输入"); //则弹出验证码输入错误
   change();//刷新验证码
   $("#input").val("");//清空文本框
  }else { //输入正确时
   alert("正确"); //弹出^-^
  } 
  });
</script>
 </body>
</html>

--------------------------------意义务演出示 源码下载--------------------------------

如上正是本文的全体内容,希望本文的剧情对大家的学习大概干活能拉动一定的帮忙,同有的时候候也指望多多帮衬脚本之家!

为咱们享受的jQuery实现的无绳电话机发送验证码倒计时效果代码如下

您可能感兴趣的稿子:

  • JQuery实现简单验证码提醒实施方案
  • jquery实现手提式有线话机发送验证码的倒计时期码
  • Jquery插件完毕点击获取验证码后60秒内禁止重新获得
  • jQuery插件完成静态HTML验证码校验
  • jQuery达成的手提式有线话机发送验证码倒计时效果代码分享
  • PHP+jQuery 注册模块的精耕细作(一):验证码存入SESSION
  • jquery实现无刷新验证码的简短实例
  • jquery禁止输入数字以外的字符的身体力行(纯数字验证码)
  • jQuery点击输入框呈现验证码图片
  • 基于jQuery完成出殡和埋葬短信验证码后的倒计时成效(无视页面关闭)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery手机发送验证码倒计时代码</title>
<link href="css/jb51.css" type="text/css" rel="stylesheet" />
</head>
<body>
<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:;" 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:;" class="conform" onclick="sends.conform();">提交</a>
 </div>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var sends = {
 checked:1,
 send:function(){
  var numbers = /^1d{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('手机格式错误');
   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>

上述便是为大家分享的jquery达成的无绳电话机发送验证码倒计时效果代码,希望我们能够欣赏。

你或然感兴趣的篇章:

  • JQuery完毕简单验证码提示实施方案
  • jquery实现手提式有线电话机发送验证码的倒计时代码
  • Jquery插件完成点击获取验证码后60秒内不准重新赢得
  • jQuery插件完毕静态HTML验证码校验
  • PHP+jQuery 注册模块的精雕细琢(一):验证码存入SESSION
  • jquery实现无刷新验证码的简便实例
  • jquery禁止输入数字以外的字符的事必躬亲(纯数字验证码)
  • jQuery点击输入框展现验证码图片
  • 基于jQuery完成出殡和埋葬短信验证码后的倒计时作用(无视页面关闭)
  • jQuery完成验证码效能

本文由六合联盟网发布于系统操作,转载请注明出处:jQuery实现的手机发送验证码倒计时效果代码分享

关键词: