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 相关文章推荐
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
Prototype框架详解
Nov 25 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 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中使用Oracle数据库(3)
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php 文件上传实例代码
2012/04/19 PHP
smarty内置函数section的用法
2015/01/22 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
浅谈PHP的反射API
2017/02/26 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
python判断字符串是否纯数字的方法
2014/11/19 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
投标担保书范文
2014/04/02 职场文书
服务标语口号
2014/07/01 职场文书
暑假安全保证书
2015/02/28 职场文书
自主招生自荐信范文
2015/03/04 职场文书
会计岗位职责范本
2015/04/02 职场文书
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python