前提・実現したいこと
js を使って より関数でまとめる == ""の部分など
ここに質問の内容を詳しく書いてください。
javascriptでお問い合わせフォームの値を取得し正規表現で確認するのをを作っています。
空白のとき、間違っているときにそれぞれメッセージを表示したい
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
id="p1"などそれぞれ違うので それぞれ違う形で表示するために関数でまとめたい
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正規表現</title> <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> <link rel="stylesheet" type="text/css" href="flash.css" /> <script> "use strict"; let myRe = /^[0-9]{3}-[0-9]{4}$/; let myRe2 = /^[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}$/; let myRe3 = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}.[A-Za-z0-9]{1,}$/; let regex = ""; $(document).ready(function () { $("#btn").click(function () { // console.log($("#postal-code").val().match(myRe)); // console.log($("#tel").val().match(myRe2)); // console.log($("#email").val().match(myRe3)); const txt1 = $("#postal-code").val(); const txt2 = $("#tel").val(); const txt3 = $("#email").val(); var myArray = myRe.exec(txt1); var myArray2 = myRe2.exec(txt2); var myArray3 = myRe3.exec(txt3); let array = [txt1, txt2, txt3];html JavaScript ソースコード
</head> <body> <label><span>必須</span> 郵便番号</label> <input type="text" name="postal-code" id="postal-code" /> <tt id="p1" color="red"></tt>console.log(myArray); // console.log('The value of lastIndex is ' + myRe.lastIndex); // console.log(myArray2); // console.log('The value of lastIndex is ' + myRe2.lastIndex); // console.log(myArray3); // console.log('The value of lastIndex is ' + myRe3.lastIndex); if (txt1 == "") { $("#p1").text("空文字です"); } else if (txt1 != myArray) { $("#p1").text("入力が間違っています"); } if (txt2 == "") { $("#p2").text("空文字です"); } else if (txt2 != myArray2) { $("#p2").text("入力が間違っています"); } if (txt3 == "") { $("#p3").text("空文字です"); } else if (txt3 != myArray3) { $("#p3").text("入力が間違っています"); } }); }); </script>
</body> </html> ### 試したこと<br /> <label><span>必須</span> 電話番号</label> <input type="text" name="tel" id="tel" /> <tt id="p2" color="red"></tt> <br /> <label><span>必須</span> メールアドレス</label> <input type="email" name="email" id="email" /> <tt id="p3" color="red"></tt> <br /> <button type="button" name="button" id="btn"> <span>"確認する"</span> </button>
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー