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 相关文章推荐
Jquery 动态添加按钮实现代码
May 06 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
vue调用语音播放的方法
Sep 27 Javascript
Node.js API详解之 module模块用法实例分析
May 13 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
url decode problem 解决方法
2011/12/26 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Python随机生成彩票号码的方法
2015/03/05 Python
简单解析Django框架中的表单验证
2015/07/17 Python
Python编程中的异常处理教程
2015/08/21 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
学雷锋志愿服务月活动总结
2014/03/09 职场文书
合作意向书格式及范文
2014/03/31 职场文书
师恩难忘教学反思
2014/04/27 职场文书
十八大演讲稿
2014/05/22 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
淘宝好评语句大全
2014/12/31 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server