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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
javascript实现树形菜单的方法
Jul 17 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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+mysql留言本源码
2009/11/11 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript动态加载三
2012/08/22 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
python简单实现刷新智联简历
2016/03/30 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
班主任工作年限证明
2014/01/12 职场文书
打架检讨书2000字
2014/02/22 职场文书
简单租房协议书范本
2014/08/20 职场文书
捐资助学感谢信
2015/01/21 职场文书
纪委立案决定书
2015/06/24 职场文书
致运动员赞词
2015/07/22 职场文书
2015年女工委工作总结
2015/07/27 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
Java实现带图形界面的聊天程序
2022/06/10 Java/Android