dポイントプレゼントキャンペーン実施中!

入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして、アラートを出したいです。

下記のコードはメールアドレスの入力フォームのコードで、入力欄が空の時にボタンをクリックすると、アラートによるエラー表示がでるようになっています。これを、このフォームをさらに

入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして、アラートを出したいです。
どうコードを書いたら良いでしょうか?
回答よろしくお願いします。
<!DOCTYPE html>

<html lang="ja">

<head>
<meta content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="mouthlp.css">

<title></title>

<style>



/* 入力フォームの位置 */

.auto-style1 {

text-align: center;

}

</style>

</head>
<body>

<!--javaによるエラー表示のためid="form"を追加-->
<form action="LPmouth1.php" method="post" id="form">


<div class="auto-style1">

<p class="tel-titile">
メールアドレス:※
</p>

<input type="text" class="email" name="email" id="email"
value="" />

</div>


<div class="auto-style1010">
<!--classを2つ追加  example8、画像の大きさ指定  button-simple yureru-sは左右に動くアニメーション-->
<button type="submit" id="submit" name="submit" class="auto-style40" value="submit">
<img src="image/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example80" /></button>
</div>

</form>

<div class="kuuhaku30"></div><!--空白の設定-->


<script>
// javaでエラーメッセージの表示
const key = 'date_key';
const form = document.querySelector('#form');

const email = document.querySelector('#email');

form.addEventListener('submit', function(event) {
let msg = "";


if (email.value == "") msg += "メールアドレスが入力されていません。\n";


if (msg != "") {
event.preventDefault();
alert(msg);
}
});

form.addEventListener('change', function() {

if (email.value != "") sessionStorage.setItem('email', email.value);

});

email.value = sessionStorage.getItem('email');

</script>

</body>

</html>

質問者からの補足コメント

  • 回答ありがとうござます。どうしてもjavasprictでメールを正規チェックしたいのですが、提示コードに以下を追加しても、反応しないのですが、どう書いたらよいでしょうか?
    // javaでエラーメッセージの表示に以下を追加

    const reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;

    else if(!reg.test(email.value)){
    msg +=("メールアドレスの形式が不正です。");

      補足日時:2022/04/28 12:51

A 回答 (2件)

No1です。



>提示コードに以下を追加しても、反応しないのですが
補足でご提示のスクリプトは中途半端な断片なので、何がどうなっているのか不明です。
雰囲気的には、その範囲に文法上おかしな点は特に見当たりませんが、どこかでエラーが発生していたりしませんか?

あるいは、エラーがないなら、何を期待してどのような結果になっているのですか?
ご提示のスクリプトは、期待した条件で実行されるようになっているのでしょうか?
(その部分が実行されていないとかでは?)
あるいは、email.value は正しく内容が保持できていますか?
(内容がおかしくなっているなど)


例えば、以下を実行してみれば、
const
email = { value: 'hogehoge@fugafuga.co.jp' },
email2 = { value: 'hoge@hoge@fugafuga.co.jp' },
reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;

alert( reg.test(email.value) ); // → true
alert( reg.test(email2.value) ); // → false

となります。
    • good
    • 1
この回答へのお礼

ありがとうございます。何度もすみません。無事できました。感謝致します。

お礼日時:2022/04/28 17:05

こんにちは



普通のチェックだけで良いのなら
<input type="email" required />
を使用すれば、面倒なことは不要になります。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

アドレスチェックの正規表現はいろいろあるようですが、厳密にやるとそれなりに長くなります。
input要素のpattern属性を利用すれば、指定パターンでチェックすることが可能です。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

もしも自前でチェックしたいのなら、以下あたりをご参考に。
https://www.wp-benricho.com/email-address-99/
    • good
    • 1
この回答へのお礼

ありがとうございます

お礼日時:2022/04/28 12:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!