js实现登录注册框手机号和验证码校验(前端部分)


Posted in Javascript onSeptember 28, 2017

开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下

<div>
 <input type="text" name="phonenumber" placeholder="请输入您的手机号码" />
 <input type="text" name="verify" placeholder="请输入验证码" /><input type="button" value="发送验证码" class="verify_code" />
 <input type="button" name="btn" placeholder="立即领取" class="btn" />
</div>
<!--弹出层-->
<div class="layer" style="display:none">
  <p>领取成功</p>
  <img src="img/close-btn.png" class="close-btn">
</div>
$(document).ready(function(){
//点击关闭按钮关闭弹出层
 $(".close-btn").click(function(){
  $("layer").hide();
 });

//只有再手机号和验证码验证为有效后,点击领取按钮跳出弹出层事件才生效
 $('[name=btn]').click(function(){
   if(!validate()){
  return false;
  }
  $(".layer").show();
 });

//验证
function validate(){
//正则表达式,十一位数字的电话号码
 var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/;
//如果手机号码输入为空,则再输入框后插入错误信息
if($('[name=phonenumber]').val==''){
  $('[name=phonenumber]').after(errMsg('手机号码不能为空!'));

return false;

}
//验证输入的电话号码是否是11位数字
if(!phoneReg.test($('[name=phonenumber]').val())){
$('[name=phonenumber]').after(errMsg('请输入正确的手机号码!'));


return false;
}

//验证码不为空验证
if($('[name=verify]').val==''){
  $('[name=verify]').after(errMsg('验证码不能为空!'));


return false;
}
$('.error').remove();
return true;}
//点击发送验证码按钮,进行倒计时
$('.verify_code').on('',function(){
 if(!this.b){
 setTimer();
 this.b=true;
}
})

//倒计时
function setTimer(){

var time=60;
 var timers=setInterval(function(){
 time--;
if(time <= 0){
 time=0;
 console.log(time);
 $('.verify_code').eq(0)[0].b=false;
 $('.verify_code').val('获取验证码');
 clearInterval(timers);
return false;
 
}
$('.verify_code).val( time+ '秒后重新获取');
},1000)
}


//错误信息显示
function errMsg(html){

$('.error').remove();

var str='<div class="error">*'+html+'</div>';
 return str;
}

});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
Angular路由ui-router配置详解
Aug 01 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 #Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 #Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 #Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 #Javascript
微信小程序下拉刷新界面的实现
Sep 28 #Javascript
详解Vuex中mapState的具体用法
Sep 28 #Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 #Javascript
You might like
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP下对字符串的递增运算代码
2010/08/21 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
JavaScript知识点整理
2015/12/09 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
详解JavaScript树结构
2017/01/09 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
pytorch forward两个参数实例
2020/01/17 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
python不同版本的_new_不同点总结
2020/12/09 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
公司节能减排倡议书
2014/05/14 职场文书
关于责任的演讲稿
2014/05/20 职场文书
信息工作经验交流材料
2014/05/28 职场文书
双拥工作宣传标语
2014/06/26 职场文书
物流专业求职信
2014/06/30 职场文书
linux目录管理方法介绍
2022/06/01 Servers