JavaScript DOM学習第6章フォームの例

フォーム・インスタンス
これはフォームの実力です.ここで小さな問題があります.私のサーバーは現在サポートされていないので、フォームはコミットできません.私はあなたの入力を印刷してfalseに戻ります.そうすれば、フォームはコミットされません.
onSubmitのコードは2つのことをしました.4つのテキストボックスにデータを記入したかどうかを確認し、すべての要素を接続して下のテキスト領域に印刷します.
原文には実例があります.子供靴が必要です.足を運んでください.私は引っ越しません.
テキスト領域の検出
このコードは、ユーザーがテキストボックスにコンテンツを入力したかどうかを検出します.彼はチェックボックスとラジオボックスを無視しますが、ユーザーにselect boxを選択するように注意します.選択しても、彼の値はいつもnullなので注意します.テキストセグメントを検出するためにのみ使用する場合は、このコードを使用したほうがいいです.

 
  
function checkscript() { 
  
    for (i=0;i<4;i++) { 
  
        box = document.example.elements[i]; 
  
        if (!box.value) { 
  
            alert('You haven\'t filled in ' + box.name + '!'); 
  
            box.focus() 
  
            return false; 
  
        } 
  
    } 
  
    return true; 
  
} 
  
 
 

この例では、0-3番の要素をチェックしたいので、変数iを設定します.名前ではなく数字を使っていることに気づきます.これが数字がnameより優れている例です.

   for (i=0;i<4;i++) { 
 

次に、現在の要素にアクセスするための変数boxを作成します.作成しなければdocumentが必要です.example.Elements[i]は何度も書きましたが、私は書くのがおっくうです.

   box = document.example.elements[i]; 
 

このテキストボックスの値が空の場合は、次の操作が必要です.

   if (!box.value) { 
 

まず、テキストボックスのnameを使用します.名前がはっきりしていれば、ユーザーもどのテキストボックスが問題を除いているのか理解しやすいです.

   alert('You haven\'t filled in ' + box.name + '!'); 
 

付加サービスとして、問題のあるテキストボックスに焦点を当て、ユーザーがすぐに記入できるようにしました.すべてのブラウザがサポートされているため、検出する必要はありません.

   box.focus() 
 

そしてfalseに戻ります.コードは実行を停止し、フォームもコミットされません.ユーザー入力待ち.

   return false; 
 

すべてのテキストボックスに記入した場合は、trueを返して、すべてが正常であることを示します.関数が停止し、フォームがコミットされます.

 
  
} 
  
} 
  
return true; 
  
 
 

翻訳先:http://www.quirksmode.org/js/formex.html
転載は以下の情報を保持してください
作者:北玉(tw:@rehawk)