コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptフォームスクリプトの詳細例

JavaScriptフォームスクリプトの詳細例

黄舟
リリース： 2017-10-18 10:27:39
オリジナル
1445 人が閲覧しました

以下のエディターは、JavaScript ベースのフォーム スクリプトを提供します (詳細な説明)。編集者はこれがとても良いと思ったので、参考として共有します。編集者をフォローして一緒に見てみましょう

フォームとは？

フォームには 3 つの基本コンポーネントがあります: フォーム タグ: これには、フォーム データの処理に使用される CGI プログラムの URL と、データをサーバーに送信するためのメソッドが含まれます。 フォームフィールド: テキストボックス、パスワードボックス、隠しフィールド、複数行テキストボックス、チェックボックス、ラジオボタンボックス、ドロップダウン選択ボックス、ファイルアップロードボックスなどが含まれます。 フォーム ボタン: 送信ボタン、リセット ボタン、および一般ボタンが含まれます。フォーム ボタンは、サーバー上の CGI スクリプトにデータを転送したり、入力をキャンセルしたりするために使用することもできます。

JavaScript とフォームの関係: JS の最初の適用は、フォーム処理の責任をサーバーと共有し、サーバーへの依存を解消することでした。Web と JavaScript は大きく進歩しましたが、Web フォームはまだ用途に使用されていません。多くの一般的なタスクを提供するため、多くの開発者はフォームを検証するときに JavaScript を使用するだけでなく、一部の標準フォーム コントロールのデフォルトの動作を強化することもできます。

1.フォームの基礎知識

HTMLではフォームはformタグで構成されており、HTMLFormElement型はHTMLElement型を継承するため、デフォルトは同じです。他の Element 要素と同様の属性があり、独自のプロパティとメソッドもあります。

acceptCharset: HTML の accept-charset 機能に相当する文字セット。

action: リクエストされた URL を受け入れます。HTML の action 属性に相当します。

要素: フォーム内のすべてのコントロールのコレクション (HTMLCollection)。

enctype: 要求されたエンコーディング タイプ。HTML の enctype 機能に相当します。

length: フォーム内のコントロールの数。

method: 送信される HTTP リクエストのタイプ。通常は、HTML のメソッド属性に相当する「get」または「post」です。

name: フォームの名前。HTML の name 属性に相当します。

reset(): すべてのフォームフィールドをデフォルト値にリセットします。

submit(): フォームを送信します。

target: HTML の target 属性に相当する、リクエストの送信と応答の受信に使用されるウィンドウの名前。

フォーム要素を取得するメソッドは次のとおりです: var form=document.getElementById('form1'); //id によってフォーム要素を取得します

var firstForm=document.forms[0]; //document.forms を使用します。ページ内のフォーム要素、インデックス値 '0' を通じて最初のフォーム要素を取得します

var form2=document.forms['form2']; // document.forms を通じてページ内のすべてのフォーム要素を取得します、特定のフォーム要素を取得しますform 要素を名前、値で指定します。

フォームを送信します: 


　<!-- 通用提交按钮 -->
　<input type="submit" value="Submit Form">
　<!-- 自定义提交按钮 -->
　<button type="submit">Submit Form</button>
　<!-- 图像按钮 -->
　<input type="image" src="graphic.gif">
ログイン後にコピー

この方法でフォームを送信すると、ブラウザーはリクエストをサーバーに送信する前に submit イベントをトリガーします。これにより、フォーム データを検証し、それを使用してフォームの送信を許可するかどうかを決定する機会が得られます。このイベントのデフォルトの動作をブロックすると、フォームの送信をキャンセルできます

JS では、プログラムで submit() メソッドを呼び出してフォームを送信することもできます:


var form = document.getElementById("myForm");
//提交表单
　form.submit();
ログイン後にコピー

フォームの送信をブロックする (デフォルトのイベントをブロックする):


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
ログイン後にコピー

フォームデータが無効でサーバーに送信できない場合にこの手法を使用できます

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


<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
ログイン後にコピー

フォームをリセットすると、すべてのフォームフィールドが元の値に復元されますページがロードされたばかりのときの値

JS メソッドを使用してフォームをリセットします: 


var form = document.getElementById("myForm");
//重置表单
form.reset();
ログイン後にコピー

フォームのリセットを防ぐデフォルトのアクション: 


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
ログイン後にコピー

フォームフィールド:

各フォームには Element 属性があります。これは、フォーム内のすべてのプロパティです。フォーム要素 (フィールド) のコレクションです。このコレクションは順序付きリストであり、要素コレクション内での各フォーム フィールドの出現順序は、位置と名前の値によってアクセスできます。共通のフォーム フィールドには、input、select、および fieldset が含まれます。 フォーム内のフォーム フィールドを取得するには: 


var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
ログイン後にコピー

共通のフォーム フィールド属性:

disabled: 現在のフィールドが無効かどうかを示すブール値。

form: 現在のフィールドが読み取り専用で属するフォームへのポインター。

name: 現在のフィールドの名前。

readOnly: 現在のフィールドが読み取り専用かどうかを示すブール値。

tabIndex: 現在のフィールドの切り替え (タブ) 番号を示します。

type: 現在のフィールドのタイプ (「チェックボックス」、「ラジオ」など)。

value: サーバーに送信される現在のフィールドの値。ファイル フィールドの場合、この属性は読み取り専用であり、form 属性を除く他の属性は JavaScript を通じて動的に変更できます。

フォームフィールドの属性を動的に変更できるということは、いつでも、どのような方法でもフォームを動的に操作できることを意味します。

用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。

为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件发生时禁用提交按钮即可 ：


//避免多次提交表单
　EventUtil.addHandler(form, "submit", function(event){
　event = EventUtil.getEvent(event);
　var target = EventUtil.getTarget(event);
//取得提交按钮
　var btn = target.elements["submit-btn"];
//禁用它
　btn.disabled = true;
　});
ログイン後にコピー

除了

之外，所有表单字段都有 type 属性。对于元素，这个值等于 HTML 特性 type 的值。对于其他元素，这个 type 属性的值如下表所列。

共有的表单字段方法 ：

每个表单字段都有两个方法： focus()和 blur()。使用 focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。


EventUtil.addHandler(window, "load", function(event){ /*给window绑定一个监听事件，放页面加载完成，光标自动对准在指定的表单字段*/
document.forms[0].elements[0].focus();
});
ログイン後にコピー

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。

例如：

与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点:

document.forms[0].elements[0].blur();

change事件：对于和