Boîte d'enregistrement de connexion Numéro de téléphone portable et code de vérification Code de mise en œuvre de la vérification-js tutoriel-php.cn

Boîte d'enregistrement de connexion Numéro de téléphone portable et code de vérification Code de mise en œuvre de la vérification

小云云

Libérer： 2018-02-01 09:08:59

original

3701 Les gens l'ont consulté

Cet article présente principalement en détail le code frontal de js pour implémenter la vérification du numéro de téléphone portable et du code de vérification dans la zone d'enregistrement de connexion. J'espère qu'il pourra s'y référer. t'aider.

De nombreux scénarios de développement utiliseront la vérification des numéros de téléphone mobile et des codes de vérification. La mise en œuvre spécifique est la suivante

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

Copier après la connexion

<🎜. >

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

});

Copier après la connexion

Recommandations associées :

Basé sur jquery+thickbox imitation école connexion inscription box_jquery

implémentation du plug-in jQuery Statique Code de vérification HTML vérification_jquery

Implémentation JQuery du partage d'exemples de fonction de code de vérification

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!