フォームの入力値をチェック

　なぜかあまりこのようなスクリプトを配布しているサイトを見かけないので公開します。

　CGIに送信するためなどのフォームに入力された値に間違いがないかを、送信する前にチェックするスクリプトです。例えば、数値しか入力できないようにしたい場合などに有効です。

　次のようなフォームを例に挙げます。半角の英数字用(ID)のテキストボックスの名前をtext1、半角の数値用のテキストボックス(暗証番号)の名前をtext2とします。

　まず、FORMタグにonsubmit="return checkForm(this)"と追加してください。

<form action="login.cgi" onsubmit="return checkForm(this)">
<p><input type="text" name="text1" value="">：ID(半角英数字)</p>
<p><input type="text" name="text2" value="">：暗証番号</p>
<p><input type="submit" value="送信"></p>
</form>

　次に、以下のスクリプトを<head>～</head>に貼り付けてください。そしてtext1, text2はそれぞれ、チェックしたいテキストボックスなどの名前に書き換えてください。

<script type="text/javascript">
<!--
function checkForm(form){
    /* IDのチェック */
    if(!form.text1.value){// 未入力のチェック
        alert("IDが入力されていません。");
        return false;
    }
    else if(!form.text1.value.match(/^[a-z\d]+$/i)){// 半角英数字かどうか
        alert("IDには半角英数字しか使用できません。");
        return false;
    }
    /* 暗証番号のチェック */
    if(!form.text2.value){// 未入力のチェック
        alert("暗証番号が入力されていません。");
        return false;
    }
    else if(!form.text2.value.match(/^\d+$/i)){// 半角の数字かどうか
        alert("暗証番号には数値を半角で入力してください。");
        return false;
    }
    /* 誤りがなければ、真を返す */
    return true;
}
//-->
</script>

　"/^[a-z\d]+$/i"は半角英数字のみの文字列、"/^\d+$/i"は半角数字のみの文字列を示し、この条件に当てはまらない文字列であればアラートで知らせるという仕組みになっています。

　"/^[a-z\d]+$/i"や"/^\d+$/i"の部分を次に示した表のように書き換えれば、文字列チェックの方法を変えることができます。さらに細かい規則にしたい場合は、JavaScriptの正規表現について学ぶといいです。

入力可能な文字列	記述の方法
半角数字のみ	/^\d+$/
半角英数字のみ	/^[a-z\d]+$/i
半角英数字のみ(大文字は不可)	/^[a-z\d]+$/
半角英数字のみ(小文字は不可)	/^[A-Z\d]+$/
半角英数字+ハイフン(-)+アンダーバー(_)のみ	/^[a-z\d_\-]+$/
半角英字のみ	/^[a-z]+$/i
半角英字のみ(大文字は不可)	/^[a-z]+$/
半角英字のみ(小文字は不可)	/^[A-Z]+$/
半角カナ入力不可	/^[^\uff61-\uff9f]+$/
ASCIIの図形文字+半角スペースのみ	/^[\x20-\x7e]+$/
数値（負の数、小数を含む）	/^\-?([1-9]\d*\|0)(\.\d+)?$/
メールアドレス	/^[a-z\d_\-\.]+@([a-z\d_\-]+\.)+[a-z]+$/

　次のフォームは、4種類のパターンのサンプルです。それぞれのテキストボックスに、右に書いてある通りの文字列や、誤った文字列を入力してみてください。

　あと、このスクリプトを設置したからといって、サーバー側でのチェックを怠るようなことはしないでください。

　あくまで間違いを素速く発見させるためのものであり、サーバーでチェックを怠った場合、バグの原因になりかねませんから。