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

所属分类: 网络编程 / JavaScript 阅读数: 419
收藏 0 赞 0 分享

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

<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;
}

});

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

更多精彩内容其他人还在看

浅谈Koa2框架利用CORS完成跨域ajax请求

这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue2.0 http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

轻松搞定jQuery+JSONP跨域请求的解决方案

了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
收藏 0 赞 0 分享

Vue2.0实现组件数据的双向绑定问题

这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

node的process以及child_process模块学习笔记

这篇文章主要介绍了node的process以及child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue2.0 循环遍历加载不同图片的方法

下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈Vue2.0中v-for迭代语法的变化(key、index)

下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用vue-aplayer插件时出现的问题的解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Element-ui table中过滤条件变更表格内容的方法

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多