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 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
document.compatMode介绍
May 21 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
Vue的百度地图插件尝试使用
2017/09/06 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Anaconda入门使用总结
2018/04/05 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
如何利用python进行时间序列分析
2020/08/04 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
历史学专业毕业生求职信
2013/09/27 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
科学发展观演讲稿
2014/09/11 职场文书
辩护词范文大全
2015/05/21 职场文书
会计做账心得体会
2016/01/22 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang