证实手提式有线电话机号是不是留存,jQuery实现发送验证码并60秒倒计时功用

在用户注册时,平日须求短信验证码,而且为了互相功能,也须求扩展倒计时。

废话非常的少说一贯上代码

本文给大家大饱眼福一段js代码关于落成验证码效率并在60秒后倒计时作用。废话相当的少说了,具体代码如下所示:

复制代码 代码如下:

效果与利益如下:

html代码:

<!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>

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.attr(“disabled”, true);//倒计时进度中禁止点击按键
o.val(wait + “秒后重新获得验证码”);//改换按键中value的值
wait–;
setTimeout(function() {
time(o,p);//循环调用
},
1000)
}
}

澳门葡京 1

<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>

如上所述是笔者给大家介绍的jQuery完成发送验证码并60秒倒计时功效,希望对我们有所扶助,如若大家有别的疑问请给本身留言,小编会及时过来大家的。在此也非常感激我们对剧本之家网址的帮助!

视图:

<div class="user-form">
<form action="{{ path('zm_member_register') }}" method="post">
<div class="form-list">
<label class="register-label">手机号码</label>
<input class="regphone input-register" type="text" name="phone" placeholder="请输入手机号码" />
</div>
<div class="form-list">
<label class="register-label">验证码</label>
<input class="input-short" type="text" name="sms_salt" placeholder="请输短信验证码" />
<input class="input-code" id="btn" type="button" value="发送验证码" />
</div>
<input style="margin-top: 60px;" type="submit" class="registerSubmit form-sumbit" value="提交" />
</form>
</div>

JS代码:

您恐怕感兴趣的篇章:

  • React-Native中应用验证码倒计时的开关实例代码
  • jQuery达成倒计时重新发送短信验证码功能示例
  • JS实现用户注册时收获短信验证码和倒计时功用
  • JS完结表单验证作用(验证手提式有线电话机号是还是不是存在,验证码倒计时)
  • 证实手提式有线电话机号是不是留存,jQuery实现发送验证码并60秒倒计时功用。JS/jQ实现免费获取手提式有线电话机验证码倒计时效果
  • Android账号注册完毕点击获取验证码倒计时效果
  • IOS达成验证码倒计时效率(二)
  • jquery达成手提式有线电话机发送验证码的倒计时代码
  • JS完成验证码倒计时的挂号页面

复制代码 代码如下:

此间的验证码是因此向后台这一个url({{ path(‘zm_member_get_salt’)
}}))里面,传手提式有线电话机号码和类型(type=1为注册)那五个值,后台接收值成功则赶回成功景观值。

<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>

<input class=”mem_btn mem_btn26″ type=”submit” name=”yt0″
value=”点击发送验证码” id=”btn”>

依照这里,完结验证码倒计时,即能够在认清成功后。调用封装了的倒计时函数
time(),注意验证码应接纳type为button的input,此时得以一本万利地改成其value值,来展现倒计时的时日。

如上所述是作者给大家介绍的JS达成表单验证功用(验证手提式有线电话机号是或不是存在,验证码倒计时),希望对大家具备辅助,假如我们有别的疑问请给笔者留言,小编会及时恢复生机大家的。在此也极其谢谢大家对台本之家网址的支持!

调用:

<script type="text/javascript">
//倒计时60秒
var wait=60;
function time(o) {
if (wait == 0) {
o.removeAttribute("disabled");
o.value="获取动态码";
wait = 60;
} else {
o.setAttribute("disabled", true);
o.value="重新发送(" + wait + ")";
wait--;
setTimeout(function() {
time(o)
}, 1000)
}
}
$('.input-code').click(function() {
var phone = $('.regphone').val();
$.ajax({
type: 'post',
url: "{{ path('zm_member_get_salt') }}",
data: {
phone: phone,
type: 1
},
dataType: 'json',
success: function (result) {
if (result.flag == 1) {
// alert('成功');
time(btn);
} else {
alert(result.content);
}
}
});
});
</script>

您或然感兴趣的篇章:

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

复制代码 代码如下:

上述所述是小编给大家介绍的JS实现用户注册时获得短信验证码和倒计时功用,希望对我们具备帮助,要是我们有别的疑问请给本身留言,小编会及时还原大家的。在此也特别感激大家对剧本之家网址的援救

echo CHtml::ajaxSubmitButton(‘点击发送验证码’,
CHtml::normalizeUrl(
array(‘/ajax/sendGetPassMobilCaptcha’,’zm_id’=>$model->zm_id)
),
array(‘success’=>’function(result){
if(result==1){
$(“.ys_98”).html(“验证码发送成功,请马上检查你的无绳电话机。”);
time($(“#yt0”),$(“.ys_98”))
}else{
$(“.ys_98”).html(“验证码发送战败,请重试,或关系管理员。”);
}
}’,’data’=>”zm_id=”.$model->zm_id.”&zm_mob=”.$model->zm_mob.”&zm_name=”.$model->zm_name
),
array(‘class’=>’mem_btn mem_btn26’));

您只怕感兴趣的文章:

  • React-Native中利用验证码倒计时的开关实例代码
  • jQuery完毕倒计时重新发送短信验证码效用示例
  • jQuery达成发送验证码并60秒倒计时作用
  • JS达成表单验证效用(验证手机号是或不是存在,验证码倒计时)
  • JS/jQ完结免费得到手提式有线电电话机验证码倒计时效果
  • Android账号注册达成点击获取验证码倒计时效果
  • 澳门葡京,IOS达成验证码倒计时效能(二)
  • jquery完毕手提式有线电话机发送验证码的倒计时期码
  • JS完结验证码倒计时的注册页面

你恐怕感兴趣的作品:

  • React-Native中利用验证码倒计时的开关实例代码
  • jQuery完毕倒计时重新发送短信验证码功效示例
  • jQuery实现发送验证码并60秒倒计时功效
  • JS完成用户注册时得到短信验证码和倒计时作用
  • JS实现表单验证功效(验证手提式无线电话机号是或不是留存,验证码倒计时)
  • JS/jQ完成无需付费获得手提式有线话机验证码倒计时效果
  • Android账号注册完毕点击获取验证码倒计时效果
  • IOS实现验证码倒计时功效(二)
  • JS达成验证码倒计时的挂号页面

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website