この記事では、数値のみ入力可能な、桁数制限のありの入力フォームを作る方法を紹介します。
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"とし、４桁以上が入力できないようにしています。
// 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}"とすることによって、４桁以内の数値以外が入力された際に、エラーが出るようになります。
ただし、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;
}以上、数値のみ入力可能な・桁数制限ありの入力フォームを作る方法の紹介でした。
この方法の応用で、電話番号のフォーマット以外入力できないようなフォームに制御することも可能です。
別の記事で解説します。
もおすすめです。