Form に関するTips


・Formのフォーマットチェック

NN2Unknown NN3OK NN4OK MozillaOK IE3Unknown IE4OK

Form を使用して入力を行う場合には入力ミスや操作ミスはつきものです。

当然、入力ミスはチェックするのですがサーバ側の CGI で入力チェックを行うと、 回線の状況やサーバ側の負荷状況により、ユーザに結構な精神的負担を伴うことになるので、 なるべくクライアント側でチェックしてあげたいものです。

そこで、JavaScript の登場となるのですが、 Form の入力チェックは通常以下の項目になるのではないでしょうか。

然し、JavaScript でチェックできるものには限度があります。

上記項目の中で、「文字コードのチェック」と「文字の自動変換」は JavaScript で記述するには結構無理があり、完全に行うことはまず不可能でしょう。 このような項目は CGI で実行した方が遥かに簡単です。

このように JavaScript で不得手な項目はあっさりあきらめて、 ドキュメント上の注意事項などに記述する程度に止めておき、 CGI側で行うようにするのが現実的でしょう。

ここでは、上記項目の中で最初の2つについて考えてみましょう。


入力値チェック関数

テキスト入力域に入力されたデータのチェックは色々と考えられますが基本的には、 データの有無、構成文字列、文字列のパターンなどの組合せが殆どでしょう。

また、チェックした結果間違っていたらその旨メッセージを表示し、 必要なら該当入力域に入力フォーカスを当てます。

入力域が空白かどうかを調べる関数の例を示します。


// 空白チェック関数
function checkNull(obj,msg){
  if(obj.value==''){
    alert(msg+'の入力は必須です');
    obj.focus();
    return false;
  }
  return true;
}

この関数は obj で与えた入力オブジェクトの値が空白かどうかをチェックし、 もし空白ならメッセージを表示するとともに該当入力域に入力フォーカスを当てる関数の例です。

関数の呼出形式は以下の通りです。

checkNull(obj,msg);
obj    : テキスト入力域のオブジェクト
msg    : テキスト入力域の入力域名称
戻り値 : 空白の場合 false, 空白でない場合 true

もし、入力域が数字列であることをチェックするなら


// 数字列のチェック
function checkNumber(num){
  for(var i=0;i<num.length;i++){
    if(isNaN(parseInt(num.charAt(i),10))) return 0;
  }
  if(parseInt(num,10)<=0) return 0;
  return num.length;
}

checkNumber関数の呼出形式は以下の通りです

checkNumber(num)
num    : チェックする文字列
戻り値 : 数字列の場合 num の文字数, 数字列でない場合 0

これらの関数では実際には充分とは言えません。

電話番号や郵便番号など特定の入力域に合わせたフォーマットのチェックが必要な場合もあります。 そこで、よくありそうな項目に関するチェック関数の例を示しておきましょう


// フォーマットエラーメッセージ
function alertMsg(msg,obj){
    alert(msg+'の形式が間違っています');
    obj.focus();
}
// 郵便番号チェック( 999 または 999-9999 )
function checkZipCode(obj,retnull){
  var retval=true;
  var value=obj.value;
  if (value=='') retval=retnull; // 無入力時
  else {
    var del=value.indexOf('-');
    if (del==-1)
      retval=(value.length==3?(checkNumber(value)>0):false);
    else if (del!=3 || (value.length-del)!=5)
      retval=false;
    else if (checkNumber(value.substring(0,del))==0 ||
             checkNumber(value.substring(del+1))==0){
      retval=false;
    }
  }
  if(retval==false) alertMsg('郵便番号',obj);
  return retval;
}
// メールアドレスチェック( aaa@aaa )
function checkEMail(obj,retnull){
  var retval=true;
  var value =obj.value;
  if (value=='') retval=retnull; // 無入力時
  else {
    var del=value.indexOf('@');
    retval = (del>0 && (value.length-del)>1
           && value.substring(del+1).indexOf('@')==-1);
  }
  if(retval==false)
    alertMsg('E-Mailアドレス',obj);
  return retval;
}
// 電話番号チェック( 999-999-9999 )
function checkTel(obj,retnull){
  var retval=true;
  var value =obj.value;
  if (value=='') retval=retnull; // 無入力時
  else {
    var st=0,del=value.indexOf('-'),s1=0,s2=0,s3=0;
    if(del<=st) retval=false;
    else if ((s1=checkNumber(value.substring(st,del)))==0)
      retval=false;
    else {
      st=del+1; del=value.indexOf('-',st);
      if(del<=st || del==(value.length-1)) retval=false;
      else if ((s2=checkNumber(value.substring(st,del)))==0 ||
               (s3=checkNumber(value.substring(del+1)))==0)
        retval=false;
    }
    if(retval && (s1+s2+s3)!=10) retval=false;
  }
  if (retval==false)
    alertMsg('連絡先電話番号',obj);
  return retval;
}

checkZipCode 関数は郵便番号チェック関数で、 「999」または「999-9999」の形式で入力されているかをチェックします。

checkZipCode(obj,retnull)
obj     : テキスト入力域のオブジェクト
retnull : 空白の場合の戻り値
戻り値  : 有効の場合 true, 無効の場合 false

checkEMail 関数はメールアドレスのチェック用関数で、 「aaa@aaa」の形式であるかをチェックします。

checkEMail(obj,retnull)
obj     : テキスト入力域のオブジェクト
retnull : 空白の場合の戻り値
戻り値  : 有効の場合 true, 無効の場合 false

checkTel 関数は電話番号のチェック関数で、 「999-999-9999」のように入力された文字列が「-」で区切られ、 全体の桁数が 10桁であるかをチェックします。

checkTel(obj,retnull)
obj     : テキスト入力域のオブジェクト
retnull : 空白の場合の戻り値
戻り値  : 有効の場合 true, 無効の場合 false

実際には、これらの関数をフォームの submit時等に呼び出して使用します。


使い方

前述の関数を使用して onSubmit時にフォーマットチェックする例を以下に挙げます。

<script language="JavaScript"><!--
    :
function totalCheck(card){
  if(!checkNull(card.kfamily,   '姓名'))   return false;
      :
  if(!checkZipCode(card.zipcode, true ))   return false;
  if(card.company.value!='')
    if(!checkNull(card.department,'所属')) return false;
  if(!checkEMail(card.email,     true ))   return false;
  if(!checkTel(card.telephone,   false))   return false;
  return true;
}
// --></script>
</head>
<body>
    :
<form name="card" ...
      onSubmit="return totalCheck(this);">
姓( 漢字 ):<input type="text" name="kfamily" ...>
    :
</form>

実際のサンプルはこちら


注意事項

caution
フォーマットチェックするタイミングはここで採り上げた onSubmit時以外には onChange, onBlur などのイベントが考えられますが、 これらのイベントは発生順がブラウザ依存になります。

つまり、このタイミングで間違った入力域にフォーカスを当てようとしても 次の入力域に移動してしまう場合があります。

caution
Mac版のブラウザにはテキストに入力した文字列が全て日本語である場合、 入力された文字列を正しく処理できないものがあるようです。

ここで紹介しているスクリプトは、それらを考慮していませんので 注意して下さい。
#> Macを持っていないので紹介できません(笑)。

caution
checkEMail関数では、少なくとも「@」文字が含まれる文字列を 正常に受け付けるようにしていますが、 特定の文字列で構成されているかをチェックしたい場合も考えられます。


Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.