• HOME > 
  • JavaScript > 
  • JSで入力値が英数字や半角かどうか即時文字チェックする【ma...

JSで入力値が英数字や半角かどうか即時文字チェックする【matchメソッド】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

JSによるテキストボックスの入力チェック

JavaScriptでフォームの入力チェックを行う状況があったので、そのとき調べて学んだ内容を備忘録としてまとめます。

HTMLだけでもinputの「pattern属性」を使って入力制限(バリデーション)を設定できますが、基本的にはフォームの送信が行われないとチェックは実行されません。

また、パターンで指定した以外の文字が含まれていると送信を完了させることができないため、例えば「半角数字以外も受け付けるけれど、半角数字以外が入力されたら一応ユーザーに対して確認メッセージを出しておきたい」という場合に使用できません。

今回、下図のように入力された値の即時チェック機能が必要だったので、JavaScriptのmatchメソッドを使って実装しました。

テキストボックスの入力内容の即時チェックの例

matchメソッドについて

JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。

  • 一致するものが見つかった場合は、位置などの情報を配列にして返します。
  • 一致する部分が見つからない場合は、null を返します。

下記のように引数に検索したい文字を正規表現を使って渡して使用します。

matchメソッドの書き方

文字列中で最初に条件にマッチしたものの情報が以下のような配列に入って返ってきます。

['a', index: 3, input: '123a4b', groups: undefined]

matchメソッドによるテキストボックスの即時チェック

下記は冒頭の入力された値の即時チェック機能のサンプルコードです。テキストボックスに半角数字以外が入力されたらメッセージが表示されます。

まずはHTMLでテキストボックスを用意します。

ユーザーが文字を入力するたびにチェックを行いたいのでテキストボックスに「onkeyup属性」を設定してJavaScriptの関数を呼び出しています。

onkeyup属性についてはこちらのページにまとめていますのでよろしければご覧ください。

HTML

<input type="text" id="test" onkeyup="checkMatch(this)" placeholder="半角数字のみ">
<p><span id="res"></span></p>

1行目テキストボックスのonkeyup属性を使って、キー入力のたびにチェック処理を行います。

2行目メッセージを表示する場所を用意しておきます。

つぎにJavaScriptです。

JavaScript

function checkMatch(event){
    var text = event.value;
    var check = text.match("[^0-9]");
    var res = document.getElementById("res");
    if(check !== null){    
        res.innerText = "※「" + (check["index"] + 1) + "」文字目に「"+ check[0] +"」が含まれています。";
    }else{
        res.innerText = "";
    }
}

2行目「event.value」でテキストに入力された値を取得します。

3行目matchメソッドを使って入力された値に特定の文字が含まれるかチェックします。半角数字以外が入力されたかどうかを判定したいので正規表現で「^0-9」と書きます。「^」は正規表現のメタ文字で「以外」を表します。

5行目~条件分岐でメッセージを表示させます。戻り値がnullでない時は、返された配列から「文字列中の何番目」の「何という文字」がマッチしたかを取得してメッセージとして表示します。

まとめ

以上が、JavaScriptのmatchメソッドで入力値が英数字や半角かどうかを即時文字チェックする方法です。

正直matchメソッドよりも正規表現自体を理解する方が難しく、私も勉強途中なので必要なときは毎回調べながら実装しています。

広告
広告

関連する記事

サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。