>

jQuery达成出殡和埋葬验证码并60秒倒计时成效,验

- 编辑:www.bifa688.com -

jQuery达成出殡和埋葬验证码并60秒倒计时成效,验

如下所示:

正文给大家享用一段js代码关于贯彻验证码成效并在60秒后倒计时成效。废话十分的少说了,具体代码如下所示:

废话相当少说平素上代码

()这里用的是input做的点击发送验证码
<input type="number" class="input" name="mobile" placeholder="手机号" style="border: none"

<input class="hui_kuang"style="width: 30%;text-align: center;height: 42px"onclick="setTime(this)" value='获取验证码'>
<script>
  
//页面初始化获取倒计时数字(避免在倒计时时用户刷新浏览器导致倒计时归零)
 var $getCodeInput = $(".hui_kuang");
 var sessionCountdown = sessionStorage.getItem("countdown");
 if (!sessionCountdown) {
  $(".hui_kuang").val("获取验证码")
 } else {
  $(".hui_kuang").val("重新发送("   sessionCountdown   ")");
  setCode($getCodeInput, sessionCountdown);
 }
 //获取验证码
 function setTime() {
  var remobile = $("#registForm input[name='mobile']").val();
  if (!remobile) {
   alert("请输入手机号码")
   return;

  }
  if (!(/^1[3|4|5|8][0-9]d{4,8}$/.test(remobile))) {
   alert("请输入有效的手机号码")
   return;
  } else {
   setCode($getCodeInput, 60);
  }

 }
 //发送验证码倒计时
 function setCode($getCodeInput, countdown) {
  if (countdown == 0) {
   $getCodeInput.attr('disabled', false);
//   $getCodeInput.removeAttribute("disabled");
   $getCodeInput.val("获取验证码");
   sessionStorage.removeItem("countdown");
   return;
  } else {
   $getCodeInput.attr('disabled', true);
   $getCodeInput.val("重新发送("   countdown   ")");
   countdown--;
  }
  sessionStorage.setItem("countdown", countdown);
  window.setTimeout(function () {
   setCode($getCodeInput, countdown);
  }, 1000);
 }
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
<title></title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
var countdown=60; 
function settime(obj) { 
if (countdown == 0) { 
obj.removeAttribute("disabled"); 
obj.value="免费获取验证码"; 
countdown = 60; 
return;
} else { 
obj.setAttribute("disabled", true); 
obj.value="重新发送("   countdown   ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(obj) }
,1000) 
}
</script>
<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
</body>
</html>

html代码:

上述这篇手提式有线电话机挂号发送验证码倒计时的简单实例正是笔者分享给大家的全部内容了,希望能给大家叁个参照,也目的在于我们多多支持脚本之家。

如上所述是笔者给我们介绍的jQuery完毕出殡和埋葬验证码并60秒倒计时功能,希望对我们持有协助,即便我们有任何疑问请给自身留言,作者会及时复苏大家的。在此也极其多谢大家对台本之家网站的支撑!

<form method="post" id="form_hroizon" enctype="multipart/form-data" action="/">
<input type="hidden" name="phoneTemplet" id="phoneTemplet">
<input type="hidden" name="regType" id="regType">
<div class="c-login-input">
<div class="form-group">
<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">手机号</label>
<div class="pull-left">
<input type="tel" autocomplete="off" class="input-control put-width440 j-telphone" id="inputtel" name="phones" placeholder="请输入您的电话号码" value="">

<div class="c-login-errtips" style="display:none;"></div>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">登录密码</label>
<div class="pull-left">
<input type="password" class="input-control put-width440 fistpwd" id="inputpwd" name="password" placeholder="请输入密码" value="">

</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="label-control label-width120 pull-left t-r-f f16">验证码</label>
<div class="pull-left">
<input type="tel" class="input-control put-with100 vericode" id="inputEmail3" name="code" placeholder="请输入验证码">
<input id="btnSendCode" type="button" value="免费获取验证码" class="j-getcode f12 b-i-k btn code-btn c-p" />

</div>
</div>
</div>
<div class="form-group">
<a class="j-sends" type="submit" name="submit" target="_self" href="javascript:void(0)">注册</a>
</div>
</form>

你只怕感兴趣的著作:

  • JS完毕用户注册时收获短信验证码和倒计时功能
  • JS/jQ完毕无需付费得到手提式有线电话机验证码倒计时效果
  • jQuery实现的手提式有线电话机发送验证码倒计时效果代码分享
  • jquery完结手提式有线电话机发送验证码的倒计时期码
  • js达成发送验证码后的倒计时效用

