D. 最低文字数を指定する書き方
次に、指定した文字数以上の入力を求めたい場合のJavaScriptソースをご紹介いたします。本記事で用意したサンプルページ「JavaScript入力チェック例」では、「1. お名前」と「4. 住所」と「8. コメント」欄に適用しています。■JavaScriptソース：
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// -----------------------
// 2文字以上の入力チェック
// -----------------------
var targets = document.getElementsByClassName('chars2');
for (var i=0 ; i<targets.length ; i++) {
// ▼文字が入力されたタイミングでチェックする：
targets[i].oninput = function () {
var alertelement = this.parentNode.getElementsByClassName('alertarea');
if( this.value.trim().length < 2 ) {
// ▼空白を除いた入力文字数が2文字よりも少なければ
if( alertelement[0] ) { alertelement[0].innerHTML = "入力文字数が少なすぎます。2文字以上を入力して下さい。"; }
this.style.border = "2px solid red";
}
else {
// ▼何も入力がないか、または指定文字しかないなら
if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
this.style.border = "1px solid black";
}
}
}
// ----------
// ▲ここまで
// ----------
});
</script>
上記のソースをそのままHTMLファイルへコピー＆ペーストすれば使えます。カスタマイズしたい際に書き換える場所は太字で示してあります。このJavaScriptでは「class="chars2"」が指定された入力欄を対象にして、入力チェックを実行するよう記述してあります。基本的なソースの構造は3ページ目でご紹介した「数字とハイフン記号だけの入力に制限する書き方」と同じなので説明は省略し、それ以外の部分についてだけ解説しておきます。
■入力文字数の判定
ここでは正規表現は使っていません。
if( this.value.trim().length < 2 ) {
上記の行で、対象のテキスト入力欄に入力された内容(＝value属性の値)の文字数を調べています。ここでは、空白文字だけが入力されている場合は文字としてカウントしないよう、trimメソッドを使っています。「this.value.trim()」と記述することで、入力内容の前後に含まれる空白文字を取り除けます。さらに「this.value.trim().length」と記述することで、前後の空白文字を取り除いた後の文字数を得ています。上記では、文字数と数値「2」を比較することで、入力内容が2文字未満の場合にエラーメッセージを表示させています。自由な数値を指定して使って下さい。
(例) 文字種の指定と最低文字数の指定を同時にする書き方
上記でご紹介した最低文字数の指定方法と、4ページ目でご紹介した英数字だけの限定方法とを合わせて、「英数字のみで6文字以上」という入力制限を施すには、以下のように記述できます。なお、サンプルページ「JavaScript入力チェック例」では、「7. PW」欄に適用しています。■JavaScriptソース：
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// -------------------------------
// 6文字以上の英数字の入力チェック
// -------------------------------
var targets = document.getElementsByClassName('alpha6');
for (var i=0 ; i<targets.length ; i++) {
// ▼文字が入力されたタイミングでチェックする：
targets[i].oninput = function () {
var alertelement = this.parentNode.getElementsByClassName('alertarea');
// ★条件1：英数字以外の文字があるかどうかを判断（1文字以上入力されている場合）
if( ( this.value != '') && ( this.value.match( /[^a-zA-Z0-9]/ )) ) {
// ▼英数字以外の文字があれば
if( alertelement[0] ) { alertelement[0].innerHTML = "入力には英数字だけが使えます。"; }
this.style.border = "2px solid red";
}
// ★条件2：空白を除いた入力文字数が6文字よりも少ないかどうかを判断
else if( this.value.length < 6 ) {
// ▼入力文字数が6文字よりも少なければ
if( alertelement[0] ) { alertelement[0].innerHTML = "入力文字数が少なすぎます。英数字で6文字以上を入力して下さい。"; }
this.style.border = "2px solid orange";
}
else {
// ▼英数字が6文字以上あれば
if( alertelement[0] ) { alertelement[0].innerHTML = ""; }
this.style.border = "1px solid black";
}
}
}
// ----------
// ▲ここまで
// ----------
});
</script>
上記のソースでは、まずは「★条件1」のif文で英数字以外の文字があるかどうかを判別し、あればエラーメッセージを表示して入力枠を赤色にします。次に「★条件2」のelse if文で6文字以上あるかどうかを判別し、なければエラーメッセージを表示して入力枠を橙色にします。このように、else if文を使って判定条件を加えていく形なら、判定条件に合ったエラーメッセージや装飾をその都度表示して、複合的な入力制限ができます。
最後に、送信直前に一括チェックして、送信を中止するかどうか判断する方法をご紹介いたします。
