「jQuery-Validation-Engine」を使って入力チェック (テキスト入力欄)

具体的なチェック条件の指定方法は、以下の通りです。まずは、テキスト入力欄に対するチェックを例にして、様々な条件指定方法をご紹介致します。

【文字数の指定・制限】
■最低文字数のチェック:
<input type="text" name="minsize" id="minsize" value=""
 class="validate[required,minSize[6]]">
条件に「minSize[6]」と指定すると、「最低6文字の入力」をチェックできます。入力された内容が5文字以下だと、エラーメッセージが表示されます。

■最大文字数のチェック:
<input type="text" name="maxsize" id="maxsize" value=""
 class="validate[required,maxSize[12]]">
条件に「maxSize[12]」と指定すると、「最大12文字までの入力」をチェックできます。入力された内容が13文字以上だと、エラーメッセージが表示されます。

■最低文字数と最大文字数の同時チェック:
<input type="text" name="minmax" id="minmax" value=""
 class="validate[required,minSize[5],maxSize[10]]">
複数の条件をカンマで区切って連続で指定することもできます。上記のように、最小文字数(minSize)と最大文字数(maxSize)を同時に指定すれば、「5~10文字の範囲での入力」をチェックできます。

※ここでの文字数の指定は、バイト数ではなく文字数なので、半角英字でも全角日本語でも、どちらでも1文字は1文字とカウントされます。

【文字種の制限】
■英数字のみの入力をチェック:
<input type="text" name="letnum" id="letnum" value=""
 class="validate[required,custom[onlyLetterNumber]]">
条件に「custom[onlyLetterNumber]」と指定すると、「英数字のみの入力」をチェックできます。「0~9」、「A~Z」、「a~z」以外の文字が入力されていると、エラーメッセージが表示されます。

■英字と空白のみの入力をチェック:
<input type="text" name="letsp" id="letsp" value=""
 class="validate[required,custom[onlyLetterSp]]">
条件に「custom[onlyLetterSp]」と指定すると、「英字と空白のみの入力」をチェックできます。「A~Z」、「a~z」か空白文字以外の文字が入力されていると、エラーメッセージが表示されます。

■数字と空白のみの入力をチェック:
<input type="text" name="numsp" id="numsp" value=""
 class="validate[required,custom[onlyNumberSp]]">
条件に「custom[onlyNumberSp]」と指定すると、「数字と空白のみの入力」をチェックできます。「0~9」か空白文字以外の文字が入力されていると、エラーメッセージが表示されます。

【数字・数値の制限】
■数字チェック:
<input type="text" name="number" id="number" value=""
 class="validate[required,custom[number]]">
条件に「custom[number]」と指定すると、「数字のみの入力」をチェックできます。「0~9」の文字しか入力できません。他の文字は、マイナス記号「-」や小数点記号「.」であってもエラーになります。

■整数チェック:
<input type="text" name="integer" id="integer" value=""
 class="validate[required,custom[integer]]">
条件に「custom[integer]」と指定すると、「整数のみの入力」をチェックできます。ここでは、マイナス記号を含めた「-100」なども入力できます。しかし「10.5」など小数を含むと「整数」ではないためエラーになります。

■数値の下限チェック:
<input type="text" name="minint" id="minint" value=""
 class="validate[required,custom[integer],min[-5]]">
条件に「custom[integer]」と「min[-5]」を指定すると、入力された数値が「-5」未満だった場合や、「-2.45」など整数ではなかった場合にエラーになります。

※「-7」を入力すると「-5以上の数値にして下さい」と表示され、「12.5」を入力すると「整数を入力して下さい」と表示されます。「-15.2」だと両方のエラーが表示されます。

■数値の上限チェック:
<input type="text" name="maxint" id="maxint" value=""
 class="validate[required,custom[integer],max[30]]">
条件に「custom[integer]」と「max[30]」を指定すると、入力された数値が「31」以上だった場合や、「14.5」など整数ではなかった場合にエラーになります。

【特定の入力内容のチェック】
■URLチェック:
<input type="text" name="url" id="url" value="http://"
 class="validate[required,custom[url]]">
条件に「custom[url]」と指定すると、「URLの入力」をチェックできます。このチェックでは、HTTP、HTTPS、FTPの3種類のプロトコルのみが対象です。

■メールアドレスチェック:
<input type="text" name="mail" id="mail" value=""
 class="validate[required,custom[email]]">
条件に「custom[email]」と指定すると、「メールアドレスの入力」をチェックできます。

■IPアドレスチェック:
<input type="text" name="ip" id="ip" value=""
 class="validate[required,custom[ipv4]]">
条件に「custom[ipv4]」と指定すると、「IPアドレスの入力」をチェックできます。チェックできるのは IPv4 のアドレスのみです。

■電話番号チェック:
<input type="text" name="phone" id="phone" value="
" class="validate[required,custom[phone]]">
条件に「custom[phone]」と指定すると、「電話番号の入力」をチェックできます。電話番号として使用されない文字が入っているとエラーになります。ただし、丸カッコは使えません。

【同値のチェック】
■他の入力欄と内容が同じかどうかをチェック:
入力:
<input type="password" name="password1" id="password1"
 value="" class="validate[required]">
確認:
<input type="password" name="password2" id="password2"
 value="" class="validate[required,equals[password1]]">
条件に「equals[password1]」と指定すると、「password1」というid名が割り振られた別の項目の値と、入力された内容が同じかどうかをチェックできます。主に、パスワードの入力確認の目的などに使うことになるでしょう。

【日付のチェック・制限】
■日付チェック:
<input type="text" name="date" id="date" value=""
 class="validate[required,custom[date]]">
条件に「custom[date]」と指定すると、「日付の入力」をチェックできます。(「2013/06/30」または「2013-06-30」のような形式の)日付を表す文字列以外が入力された場合には、エラーが表示されます。

■日付チェック(指定日より以前):
<input type="text" name="past" id="past" value=""
 class="validate[custom[date],past[2010/01/01]]">
条件に「custom[date]」と「past[2010/01/01]」を指定すると、「2010/01/01以前の日付の入力」をチェックできます。ここで、日付以外の文字列を入力したり、「2013-06-30」など指定日よりも後の日付を入力したりすると、エラーが表示されます。なお、指定日には「NOW」と入力することで「今日の日付より昔の日付の入力」をチェックすることもできます。

■日付チェック(指定日より後):
<input type="text" name="future" id="future" value=""
 class="validate[custom[date],future[NOW]]">
条件に「custom[date]」と「future[NOW]」を指定すると、「今日よりも後の日付の入力」をチェックできます。ここで、日付以外の文字列を入力したり、「2011-02-14」など指定日(今日)よりも前の日付を入力したりすると、エラーが表示されます。なお、「NOW」の代わりに「2012-12-24」など特定の日付を指定することもできます。

テキスト入力欄以外の複雑なチェックも可能

上記でご紹介したように、テキスト入力欄だけに関しても、細かなチェック条件を簡単に指定できます。しかし、「jQuery-Validation-Engine」でチェックできるのはテキスト入力欄だけではありません。チェックボックスやラジオボタンもチェックできます。例えば、「最大2個選択」や「『その他』項目の選択時にだけ文字を追加入力」のような、複雑なチェックも可能です。

最後に、チェックボックスやラジオボタンに関するチェック方法や、エラーメッセージを独自の内容に書き換える方法、動作サンプル等をご紹介致します。