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

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

ただいまの
回答率

88.92%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 2
  • VIEW 204

実現したいこと

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

発生している問題

<body>
<input id="fizz" type="text" size="23"  placeholder="整数値を入力してください" />
<input id="btn" type="button" value="実行" />

<script src="test.js"></script>
</body>
//inputのidを取得
const fizzNum = document.getElementById('fizz');

//整数をチェックする関数
function isNumber(numVal){
    var pattern = /^[-]?([1-9]\d*|0)(\.\d+)?$/;
    return pattern.test(numVal);
  }

//戻り値を変数に格納
  let integerCheck = isNumber(fizzNum);

//クリック時の処理
btn.addEventListener('click', () => {
    if (integerCheck == true) {
    alert('整数値です');
  } else if (integerCheck == false) {
      alert('整数値ではありません');
  }
}, false);


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

 個人的な考え

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hentaiman

    2020/07/19 09:19

    自力実装する前に実装したい機能と同じ機能が存在しないかをぐーぐる先生に聞いてみるといいですよ
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger
    勉強のために作っているのなら気にしなくてこのコメントは気にしなくて結構です

    キャンセル

  • kazamidori2140

    2020/07/19 10:35

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

    キャンセル

回答 3

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/19 10:30

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

    キャンセル

  • 2020/07/19 10:33

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

    キャンセル

+1

整数の定義次第ですね

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/19 11:15

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

    キャンセル

  • 2020/07/19 12:16

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

    キャンセル

checkベストアンサー

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 12:25

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

    キャンセル

  • 2020/07/19 12:42

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

    キャンセル

  • 2020/07/19 13:00

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

    キャンセル

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る