ログイン登録ボックスの携帯電話番号と認証コード認証実装コード

小云云
リリース: 2018-02-01 09:08:59
オリジナル
3536 人が閲覧しました

この記事では主に、ログイン登録ボックスに携帯電話番号の認証と認証コードを実装するための js のフロントエンド コードを詳しく紹介します。興味のある方は参考にしていただければ幸いです。 。

多くの開発シナリオでは、携帯電話番号と確認コードの検証を使用します。具体的な実装は次のとおりです


领取成功

ログイン後にコピー


$(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='

*'+html+'

'; return str; } });
ログイン後にコピー

関連する推奨事項:

キャンパス内ログインを模倣する jquery+thickbox に基づいています。登録 Box_jquery

jQuery プラグインは静的 HTML 検証コードを実装します verify_jquery

jQuery は検証コード関数を実装します サンプル共有

以上がログイン登録ボックスの携帯電話番号と認証コード認証実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!