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

解決済

質問者：hayosato
質問日時：2022/04/27 16:06
回答数：2件

入力フォームの 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>


<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">

<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
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2022/04/28 13:32

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

となります。

- 1
- 件

通報する

この回答へのお礼

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

通報する

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

No.1

回答者： fujillin
回答日時：2022/04/27 16:25

こんにちは

普通のチェックだけで良いのなら
<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/