ログイン
問題7

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

アイコン画像

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

よくサイトで見かけるメールアドレスなどのエラー表示を作りましょう!
以下のコードを使ってください
※見本の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文で判別してエラーを出すようにすれば完成です。
※実際の実務では、@だけでなくメールアドレスのドメインの整合性など複雑なバリデーションが多いです。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる