Login registration box mobile phone number and verification code verification implementation code-JS Tutorial-php.cn

小云云

Release： 2018-02-01 09:08:59

Original

3674 people have browsed it

This article mainly introduces in detail the front-end code of js to implement login registration box mobile phone number and verification code verification. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Many development scenarios will use the verification of mobile phone numbers and verification codes. The specific implementation is as follows

<p>
  <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" />
</p>
<!--弹出层-->
<p class="layer" style="display:none">
    <p>领取成功</p>
    <img src="img/close-btn.png" class="close-btn">
</p>

Copy after login

$(document).ready(function(){
//点击关闭按钮关闭弹出层
  $(".close-btn").click(function(){
   $("layer").hide();
  });

//只有再手机号和验证码验证为有效后，点击领取按钮跳出弹出层事件才生效
  $(&#39;[name=btn]&#39;).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($(&#39;[name=phonenumber]&#39;).val==&#39;&#39;){
    $(&#39;[name=phonenumber]&#39;).after(errMsg(&#39;手机号码不能为空！&#39;));
　　　　return false;
　　}
//验证输入的电话号码是否是11位数字
if(!phoneReg.test($(&#39;[name=phonenumber]&#39;).val())){
$(&#39;[name=phonenumber]&#39;).after(errMsg(&#39;请输入正确的手机号码！&#39;));
　　　　return false；
}

//验证码不为空验证
if($(&#39;[name=verify]&#39;).val==&#39;&#39;){
    $(&#39;[name=verify]&#39;).after(errMsg(&#39;验证码不能为空！&#39;));
　　　　return false;
}
$(&#39;.error&#39;).remove();
return true;}
//点击发送验证码按钮，进行倒计时
$(&#39;.verify_code&#39;).on(&#39;&#39;,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);
  $(&#39;.verify_code&#39;).eq(0)[0].b=false;
  $(&#39;.verify_code&#39;).val(&#39;获取验证码&#39;);
  clearInterval(timers);
return false;
 
}
$(&#39;.verify_code).val( time+ &#39;秒后重新获取&#39;)；
}，1000）
}


//错误信息显示
function errMsg(html){
　　$(&#39;.error&#39;).remove();
　　var str=&#39;<p class="error">*&#39;+html+&#39;</p>&#39;;
  return str;
}

});

Copy after login

Related recommendations:

Based on jquery+thickbox imitation school login registration box_jquery

jQuery plug-in to implement static HTML verification code Verification_jquery

jQuery implementation of verification code function example sharing

The above is the detailed content of Login registration box mobile phone number and verification code verification implementation code. For more information, please follow other related articles on the PHP Chinese website!