メールアドレスの入力判定の作り方

「空白だったら」、「@が含まれてなかったら」を判定する

See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>

</head>
<body>

  <input type="text" placeholder="メールアドレス">
  <div class="error"></div>


</body>
</html>

JQuery


$(function(){
  $('.error').hide();
  $('input').on('blur',function(){
    if($(this).val() == ""){
      $('.error').text("メールアドレスを入力してください").show();
    }else{
      if($('input').val().indexOf("@") > -1){
        $('.error').hide();
      }else{
        $('.error').text("このメールアドレスは正しくありません").show();
      }
    }
  })
});

解説

  • 2行目、初期状態の .error のメッセージを隠す
  • 3行目、input からカーソルが離れた時( bulr )、4行目の if が作動する
  • 4行目、$(this) = カーソルが離れた input、の value が空白なら 5行目のコードが作動する
  • 5行目、.error に .text() のメッセージを挿入し、表示( .show() )する
  • 6行目、else = if に対して「そうでない場合」、今回は「input が空白でない場合」7行目のコードが作動する
  • 7行目、input の value に”@”が含まれているか判定する
  • indexOf() = カッコないの文字が含まれていれば 0 、含まれていなければ -1 の値を返す
  • 8行目、”@” が含まれていれば .error のメッセージを隠す
  • 10行目、含まれていなければ、.error に .text() のメッセージを代入して表示する
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。