エラーハンドリング 正規表現

Question

前提・実現したいこと
エラーハンドリングの正規表現を用いてユーザーにメールアドレスを間違って送信させないようにしたいです。

質問内容
現在就活用にポートフォリオを作っています。その際にユーザーにメールフォームを入力してもらい、書いてもらった内容に「＠」がなけれが「＠がありません。正しく入力してください。」と表示させたいです。

正規表現を使うとエラーハンドリングを解決できることが分かったため、外部定義したjsファイル下記のコードがある状態です。
var address = "[e-mail]";
var reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;
if (reg.test(address)) {
console.log("正しい");
} else {
console.log("間違っている");
}

"[e-mail]"をユーザーに入力してもらった内容にすることができれば成功すると考えています。

発生している問題

ユーザーに入力してもらった内容をjsの正規表現につなげるやり方がよくわかりません。

該当のソースコード

htmlにあるコード　 <input type ="text" name="mail" placeholder="新規登録するメールアドレス">
jsにあるコード　<script src="js/touroku.html"></script>

var address = "[e-mail]";
var reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;
if (reg.test(address)) {
console.log("正しい");
} else {
console.log("間違っている");
}

初めての質問となります。わかりにくいところは指摘してくださると助かります。よろしくお願いします。

Comments

[hentaiman]

javascriptの使い方が全く分からないという質問ですか？

[hayatonbi94]

hentaimanさん。いえ違います。わかりにくくてすみません。エラーハンドリングの実装方法が分からないという質問です。

[hentaiman]

ifを通すだけですよね？console.logの部分でreturn true またはreturn falseに置き換えて、問題無い場合のみsubmitすればいいだけだと思うんですが
それとも文字通りError（他の言語でのthrow Exceptionやraiseで投げるやつ）が出た場合の制御をしたいという事ですか？

[hayatonbi94]

ifを使いたいのですが、

<input type ="text" name="mail" placeholder="新規登録するメールアドレス">

上記のメールフォームに入力した内容をifに適用する方法が分かりません。

Answer 1

引用テキスト書いてもらった内容に「＠」がなけれが「＠がありません。正しく入力してください。」と表示

js必須ですか?
入力書式の問題だけなら

<input type="email" name="mail" placeholder="新規登録するメールアドレス">

で良いのでは? と思いますが^^;

Comments

[hayatonbi94]

解答ありがとうございます。
私は入力フォームだけならhtml だけで大丈夫だと思うのですが、文字を入力した際に確認文を送るのはjsでできる認識ですのでjsを使おうとしていました。

[-millmill-]

type="email"にすると、@がない場合自動的に、ツールチップが出ます
文言が変えられないのが難点ですが、、^^;

[hayatonbi94]

ありがとうございます。その方法でも解決することが出来ました。

Answer 2

参考URLの書き方に質問者のif文埋め込むとこんな感じです。

<form id="tera">
<input type="text" id="mail" placeholder="新規登録するメールアドレス">
<input type="submit">
</form>

function logSubmit(event) {
  var address = document.getElementById('mail');
  var reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;
  if (reg.test(address)) {
  alert("正しいから佐文ッとします");
  } else {
  alert("間違ってるからキャンセルします");
  event.preventDefault();
  }

}
const form = document.getElementById('tera');
form.addEventListener('submit', logSubmit);

Comments

[hayatonbi94]

hentaiさん、解答ありがとうございます。適用できたのですが、私はProgateで学習しただけでググりながら正規表現を使おうとしていました。実際にhentaimanさんのコードの内容が全く理解できません。やはりググりながら一つ一つ学習を進めるしかないのでしょうか？

[hentaiman]

それは厳しいな・・・
ググりながら＝分からないコードが出る度に調査する、という意味ならそれでもいいです。回答に書いたコードの不明点をググりながら理解していくというやり方ですね。
しかし順番に１から学ぶつもりでググりながら勉強するのなら時間の無駄です。何かしら入門書籍を買った方が学習スピードは飛躍的に高まると思います。本屋なら立ち読みして読み易いやつ選ぶといいです。
自分も最近も本買いましたし、なんだかんだ本は読み易くまとまってます。

[hayatonbi94]

返信遅れてしまい申し訳ありません。なるほど。わかりました。本などで勉強したいと思います。

Answer 3

document.getElementById('button').onclick = function(){
  var address = document.getElementById('value').value;
  var reg = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/;
  if (reg.test(address)) {
    console.log("正しい");
  } else {
    console.log("間違っている");
  }
}

Comments

[kyoya0819]

よくわかんないけど、ボタン発火だとこんなかんじ。
入力と同時にチェックするなら別の書き方が必要。

[hayatonbi94]

回答ありがとうございます。
上記のコードを試したところ解決できませんでした。
下記がgithubのコードになります。
https://github.com/hayato0904/hayato0904.github.io
こちらのtouroku.htmlとtouroku.jsでの操作で行っています。

[kyoya0819]

もちろんこのままだと使えません。
あくまでも、「Hint」になります。
具体的な要件がないとこれ以上はかけません。

[hayatonbi94]

了解しました。ありがとうございました！