Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Detailliertes Beispiel eines JavaScript-Formularskripts

Detailliertes Beispiel eines JavaScript-Formularskripts

黄舟
Freigeben： 2017-10-18 10:27:39
Original
1444 Leute haben es durchsucht

Der folgende Editor bringt Ihnen ein JavaScript-basiertes Formularskript (ausführliche Erklärung). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Was ist ein Formular?

Ein Formular besteht aus drei Grundkomponenten: Formular-Tag: Dieses enthält die URL des CGI-Programms, das zur Verarbeitung der Formulardaten verwendet wird, und die Methode zur Übermittlung der Daten an den Server. Formularfelder: Dazu gehören Textfelder, Passwortfelder, ausgeblendete Felder, mehrzeilige Textfelder, Kontrollkästchen, Optionsfeldfelder, Dropdown-Auswahlfelder, Datei-Upload-Felder usw. Formularschaltflächen: Dazu gehören Schaltflächen zum Senden, Zurücksetzen und allgemeine Schaltflächen; sie werden zum Übertragen von Daten an CGI-Skripte auf dem Server oder zum Abbrechen von Eingaben verwendet. Formularschaltflächen können auch zur Steuerung anderer Verarbeitungsaufgaben mit definierten Verarbeitungsskripten verwendet werden.

Die Beziehung zwischen JavaScript und Formularen: Die ursprüngliche Anwendung von JS bestand darin, die Verantwortung des Servers für die Verarbeitung von Formularen zu teilen und die Abhängigkeit vom Server zu durchbrechen. Obwohl das Web und JavaScript große Fortschritte gemacht haben, sind Webformulare immer noch vorhanden Viele Entwickler stellen vorgefertigte Lösungen für viele häufige Aufgaben bereit und viele Entwickler verwenden JavaScript nicht nur zum Validieren von Formularen, sondern auch, um das Standardverhalten einiger Standardformularsteuerelemente zu verbessern.

1. Grundkenntnisse über Formulare

In HTML besteht ein Formular aus dem Formular-Tag. In JavaScript entspricht das Formular dem HTMLFormElement Typ, HTMLFormElement-Typ Erbt den HTMLElement-Typ und verfügt über dieselben Standardattribute wie andere Elementelemente sowie über eigene Attribute und Methoden:

acceptCharset: Der Zeichensatz, den der Server verarbeiten kann, entspricht dem Akzeptieren -charset im HTML-Merkmal.

Aktion: akzeptiert die angeforderte URL, die dem Aktionsattribut in HTML entspricht.

Elemente: Eine Sammlung aller Steuerelemente im Formular (HTMLCollection).

enctype: Der angeforderte Codierungstyp, der der Enctype-Funktion in HTML entspricht.

Länge: Die Anzahl der Steuerelemente im Formular.

Methode: Der Typ der zu sendenden HTTP-Anfrage, normalerweise „get“ oder „post“ entspricht dem Methodenattribut von HTML.

Name: Der Name des Formulars; entspricht dem Namensattribut von HTML.

reset(): Setzt alle Formularfelder auf ihre Standardwerte zurück.

submit(): Formular abschicken.

Ziel: Der Name des Fensters, das zum Senden von Anforderungen und Empfangen von Antworten verwendet wird, entspricht dem Zielattribut von HTML.

Die Methoden zum Abrufen von Formularelementen sind: var form=document.getElementById('form1'); //Formularelemente nach ID abrufen

var firstForm=document.forms[0] ; //Alle Formularelemente auf der Seite über document.forms abrufen und das erste Formularelement über den Indexwert „0“ abrufen

var form2=document.forms['form2']; //Dokument übergeben .forms, um alle Formularelemente auf der Seite abzurufen und das spezifische Formularelement über den Namenswert abzurufen

Senden Sie das Formular: 


　<!-- 通用提交按钮 -->
　<input type="submit" value="Submit Form">
　<!-- 自定义提交按钮 -->
　<button type="submit">Submit Form</button>
　<!-- 图像按钮 -->
　<input type="image" src="graphic.gif">
Nach dem Login kopieren

Auf diese Weise löst der Browser beim Absenden eines Formulars das Submit-Ereignis aus, bevor er die Anfrage an den Server sendet. Dies gibt uns die Möglichkeit, die Formulardaten zu validieren und anhand dieser zu entscheiden, ob die Formularübermittlung zulässig ist. Das Blockieren des Standardverhaltens dieses Ereignisses kann die Formularübermittlung abbrechen

In JS können wir auch programmgesteuert die Methode subscribe() aufrufen, um das Formular zu übermitteln: 


var form = document.getElementById("myForm");
//提交表单
　form.submit();
Nach dem Login kopieren

Formularübermittlung verhindern (Standardereignis blockieren):


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
Nach dem Login kopieren

Diese Technik kann verwendet werden, wenn die Formulardaten ungültig sind und nicht an den Server gesendet werden können

Formular zurücksetzen: 


<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
Nach dem Login kopieren

Beim Zurücksetzen des Formulars werden alle Formularfelder auf ihre ursprünglichen Werte zurückgesetzt, als die Seite gerade geladen wurde

Verwenden Sie die JS-Methode, um das Formular zurückzusetzen: 


var form = document.getElementById("myForm");
//重置表单
form.reset();
Nach dem Login kopieren

Verhindern Sie die Standardaktion des Zurücksetzens des Formulars: 


var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
Nach dem Login kopieren

Formularfelder:

Jedes Formular verfügt über eine Element-Eigenschaft, die eine Sammlung aller Formularelemente (Felder) im Formular ist. Bei dieser Sammlung handelt es sich um eine geordnete Liste. Die Reihenfolge, in der jedes Formularfeld in der Elementsammlung erscheint, ist dieselbe wie die Reihenfolge, in der es im Tag erscheint. Auf sie kann nach Position und Namenswert zugegriffen werden. Zu den allgemeinen Formularfeldern gehören Eingabe, Auswahl und Feldsatz. So erhalten Sie die Formularfelder im Formular: 


var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
Nach dem Login kopieren

Allgemeine Formularfeldattribute:

deaktiviert : Boolescher Wert, der angibt, ob das aktuelle Feld deaktiviert ist.

Formular: Zeiger auf das Formular, zu dem das aktuelle Feld gehört; schreibgeschützt;

Name: Der Name des aktuellen Feldes.

readOnly: Boolescher Wert, der angibt, ob das aktuelle Feld schreibgeschützt ist.

tabIndex: Gibt die Schaltnummer (Tabulatornummer) des aktuellen Felds an.

Typ: Der Typ des aktuellen Felds, z. B. „Kontrollkästchen“, „Radio“ usw.

Wert: Der Wert des aktuellen Feldes, der an den Server übermittelt wird. Bei Dateifeldern ist dieses Attribut schreibgeschützt und enthält den Pfad der Datei auf dem Computer

Mit Ausnahme des Formularattributs kann jedes andere Attribut über JavaScript dynamisch geändert werden.

Die Möglichkeit, Formularfeldattribute dynamisch zu ändern, bedeutet, dass wir das Formular jederzeit und auf jede Art und Weise dynamisch bedienen können.

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

为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 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;
　});
Nach dem Login kopieren

除了

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

共有的表单字段方法 ：

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


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

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

例如：

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

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

change事件：对于和