您也许感兴趣的小说:

  • React-Native中利用验证码倒计时的按键实例代码
  • jQuery达成倒计时重新发送短信验证码功效示例
  • JS完毕用户注册时收获短信验证码和倒计时功用
  • JS完毕表单验证成效(验证手提式有线电话机号是或不是存在,验证码倒计时)
  • JS/jQ达成免费得到手提式有线电话机验证码倒计时效果
  • Android账号注册落成点击获取验证码倒计时效果
  • IOS达成验证码倒计时作用(2)
  • jquery达成手提式有线话机发送验证码的倒计时期码
  • JS达成验证码倒计时的注册页面

JS代码:

<script type="text/javascript">
$(function(){
$(".j-sends").click(function(){
var phones = $.trim($(".j-telphone").val());
var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})) d{8})$/;
if(!phones){
$('.tel-msg').text('请输入手机号码,不能为空');
return false;
}else if (!isMobile.test(phones)) {
$('.tel-msg').text('请输入有效的手机号码');
return false;
}else{
//手机号码是否存在
$.ajax({
url : "/", //
type:"post",
dataType:"JSON",
data:{
phones: phones,
}, 
contentType:'application/json;charset=UTF-8', 
//async: false,
success:function(data){
if (data.flag == "1") { //
$('.tel-msg').html(data.errorInfo); //
return false;
}else{
$('.tel-msg').html(data.errorInfo); //可
}
},
error:function(){
}
}); 
}
})
//验证码倒计时 
var InterValObj; //timer变量,控制时间 
var count = 30; //间隔函数,1秒执行 
var curCount;//当前剩余秒数 
var code = ""; //验证码 
var regType;
var phoneTemplet;
var codeLength = 4;//验证码长度 
$(".code-btn").click(function(){
curCount = count; 
var phone=$.trim($(".j-telphone").val());//手机号码 
var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})) d{8})$/;
var jtel = $(".j-telphone");
if(phone != "" && isMobile.test(phone) && phone.length==11){ 
//设置button效果,开始计时 
$("#btnSendCode").attr("disabled", "true"); 
$("#btnSendCode").val("请在"   curCount   "秒内输入验证码"); 
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次 
//产生验证码 
for (var i = 0; i < codeLength; i  ) { 
code  = parseInt(Math.random() * 9).toString(); 
} 
//向后台获验证码 
$.ajax({ 
url : base   "/", 
type: "POST",
// dataType: "text", 
// data: "phones="   phone   "&code="   code, 
dataType: "JSON",
data:{
phones:phone,
code: code,
regType:"1",
phoneTemplet:"phone_uc"
},
success: function (data){
if(data.flag=="F"){
$(".code-msg").html(data.errorInfo); 
}else{
$(".code-msg").html(data.errorInfo);
}
} 
}); 
}else{ 
$('.tel-msg').text('请输入有效的手机号码'); 
} 
});
//timer处理函数 
function SetRemainTime() { 
if (curCount == 0) { 
window.clearInterval(InterValObj);//停止计时器 
$("#btnSendCode").removeAttr("disabled");//启用按钮 
$("#btnSendCode").val("重新发送验证码"); 
code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 
} 
else { 
curCount--; 
$("#btnSendCode").val("请在"   curCount   "秒内输入验证码"); 
} 
} 
})
</script>

上述所述是笔者给我们介绍的JS完结表单验证成效(验证手提式有线电话机号是还是不是存在,验证码倒计时),希望对大家有着辅助,若是大家有此外疑问请给自身留言,小编会及时回复大家的。在此也极其多谢我们对台本之家网址的支撑!

你只怕感兴趣的稿子:

  • React-Native中运用验证码倒计时的按键实例代码
  • jQuery达成倒计时重新发送短信验证码效率示例
  • jQuery完毕发送验证码并60秒倒计时功效
  • JS完成用户注册时获得短信验证码和倒计时功用
  • JS/jQ达成免费获取手提式有线电话机验证码倒计时效果
  • Android账号注册达成点击获取验证码倒计时效果
  • IOS达成验证码倒计时功用(二)
  • jquery达成手提式有线电话机发送验证码的倒计时期码
  • JS完结验证码倒计时的挂号页面

本文由必发88官网发布,转载请注明来源:jQuery达成出殡和埋葬验证码并60秒倒计时成效,验