JavaScript

数値のみ・桁数制限ありの入力フォームを作る【JavaScript】

この記事では、数値のみ入力可能な、桁数制限のありの入力フォームを作る方法を紹介します。

matchと正規表現を中心に使います。

正規表現については「JavaScriptの正規表現を触ってみる」の記事で解説しています。

【基礎知識】matchと正規表現

まずはコードの紹介の前に、基礎となる知識から見ていきましょう。

「手っ取り早くコードだけ知りたい!」という方は、記事後半の「【完成版】数値のみ・桁数制限ありの入力フォーム」に飛んでください。

matchで数値を抽出

まずはmatchの動作を確認してみましょう。

数値を含んだ適当な文字列をstrにいれて確認してみます。

/[0-9]+/gで、1回以上連続する数値をすべて抽出してくれます。

var str = '123_345あ888-3-5hh877';
var result = str.match(/[0-9]+/g);
console.log(result);
// 結果
[ '123', '345', '888', '3', '5', '877' ]

以上のような結果が出力されます。

正規表現で桁数を区切って抽出

正規表現は桁数の指定も可能です。

var str = '123_345あ888-3-5hh877';
var result1 = str.match(/[0-9]{2,4}/g);
console.log(result1)
// 結果
[ '123', '345', '888', '877' ]

上記の/[0-9]{2,4}/gは、「2桁以上4桁以下の数値の繰り返し」という意味になります。

そのため、3と5は抽出されていません。このように正規表現側で桁数制御が可能です。

実際に触ってみよう

以下でmatchと正規表現を実際に触ることができます。

数値のみ・桁数制限ありの入力フォームの作り方

それでは本題の、桁数制限があり、数値以外が入力できないフォームを作ってみましょう。

「JavaScript側で制御する部分」と、「HTML側で制御する部分」があります。

分かりやすいよう、5ステップに分けて順を追って解説していきます。

ステップ1.数値のみ入力可能にする

まずは数値以外を入力するとalertのでるフォームを作ります。

if (form_value.match(/[0-9]+/g) != form_value )の部分で、数値以外が入力されたときに条件分岐をしています。

function inputCheck () {
  var form = document.getElementById("form");
  var form_value = form.value;
  
  if (form_value.match(/[0-9]+/g) != form_value ) {
  	document.getElementById('alert').innerHTML = '数値以外はNGです。';
    form.value = '';
  } else {
  	document.getElementById('alert').innerHTML = 'OKです';  
  }
  
  document.getElementById('output').innerHTML = form_value;
}
<input type="text" id="form" onchange="inputCheck()">
<div class="frame">入力内容:<span id="output"></span></div>
<div id="alert"></div>

上記のコードを実際に動かしてみましょう。数値のみを入力すると「数値以外はNGです」というアラートが出ます。

ステップ2.桁数を制限する

次に、上記のコードに正規表現で桁数の制限を追加しましょう。

/[0-9]{1,4}/gを使って、1桁~4桁までの数値のみ入力可能にし、5桁を超えるをエラーで表示されます。

function inputCheck () {
  var form = document.getElementById("form");
  var form_value = form.value;
  
  if (form_value.match(/[0-9]{1,4}/g) != form_value ) {
    document.getElementById('alert').innerHTML = '4桁以内の数値を入力してください。';
    form.value = '';
  } else {
    document.getElementById('alert').innerHTML = 'OKです。';  
  }
  document.getElementById('output').innerHTML = form_value;
}
<input type="text" id="form" onchange="inputCheck()">
<div class="frame">入力内容:<span id="output"></span></div>
<div id="alert"></div>

上記コードで、「数値以外」「4桁を超える数値」が入力されるとアラートが表示されるようになりました。

ステップ3.入力時にmaxlengthを指定する

ただし、上記のコードには問題があります。

それは、「桁数制限を超えて入力できてしまう」という点です。

入力するユーザーとしての使い勝手はよくありません。HTML側で桁数制御するほうが便利です。

maxlengthをHTML側でつけるとHTML側でも桁数を制限できます。

以下ではmaxlength="4"とし、4桁以上が入力できないようにしています。

// maxmaxlengthの追加
<input type="text" id="form" maxlength="4" onchange="inputCheck()">
<div class="frame">入力内容:<span id="output"></span></div>
<div id="alert"></div>

ステップ4.patternで数字以外を入力できなくする

HTML側にpatternの制御をつけます。pattern="[0-9]{1,4}"とすることによって、4桁以内の数値以外が入力された際に、エラーが出るようになります。

ただし、submit時にエラーが発生するため、CSSの:invalidの擬似クラスを使います。

:invalidは要素やinputやformの要素のうち内容が検証に失敗したものを表します。

これにCSSを追加することで、リアルタイムでエラーが表示することができるようになります。

function inputCheck () {
	var form = document.getElementById("form");
	var form_value = form.value;
  
  if (form_value.match(/[0-9]{1,4}/g) != form_value ) {
    form.value = '';
    document.getElementById('alert').innerHTML = '4桁以内の数値を入力してください。';
  } else {
  	document.getElementById('alert').innerHTML = 'OKです。';  
  }
  document.getElementById('output').innerHTML = form_value;
}
<input type="text" id="form" maxlength="4" onchange="inputCheck()" pattern="[0-9]{1,4}">
<span class="error">数値以外は入力できません。</span>
<div class="frame">入力内容:<span id="output"></span></div>
<div id="alert"></div>
.error { display: none; }

input:invalid + .error {
  display: block;
  color: red;
}

ステップ5.type="tel"でスマホのユーザビリティ強化

input="tel"にすることで、スマートフォンで数字入力のキーボードで開くことができます。

使い勝手が大きく変わる部分なので重要です。

type="tel"にするだけなので、コードは省略します。(完成版をみてください)

【完成版】数値のみ・桁数制限ありの入力フォームのコード

完成版のコードは以下になります。

(動作確認のために表示していた、不必要なアラート部分は消しております。)

function inputCheck () {
  var form = document.getElementById("form");
  var form_value = form.value;
  
  if (form_value.match(/[0-9]{1,4}/g) != form_value ) {
    form.value = '';
  }
}
<input type="tel" id="form" maxlength="4" onchange="inputCheck()" pattern="[0-9]{1,4}">
<span class="error">数値以外は入力できません。</span>
.error { display: none; }

input:invalid + .error {
  display: block;
  color: red;
}

以上、数値のみ入力可能な・桁数制限ありの入力フォームを作る方法の紹介でした。

この方法の応用で、電話番号のフォーマット以外入力できないようなフォームに制御することも可能です。

別の記事で解説します。

フォームの制作には無料で作成できる「formrun」もおすすめです。

簡単にデザイン性の高いフォームが作成できます。スパム対策や、サイト埋め込みも可能なのでとても便利です。

(このサイトの問い合わせフォームでも利用しています。)


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-,

© 2020 ウェブつく Powered by AFFINGER5