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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
jQuery的事件预绑定
Dec 05 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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
php下删除字符串中HTML标签的函数
2008/08/27 PHP
php while循环得到循环次数
2013/10/26 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
Python标准库之循环器(itertools)介绍
2014/11/25 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
PyTorch中的Variable变量详解
2020/01/07 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
本科毕业生求职自荐信
2014/04/09 职场文书
访谈节目策划方案
2014/05/15 职场文书
节能环保标语
2014/06/12 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
万能检讨书2000字
2014/10/17 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
军训新闻稿范文
2015/07/17 职场文书
Java的Object类的九种方法
2022/04/13 Java/Android