【ホームページ作成】JavaScriptで入力文字制限！(入力チェック)

フォームから入力される文字を事前にチェック

入力フォームを利用する場面はたくさんありますね。 フリーのアンケートCGIやメール送信CGIを利用されている方々も多いでしょう。

そんなとき、フォームから入力される文字が要求通りの規則に沿った文字かどうかチェックしたい、と思うことはありませんか？要求している内容と全く異なる内容が入力されていて困ったことはありませんか？

例えば、「半角英数しか入力してほしくない欄に他の文字が入力されていないか」や、「電話番号を入力してほしい欄に、全く異なる文字が入っていないか」……などです。

※CGI側で入力文字種をチェックしてくれるなら構わないのですが、メール送信CGIなどを利用してアンケートを採りたい場合や注文を取りたい場合など、 独自の項目に独自の制約を設けたいこともあるでしょう。また、CGI側で入力文字種のチェックが行われる場合でも、JavaScriptで送信前にチェックする方が、無駄なページ移動が発生せず、スマートに使えるフォームになります。

JavaScriptだけでチェック

CGIを使わなくても、JavaScriptを使うだけで入力チェックと入力制限を行うことができます。そこで今回は、フォームに望まない文字が入力されていないかどうかを手軽にチェックする方法をご紹介致しましょう。

下記のフォームは、「半角英数字」のみを受け付けるフォームです。
試しに、全角文字（日本語など）を入力してみて下さい。隣のボタンをクリックしたときに、エラーメッセージが表示されるはずです。

この方法を使えば、「名前のふりがな」項目に、ひらがな以外の文字が入力されるのを防いだり、 「電話番号」項目に、数字とハイフン以外の文字が入力されるのを防いだりできます。

この記事では、「名前のふりがな」「英語名」「年齢」の3項目を例にして、入力内容をチェックする方法をご紹介致します。 もちろん、チェック内容さえ書き換えれば、これら以外にも様々な入力チェックが可能です。

JavaScriptと正規表現でチェック

今回ご紹介する方法では、JavaScriptでフォームに入力された内容を受け取って、正規表現を用いてチェックします。 具体的な方法については、次のページでご紹介致しましょう。

JavaScriptと正規表現でチェックする方法は… →