JS实现表单验证功能(验证手机号是否存在,验证码倒计时)

 更新时间:2016年10月11日 10:39:20   作者:danran68  
js实现表单验证功能,通过js代码验证手机号是否存在验证码倒计时功能,代码简单易懂非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧

废话不多说直接上代码

html代码:

<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="">
<span class="f12 red tel-msg"></span>
<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="">
<span class="f12 red pwd-msg"></span>
</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" />
<span class="f12 red code-msg"></span>
</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代码:

<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实现表单验证功能(验证手机号是否存在,验证码倒计时),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js+css3实现旋转效果

    js+css3实现旋转效果

    本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • webpack学习--webpack经典7分钟入门教程

    webpack学习--webpack经典7分钟入门教程

    这篇文章主要介绍了webpack学习--webpack经典7分钟入门教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS重学系列之聊聊new操作符

    JS重学系列之聊聊new操作符

    这篇文章主要给大家介绍了关于JS重学系列之new操作符的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • js判断样式className同时增加class或删除class

    js判断样式className同时增加class或删除class

    用正则表达式判断多个class之间是否存在真正的class(前后空格的处理)然后增加class删除class,本文给予实现方法,感兴趣的朋友可以了解下,或许对你有所帮助
    2013-01-01
  • javascript实现带节日和农历的日历特效

    javascript实现带节日和农历的日历特效

    这篇文章主要介绍了javascript实现带节日和农历的日历特效,效果十分棒,需要的朋友可以参考下
    2015-02-02
  • js改变html的原有内容实现方法

    js改变html的原有内容实现方法

    下面小编就为大家带来一篇js改变html的原有内容实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Javascript 兼容firefox的一些问题

    Javascript 兼容firefox的一些问题

    上午在做一些测试.把页面拿到火狐上去就出现一堆问题.页面布局先不说.Javascript代码的问题就够头疼
    2009-05-05
  • setTimeout()与setInterval()方法区别介绍

    setTimeout()与setInterval()方法区别介绍

    计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助
    2013-12-12
  • js正则表达式中test,exec,match方法的区别说明

    js正则表达式中test,exec,match方法的区别说明

    本篇文章主要是对js正则表达式中test,exec,match方法的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JavaScript高级教程5.6之基本包装类型(详细)

    JavaScript高级教程5.6之基本包装类型(详细)

    在基本类型当中,有三种类型是我们经常使用的:boolean,number,string,通过本篇文章给大家介绍javascript高级教程5.6之基本包装类型,感兴趣的朋友一起学习吧
    2015-11-11

最新评论