- 主な作品
制作者のオリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画
制作者のオリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画
数字を入力すべきフォームに正しく数字が入力されたかどうかを確認し、正しくなければエラーとするスクリプトです。
応用次第では、数字以外の文字列入力についても同様のスクリプトが書けるようになるでしょう。
このスクリプトは欧米語の環境ならそんなに難しくは無いのですが、日本語環境を想定した場合は全角文字対策を入れる事が望ましいでしょう。
そして、全角文字はJISコード(ISO-2022-JP), シフトJISコード, EUC日本語コード及びUTF-8コードで異なります。
ここでは、シフトJISコード環境でのフォームとさせていただきます。
以下のフォームは、八桁の会員番号入力が必須となっております。
スクリプトを実行できる環境なら、八桁の数字を入力せずに送信ボタンを押すと、エラーダイアログが開く筈です。
数字入力を確認するスクリプト「CheckNumberEnter.js」は以下のようになっております。
s_allowed='0123456789';// 半角数字(ここに入っていない文字があったらエラー)。s_allowed_zen='０１２３４５６７８９';// 全角数字(上の文字列と対応するように並べる事)。s_error='数字以外は入力出来ません！';// 不正文字のエラーメッセージ。function CheckNumberEnter() {s_len=0;i=document.forms[0].number.value;j='';// 全角文字を一文字と認識する環境。if ('あ'.length==1) {while (i!='') {k=i.substring(0,1);i=i.substring(1,i.length);// 全角数字なら半角に変換する。m=s_allowed_zen.indexOf(k); if (m>-1) k=s_allowed.substring(m,m+1);// 正しい数字か？if (s_allowed.indexOf(k)<0) { window.alert(s_error); return(false); }j+=k; ++s_len;}}// 全角文字を一文字と認識しない環境。else {while (i!='') {k=i.substring(0,1);i=i.substring(1,i.length);// 半角数字なら問題無い。if (s_allowed.indexOf(k)>-1) { j+=k; ++s_len; continue; }// 全角数字か調べ、そうなら半角に変換する。 // 文字が残っていなければエラー。if (i=='') { window.alert(s_error); return(false); }// もう一文字取り出す。k+=i.substring(0,1);i=i.substring(1,i.length);m=s_allowed_zen.indexOf(k);// 変換出来なかったらエラー。if (m<0 || (m & 1)!=0) { window.alert(s_error); return(false); }m>>=1;k=s_allowed.substring(m,m+1);j+=k; ++s_len;}}// 八桁入力されているか？document.forms[0].number.value=j;// 半角化された文字列をフォームに与える。if (s_len!=8) {window.alert('八桁で入力して下さい。');return(false);}// 正常終了。return(true);}
<form action="(略)" method="post" onsubmit="return(CheckNumberEnter());"><fieldset><legend>認証入力</legend><dl><dt>会員番号(八桁)</dt><dd><input type="text" name="number" size="16" /></dd></dl><ul><li><input type="submit" value="送信" /></li></ul></fieldset></form>
スクリプトはフォームの送信ボタンが押された時に起動します。
これは、<form>要素のonsubmit属性で実現します。
onsubmit属性は、当該<form>要素の送信手続きをイヴェントとして行なうイヴェントハンドラで、この属性値となるJAVAスクリプトが実行されます。
ここでは、CheckNumberEnter()函数を実行した結果をreturn文で返すというだけですが、その際にエラーを見出した場合はfalse値を返して送信をやめさせます。
スクリプトの処理は、会員番号入力フィールドに入力されている文字列を取り出し、
と言うものです。
以下、具体的な処理を解説して行きましょう。
スクリプト冒頭は以下のようになります。
s_allowed='0123456789';// 半角数字(ここに入っていない文字があったらエラー)。s_allowed_zen='０１２３４５６７８９';// 全角数字(上の文字列と対応するように並べる事)。s_error='数字以外は入力出来ません！';// 不正文字のエラーメッセージ。function CheckNumberEnter() {s_len=0;i=document.forms[0].number.value;j='';
今回は同じエラーメッセージが何度も出てくるので、予め変数で定義してスクリプトの冒頭に書いておきました。
カスタマイズされる場合は、ここを修正すれば良いでしょう。
続いて、フォームのボタンが押された際に呼出される函数CheckNumberEnter()の本体が始まります。
まず、文字の長さをカウントする変数s_lenを0に初期化して、続いて、変数iにてフォームの会員番号入力欄の値を取得します。
変数jは全角数字を補正したあとの入力文字列が入ります。
エラー無しで判定が終わったら、最後に、入力フォームの当該欄に補正された文字列を入れる事で、CGI側の余計な負担(文字のチェックや全角数字の変換など)を減らせると言う訳です。
続いて、入力文字の確認を行ないます。
ここでの基本的な処理は、
と言うだけのものです。
ところが、ブラウザによって日本語文字の扱いが異なっており、
と言う違いがあります(現行のブラウザは全て全角文字を一文字と見なしますが、旧いブラウザでは全角文字を二文字と見なすものがあります)。
このため、全角文字の扱いによって処理を変える必要があります。
この場合、何も考えず頭から一文字づつ取出して、それぞれが数字かどうかを判定すれば良いでしょう。
このとき、全角数字を取出した場合は半角数字に変換してしまいます。
この処理は以下のようになります。
// 全角文字を一文字と認識する環境。
if ('あ'.length==1) {
while (i!='') {
k=i.substring(0,1);
i=i.substring(1,i.length);
// 全角数字なら半角に変換する。
m=s_allowed_zen.indexOf(k); if (m>-1) k=s_allowed.substring(m,m+1);
// 正しい数字か？
if (s_allowed.indexOf(k)<0) { window.alert(s_error); return(false); }
j+=k; ++s_len;
}
}
substringメソッドで頭の一文字を切出し、元の変数iは頭の一文字を切り捨てます。
iは一文字チェックする度に文字が減らされ、最後には空文字列になります。こうする事でチェックはiが空文字列で無い間繰返すと言う事になります。s_lenに一を加え、処理後の文字列を表す変数jの後ろに取出した文字(全角数字の場合は半角数字に変換されている)を継ぎ足し、次の文字のチェックに入ります。この場合の処理は以下のようになります。
// 全角文字を一文字と認識しない環境。
else {
while (i!='') {
k=i.substring(0,1);
i=i.substring(1,i.length);
// 半角数字なら問題無い。
if (s_allowed.indexOf(k)>-1) { j+=k; ++s_len; continue; }
// 全角数字か調べ、そうなら半角に変換する。
// 文字が残っていなければエラー。
if (i=='') { window.alert(s_error); return(false); }
// もう一文字取り出す。
k+=i.substring(0,1);
i=i.substring(1,i.length);
m=s_allowed_zen.indexOf(k);
// 変換出来なかったらエラー。
if (m<0 || (m & 1)!=0) { window.alert(s_error); return(false); }
m>>=1;
k=s_allowed.substring(m,m+1);
j+=k; ++s_len;
}
}
いきなりelseで始まっていますが、これは前にある全角文字を一文字扱いする処理の冒頭で全角文字を何文字扱いするかの判定を行なっているからです。
この後の処理の流れは以下の通りです。
この場合、全角文字に関しては、前半分だけが取出されているため、全角文字の判定はこの時点では不可能です。
そこで、まず半角文字のチェックを行ないます。
とは言うものの、この時点で切出せる文字が残っていなかったら全角文字で無い＝エラーとなるので、それをチェックします。
その上で、もう一文字取出して切出した文字の後ろに継足します。
s_allowed_zen.indexOfの値が0以上であるだけでなく、偶数である事も必要です。
このため、条件式では、「(m & 1)!=0」で偶数かどうかを判定しております。
(○ & 1)!=0で、○が偶数と言う判定になります。(○ & 1)==0とします。このため、「m>>=1;」で2で割っております。
/=2」では端数が出る事があります。このスクリプトでは偶数で無いと処理されないので端数は出ませんが、整数の範囲での割り算ではこのような書き方は良く見られるものです。/=2」より「○>>=1」の方が高速です(最近のCPUではそうでも無くなりつつあるようですが…)。以上の判定を行なって、エラーが見出されなければ、入力文字は不当で無い事が分かります。
そこで、最後の処理を行ないます。
これらの処理は以下のようになります。
// 八桁入力されているか？
document.forms[0].number.value=j; // 半角化された文字列をフォームに与える。
if (s_len!=8) {
window.alert('八桁で入力して下さい。');
return(false);
}
// 正常終了。
return(true);
}
document.forms[0].number.value=j;」とする事で、フォームに補正されたデータが書き込まれます。
フォーム入力欄オブジェクトのvalueプロパティに文字列を入れると書き換えられるのは、フォームを扱うスクリプトで紹介したスクリプトにもありますが、本来はこうやって間違いを補正した結果を与えたりするのに用いるべきものです。
lengthプロパティではなく、わざわざカウント変数s_lenを用いているのは全角文字の扱いが異なるブラウザがあるためです。
return(true);」で正常終了とします。いろいろな応用が出来るでしょう。
を全角カタカナに統一する事になるでしょう。
欲を言えば、ローマ字にも対応出来ると更に良いでしょう。
こちらでフォーマットを制限しても良いのですが、制限を無くした方が親切でしょう。
そこで、エラーにはならないものの入力に反映させない文字をチェックすると言う処理を付け足せばよいでしょう。
このスクリプトをそのまま使うにしても、書きなおして使うにしても、考えておくべき事があります。
それは、ブラウザごとの全角文字の扱いの違いにどう対応するかと言う事です。
実際のところ、ネットスケープ 4.06以降のブラウザは全て日本語文字を一文字扱いしており、しかもネットスケープ 4.7より前のブラウザは殆ど残っておりませんので、そう言うブラウザは最早無視しても問題無いと思う方がいるかも知れません。
つまり、全角文字を常に一文字と判断するブラウザのみを対象とするようにしても良いのではないかと言う事です。
それでも、旧いブラウザのための処理を省略するにしても、スクリプトエラーにならないようにするなどの配慮は怠らないで欲しいものです。
このための対策として最も単純なやり方は、上記のスクリプトでの「全角文字を一文字と認識しない環境。」のelse文を以下のように書き換えてしまうと言うものです。
// 全角文字を一文字と認識しない環境。
else {
return(true);
}
つまり、全角文字を一文字と認識しない旧式の環境では、入力文字のチェックをブラウザ側では一切やらず、正常なものと見なしてしまう、すなわち、CGIでの文字判定処理にげたを預けてしまうと言う訳です。
また、全角文字を一文字と認識しない旧式のブラウザは今では入手するのが大変です。つまり、そう言う環境を手に入れられない場合は動作確認が出来ず、そんな条件でコーディングするのは却って危険でしょう。
Copyright ©平成17年-平成24年 さいたま・しらぎくさいと 版権所有
marguerite.site@gmail.com