ログイン

問題7 入力されたメールアドレスが正しいかどうか判別しよう!

jQueryAnimationの問題

jQueryAnimation

入力されたメールアドレスが正しいかどうか判別しよう!

問題

よくサイトで見かけるメールアドレスなどのエラー表示を作りましょう!
以下のコードを使ってください
※見本のinputにひらがなや漢字を入れて確定(Enter)を押しましょう

自分の環境に書くコード

              <input type="text" placeholder="メールアドレス">
<div class="error">このメールアドレスは正しくありません</div>
¥HTML¥
            

期待する画面

コードのアイコン

解答ソースコード

              $(function () {
  var $error = $(".error");
  $error.hide();
  $("input").change(function(){
    $error.hide();
    var a=$("input").val().indexOf("@");
    if(a!=0){
      $error.show();
    }
  });
});
¥JavaScript¥
            
答えのアイコン

解説

まずerrorを隠します。その後、inputが改変された時をトリガーにしてinputの中身、つまりvalueをvalによって取得し、indexOfに@を与えて取得した情報に@が含まれるなら0をそうでないなら −1を返すようにしてそれを変数に代入してそれをif文で判別してエラーを出すようにすれば完成です。
※実際の実務では、@だけでなくメールアドレスのドメインの整合性など複雑なバリデーションが多いです。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!