コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptフォーム処理実装コード_基礎知識

JavaScriptフォーム処理実装コード_基礎知識

WBOY
リリース： 2016-05-16 16:04:26
オリジナル
1244 人が閲覧しました

一形式紹介

HTML では、フォームは

要素によって表されますが、JavaScript では、フォームは HTMLFormElement タイプに対応します。

//HTMLFormElement は HTMLElement を継承するため、HTML 要素のデフォルト属性を持ち、独自の属性とメソッドも持ちます。


HTMLFormElement のプロパティとメソッド
属性またはメソッドの説明 acceptCharset サーバーが処理できる文字セット;
アクションはリクエストされた URL を受け入れます;
要素 フォーム内のすべてのコントロールのコレクション;
enctype 要求されたエンコード タイプ;
length フォーム内のコントロールの数;
Method 送信する HTTP リクエストのタイプ。通常は 'get' または 'post';
name フォームの名前;
リクエストの送信とレスポンスの受信に使用されるターゲット ウィンドウ名;
reset() はすべてのフォームをリセットします;
submit() フォームを送信します;

1. フォーム を取得します。
document.getElementById('myForm') // ID を使用して document.getElementsByTagName('form')[0]; // フォーム要素コレクションの最初の要素を取得するために使用します; document.forms[0] // フォームの数値添字を使用して要素を取得します;
document.forms['myForm'] // フォーム名の添字を使用して要素を取得します;

2. フォームを送信します

(1). イベント オブジェクトを使用すると、送信イベントのデフォルトの動作である、データを含む指定されたページにジャンプすることを防ぐことができます。

コードをコピーします コードは次のとおりです: addEvent(fm,'submit',function(evt){
preDef(evt);
});



(2) submit() メソッドを使用して送信イベントのトリガーをカスタマイズできます。つまり、送信するために送信ボタンをクリックする必要はありません。

コードをコピーします

コードは次のとおりです: If(e.ctrlKey && e.keyCode ==13){                                                                                                                                                                                               }
// PS: フォーム内で name="submit" や id="submit" などの名前を使用しないようにしてください。これは submit() メソッドと競合し、送信に失敗します。


(3)。提出を繰り返します
。 // データがサーバーに送信されると、遅延が発生し、長時間反映されないため、ユーザーは送信をクリックし続けることになります。
// その結果、多くの同じリクエストが繰り返し送信されるか、エラーが発生するか、同じ情報が複数のデータベースに書き込まれます。

コードをコピー


コードは次のとおりです:

AddEvent(fm,'submit',function(evt){ // サーバー遅延をシミュレートします; preDef(evt); Settimeout (function () {// サーバーに処理が送信される 3 秒前; fm.submit(); },3000);
});

// 重複した提出計画を解決します
// 最初のタイプ: 送信直後にクリック ボタンを無効にします
Document.getElementById('sub').disabled = true // ボタンを無効にします;
// 2 番目のタイプ: 送信後、後続のフォーム送信操作をキャンセルします。
var flag = false var flag = false; // リスニング変数を設定します;
if(flag == true)return; // 存在する場合は終了イベントを返します; flag = true; // それ以外の場合は、リスニング変数の値を変更する必要があります。




3. フォームをリセットします



4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合;
    fm.elements[0];                                     // 获取第一个表单字段元素;
    fm.elements['user'];                                // 获取name值是user的表单字段元素;
    fm.elements.length;                                 // 获取所有表单字段的数量;

(1).共有的表单字段属性
// 除了

元素之外,所有表单字段都拥有相同的一组属性;
属性                     说明
disabled         布尔值,表示当前字段是否被禁用;
form             指向当前字段所属表单的指针,只读;
name             当前字段的名称;
readOnly         布尔值,表示当前字段是否只读;
tabIndex         表示当前字段的切换;
type             当前字段的类型;
value            当前字段的值;
    fm.elements[0].value;                               // 获取和设置value;
    fm.elements[0].disabled = true;                     // 禁用当前字段;

(2).共有的表单字段方法
方法                     说明
focus()          将焦点定位到表单字段里;
blur()           从元素中将焦点移走;

(3).共有的表单字段事件


事件名                     说明
blur             当字段失去焦点时触发;
change           对于和