質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

Q&A

解決済

3回答

1395閲覧

JavaScriptで、正規表現を使ってinputタグに入力された値が整数値かどうかを判別したい

kazamidori2140

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

正規表現

正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

0グッド

2クリップ

投稿2020/07/18 23:50

実現したいこと

ボタンをクリックし、inputタグに入力された文字列が...
・整数値なら、アラートで「整数値です」
・整数値でなければ、アラートで「整数値ではありません」
と表示させたい。

発生している問題

HTMl

1<body> 2<input id="fizz" type="text" size="23" placeholder="整数値を入力してください" /> 3<input id="btn" type="button" value="実行" /> 4 5<script src="test.js"></script> 6</body>

JavaScript

1//inputのidを取得 2const fizzNum = document.getElementById('fizz'); 3 4//整数をチェックする関数 5function isNumber(numVal){ 6 var pattern = /^[-]?([1-9]\d*|0)(.\d+)?$/; 7 return pattern.test(numVal); 8 } 9 10//戻り値を変数に格納 11 let integerCheck = isNumber(fizzNum); 12 13//クリック時の処理 14btn.addEventListener('click', () => { 15 if (integerCheck == true) { 16 alert('整数値です'); 17 } else if (integerCheck == false) { 18 alert('整数値ではありません'); 19 } 20}, false);

整数値を入力しているのに、「整数値ではありません」のアラートが出現してしまう。

## 個人的な考え
関数の引数に問題があると考える。
引数のinputタグで入力される値は文字列なので、そのせいでおかしくなっている。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazamidori2140

2020/07/19 01:35

ありがとうございます。 今回は勉強のために作っていますが、現場では実装したい機能が無いかを先にググることの方が多いのでしょうか。
guest

回答3

0

整数の定義次第ですね

  • 「0123」的な8進数の整数
  • 「12e3」のような精度表記の整数(?)
  • 「123.0」のような小数点をもった実質整数(?)

単純に数値のチェックだとこんな感じ

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 document.querySelector('#btn').addEventListener('click',()=>{ 4 var v=document.querySelector('#fizz').value; 5 var view=document.querySelector('#view'); 6 view.textContent=/^([1-9]+\d*|0)$/.test(v)?"ok":"ng"; 7 }); 8}); 9console.log(0123); 10console.log(12e3); 11console.log(123.0); 12</script> 13<input id="fizz" type="text" size="23" placeholder="整数値を入力してください"> 14<input id="btn" type="button" value="実行"> 15<div id="view"></div> 16

投稿2020/07/19 02:13

yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/07/19 02:15

バリデーションはともかくinput要素なら type="number"とか、patternの設定とかで弾くことはできます
kazamidori2140

2020/07/19 03:16

ありがとうございます。 今回は自己成長のためにtype="number"を使わずに実装したかったので"text"を採用しました。 8進数のことを考えていなかったので、次はそこも意識してトライしてみます。
guest

0

関数の引数に問題があると考える。

いいえ。
まず「ボタンクリックしたとき」の値をチェックしていません。
画面読み込んだときの値になってるので、何も初期値なければ空ですよね。

もう1点。
document.getElementById('fizz')そのまま突っ込んでるので、「入力値」ではなく「要素そのもの」に対するチェックになってます。

上記2点、対応してみてください。

投稿2020/07/19 00:02

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazamidori2140

2020/07/19 01:30

「ボタンをクリックした時」の値のチェックというのは、addEventListenerの第2引数を用いてチェックするのでしょうか?
m.ts10806

2020/07/19 01:33

まず、やってみてください。 「クリック時の処理に書いていない」という指摘ですが、どのときにどこを通っているかデバッグしてみれば分かります。
guest

0

ベストアンサー

まずは自分ならこうするという実例です。

<script> //整数をチェックする関数 const checkNum = () => { //クリックされた時点でのfizzに入力された値 const num = document.getElementById('fizz').value; //入力された文字列が0以上の半角数字であるならば //「整数値です」と表示、違うのであれば「整数値ではありません」と表示 // ※今回は001 0200 などは許容しないようにしています。 num.match(/^([1-9]\d*|0)$/) ? alert('整数値です') : alert('整数値ではありません'); } //クリック時の処理 btn.addEventListener('click', () => { checkNum(); }, false); </script>

/追記/
元のコードを修正してみました。

<script> //inputのidを取得 const fizzNum = document.getElementById('fizz'); //整数をチェックする関数 function isNumber(numVal) { /* * var pattern = /^[-]?([1-9]\d*|0)(.\d+)?$/; 1つ目の間違いはここです。これでは整数ではなく 少数や-1なども許可してしまいます。ほかの方も言っている通り 整数の定義によりますが、今回は半角かつ整数の数字のみ、001などは 許容しないようにしてみました。 ※varはなるべく使わないほうが良いのでconstにしました。 */ const pattern = /^([1-9]\d*|0)$/; /* * return pattern.test(numVal); 二つ目の間違いはここです。 これでは、fizzNumを参照してしまい、 入力した値は参照されません。 入力した値を参照するため .valueを追加します。 */ return pattern.test(numVal.value); } /* * //戻り値を変数に格納 * let integerCheck = isNumber(fizzNum); ここが最後の間違いです。これでは入力する前にisNumber関数を 実行してしまいます。そのためここは記述自体を削除します。 */ //クリック時の処理 btn.addEventListener('click', () => { /* クリックした時点でisNumber関数を実行するため 下記にintegerCheckを移動しました。※letである必要はないのでconstにしました。 */ const integerCheck = isNumber(fizzNum); if (integerCheck == true) { alert('整数値です'); } else if (integerCheck == false) { alert('整数値ではありません'); } }, false); </script>

投稿2020/07/19 02:35

編集2020/07/19 03:39
Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazamidori2140

2020/07/19 03:25

ありがとうございます。 昨日ずっと調べている中で(yambeさんの回答もですが) ? alert('整数値です') : alert('整数値ではありません'); という表記を見たことなかったので、とても勉強になりました。
Jon_do

2020/07/19 03:42

元のコードを修正したものを追加しましたのでそちらも 見てみてください。回答もそうですが、どこか間違えている可能性も捨てきれませんので ご注意を。
kazamidori2140

2020/07/19 04:00

懇切丁寧にありがとうございます。 ご教示いただいた内容を元に色々試してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問