Login-Registrierungsfeld, Mobiltelefonnummer und Verifizierungscode, Verifizierungsimplementierungscode-js-Tutorial-php.cn

小云云

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

Original

3661 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Front-End-Code von js zur Implementierung der Anmelde-Registrierungsbox für die Mobiltelefonnummer und den Verifizierungscode vor. Ich hoffe, dass er für alle hilfreich ist.

Viele Entwicklungsszenarien nutzen die Verifizierung von Mobiltelefonnummern und Verifizierungscodes. Die spezifische Implementierung ist wie folgt

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

Nach dem Login kopieren

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

});

Nach dem Login kopieren

Verwandte Empfehlungen:

Imitation eines Schul-Login-Registrierungsfelds basierend auf jquery+thickbox_jquery

jQuery-Plug-in-Implementierung Statisch Verifizierung des HTML-Bestätigungscodes_jquery

JQuery-Implementierung der Beispielfreigabe für die Verifizierungscodefunktion

Das obige ist der detaillierte Inhalt vonLogin-Registrierungsfeld, Mobiltelefonnummer und Verifizierungscode, Verifizierungsimplementierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!