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


Posted in Javascript onOctober 11, 2016

废话不多说直接上代码

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

Javascript 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
vue-swiper的使用教程
Aug 30 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 #Javascript
javascript 动态样式添加的简单实现
Oct 11 #Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 #Javascript
javascript 动态脚本添加的简单方法
Oct 11 #Javascript
js HTML5上传示例代码完整版
Oct 10 #Javascript
JavaScript  event对象整理及详细介绍
Oct 10 #Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
php并发对MYSQL造成压力的解决方法
2013/02/21 PHP
PHP分页类集锦
2014/11/18 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
浅析javascript中function 的 length 属性
2014/05/27 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
Bootstrap表单布局
2016/07/19 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Pytorch的mean和std调查实例
2020/01/02 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python3如何判断三角形的类型
2020/04/12 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
平面设计自荐信
2013/10/07 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
宣传工作经验材料
2014/06/02 职场文书
体育运动口号
2014/06/09 职场文书
节水口号标语
2014/06/19 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
导游词之上海豫园
2019/10/24 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