ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

JavaScriptで入力チェック・文字を入力制限する方法(4ページ目)

JavaScriptで入力チェック・文字を入力制限する方法を解説。メールアドレスや日付のように入力文字数や文字種を制限したいフォームでは、リアルタイムにエラー表示できると便利。正規表現などを使う入力チェックの書き方をサンプルと共にご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

B. 英字と特定の記号だけの入力に制限する書き方

次に、英字と特定の記号だけの入力を求めたい場合のJavaScriptソースをご紹介いたします。本記事で用意したサンプルページ「JavaScript入力チェック例」では、「6. ID」欄に適用しています。

JavaScriptソース:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {

  // --------------------------------------------
  // ▼英字と特定の記号の入力チェック用スクリプト
  // --------------------------------------------
  var targets = document.getElementsByClassName('alpha');
  for (var i=0 ; i<targets.length ; i++) {
    // ▼文字が入力されたタイミングでチェックする:
    targets[i].oninput = function () {
      var alertelement = this.parentNode.getElementsByClassName('alertarea');
      if( ( this.value != '') && ( this.value.match( /[^a-zA-Z_!#%&]/ )) ) {
        // ▼何か入力があって、指定以外の文字があれば
        if( alertelement[0] ) { alertelement[0].innerHTML = '入力には、英字と記号「_!#$%&」だけが使えます。'; }
        this.style.border = "2px solid red";
      }
      else {
        // ▼何も入力がないか、または指定文字しかないなら
        if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
        this.style.border = "1px solid black";
      }
    }
  }
  // ----------
  // ▲ここまで
  // ----------

});
</script>
上記のソースをそのままHTMLファイルへコピー&ペーストすれば使えます。カスタマイズしたい際に書き換える場所は太字で示してあります。このJavaScriptでは「class="alpha"」が指定された入力欄を対象にして、入力チェックを実行するよう記述してあります。基本的なソースの構造は前ページでご紹介した「数字とハイフン記号だけの入力に制限する書き方」と同じなので説明は省略し、正規表現の部分についてだけ解説しておきます。

上記の正規表現について
ここで使用している正規表現は「/[^a-zA-Z_!#%&]/」です。これは、アルファベット小文字(a~z)、アルファベット大文字(A~Z)、記号5つ(_ ! # % &)以外の文字がある場合を示しています。ここに含まれている文字以外が入力された場合に、エラーメッセージを表示します。

もし、英数字とアンダーバー「_」だけを入力可能にしたいなら以下のように書けます。
this.value.match( /[^\w]/ )
「\w」はアルファベット小文字(a~z)・アルファベット大文字(A~Z)・数字(0~9)・アンダーバー「_」だけを表す特殊文字です。「/[^a-zA-Z0-9_]/」と書いても同じ意味です。

もし、アルファベット大文字と数字だけを入力可能にしたいなら以下のように書きます。
this.value.match( /[^A-Z0-9]/ )
前ページでご紹介したように、数字の10文字は「\d」という特殊文字で表せますから、上記は「/[^A-Z\d]/」と書いても同じ意味です。

※上記のJavaScriptだけでは、ユーザが「送信」ボタンを押した際にエラーがあっても送信処理を中断はできません。エラーがある場合に送信処理を中止する方法は、本記事の最後でご紹介いたします。

次に、ひらがな・カタカナだけの入力に制限する書き方を見てみましょう。
  • 前のページへ
  • 1
  • 3
  • 4
  • 5
  • 7
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます