JavaScript DOM学習第五章フォーム概要

5948 ワード

各フォームの検出項目が違っていますので、私も万能コードをあげられません.この章で紹介したこれらの要素を使って自分の検査関数を構築する必要があります.後の一枚にもう一つの例があります.あなたも参考にしてください.
この章ではまずJavaScriptを使ってフォームの限界を検出してから、時間処理プログラムを提出して、フォーム自体の方法と属性を説明します.最後にフォーム要素にどうやってアクセスしますか?
ここにはJeff Howdenの紹介表の使用ミスと解決方法があります.Forms&JavaScript Living Together in Harmony制限はまず、ユーザーがフォームを提出した後にJavaScriptの検出コードが何をするかを知る必要があります.コードがエラーを発見したら、提出は一時停止されます.その後、正しいデータを入力するようにユーザに警告します.2、エラーやJavaScriptがない場合は、フォームの内容はサーバーに送信されます.3、サーバー側のスクリプトがエラーを発見したら、エラーメッセージを返します.この場合、ユーザーはフォームに戻り、データを書き換えて再度提出する必要があります.4、エラーが発生していない場合、サーバー側は必要な作業を完了し、感謝のメッセージを表示します.あなたが見ているように、データは提出中に二回検出されます.一回はJavaScriptで一回はサービスです.サーバーテストはいつも可能で、信頼できるものです.JavaScriptの検出は、ユーザがJavaScript機能を起動する時にのみ有効となります.サービス端末は常に信頼性があり、ユーザが使用するブラウザとは関係がないです.なぜJavaScript検査が必要ですか?JavaScript検査はサーバー側で検出された有効な補充です.彼はデータをサーバー側に送る時にまず一回検査します.このように、ユーザーは後退ボタンを使ってフォームの内容を修正しなくてもいいです.それは大変です.また、間違った内容を探すのも大変です.したがって、JavaScriptの検出は、サーバー側の検出よりもユーザの使用体験に大きな助けを与えます.したがって、JavaScriptは完全な検査システムではないですが、サーバー側の補充とユーザーの友好性としてはいい選択です.ですから、この二つの検査機構を使って、ユーザーの使用体験要求を満たしています.また、プログラムの安全性を保証しています.onsubmitはJavaScriptを使ってフォームを検出する時、最初のことはonsubmitを作成するイベントハンドラです.このプログラムはユーザーがフォームを提出する時に実行されます.このプログラムは、いくつかのフィールドに値があるかどうかを検出します.チェックボックスは少なくとも一つを選択していますか?または他の項目をチェックしてください.コードは以下の通りです

checkscript()はこのプログラムの名前です.このコードはtrueまたはfalseを返す必要があります.戻ってきたのがfalseであれば、フォームは提出されず、trueに戻ってもfalseコードに戻っても動作を停止します.
したがって生成されたコードは以下の通りです.

 
  
function checkscript() { 
  
    if (some value is/is not something) { 
  
        // something is wrong 
  
        alert('alert user of problem'); 
  
        return false; 
  
    } 
  
    else if (another value is/is not something) { 
  
        // something else is wrong 
  
        alert('alert user of problem'); 
  
        return false; 
  
    } 
  
    // If the script makes it to here, everything is OK, 
  
    // so you can submit the form 
  
    return true; 
  
}

もちろんこのコードは複雑に書いてもいいです.もし多くのフォーム項目を検出する必要があるならば、あるいは多くの単一選択枠を積み重ねてもいいです.基本的な考え方はこのようです.フォーム内の各要素を遍歴して、誤りを見つけたらfalseに戻り、コードが停止してもフォームは提出されません.
間違ったことを発見したら、ユーザーに注意するべきです.警告枠を使ってもいいですが、今日の大多数の方法はエラーメッセージを生成してエラーエントリの後に追加することです.
最後のところにのみ、すべての要素をチェックしました.そして、エラーが発見されませんでした.trueに戻ります.フォームは提出されます.
フォームの方法と属性
JavaScriptは処理フォームに対してまだいくつかの内部建築の方法と属性があります.その中の三つが重要です.
submit()方法で書類を提出してもいいです.ページの最初のフォームを提出してもいいです.


   document.forms[0].submit() 
  
       JavaScript       ，               。 
  
    ，   ： 
  
[code] document.forms[0].reset() 
  
   ，     ，         ，                   。 
  
          ACTION ： 
  
[code] document.forms[0].action = 'the_other_script.pl'; 
  
                              。 
  
       
  
                                。          Level 0 DOM     。     ： 
  
[code] document.forms[number].elements[number] 
  
       ，JavaScript      forms              。         forms[0]，     forms[1]  。 
  
JavaScript                   。       elements[0]，     elements[1]。   input，select，textarea      。 
  
    ，            name   。 HTML ，          ，  ： 
  
[code]  2  3  4  5  
  
                  ： 
  
[code] document.personal.name 2 document.personal.address 3 document.personal.city 
  
  name                               ，        。        city     document.forms[0].elements[2]，                  document.forms[0].element[0]，          。 
  
     
  
  ，                          。                  。 
  
                        。             user_input   。  ，          。 
  
Texts，textarea       
  
    ： 
  
[code] user_input = document.forms[0].text.value

テキストボックスまたはtextareaまたは隠しフィールドのnameです.value属性はこれらの要素のテキストを与え、user_に格納します.inputにあります
直接書いてもいいです.


   document.forms[0].text.value = 'The new value';

Select Boxes
これも簡単です


   user_input = document.forms[0].select.value;

彼の選択項目を変更するには、selectedIndexを修正しなければなりません.


   document.forms[0].select.selectedIndex = 2;

今は三つ目のオプションが選択されました.
古いブラウザ
古いブラウザの中でselect boxsはvalue属性がありません.

 
  
var selectBox = document.forms[0].select; 
  
user_input = selectBox.options[selectBox.selectedIndex].value

まずユーザーが選択した項目を探し出す.document.forms[0].select.selectedIndexは選択項目の番号を与えます.JavaScriptはすでにselect boxsオプションをすべて含むオプティクス配列を作成しました.この配列によってユーザーが何を選択したかが分かり、user_に保存されます.inputの中です
checkboxs
checkboxsはちょっと違っています.彼の値はすでに分かりましたが、ユーザーが彼を選んだかどうかは分かります.checked属性は教えてくれます.彼はtrueとfalseの二つの値を持っています.
では、

 
  
if (document.forms[0].checkbox.checked) { 
  
user_input = document.forms[0].checkbox.name 
  
}

チェックボックスの名前です.チェックボックスが選択されたら、私たちは名前を得て(あなたも値を選択できます)、アメリカに伝えます.input
チェックボックスを選択します.


   document.forms[0].checkbox.checked = true

単一選択ボックス
残念なことに、どのシングルボックスが選ばれたか、すぐに見つけられません.遍歴した後でcheced属性がtrueであることを検索するしかありません.

 
  
for (i=0;iif (document.forms[0].radios[i].checked) { 
  
user_input = document.forms[0].radios[i].value; 
  
} 
  
}

ラジオズはこのグループのシングル枠の名前です.
Dcument.forms[0].radiosはすべての単一選択枠を含む配列であり、サイクル検出はcheckedの属性がtrueであるかどうかを確認する.もしそうであれば、アメリカを伝えます.input
document.forms[0].radios.lengthは、すべての単一選択ボックスの数を返します.
単一選択ボックスを選択すると、そのcheckの値はtrueに設定できます.


   document.forms[0].radios[i].checked = true;

翻訳住所:http://www.quirksmode.org/js/forms.html
転載は以下の情報を保留してください.
北玉(tw:@rehawk)

ip_vs分析の実現(10)