Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Hauptteil

Implementierungscode für die JavaScript-Formularverarbeitung_Grundkenntnisse

WBOY
Freigeben： 2016-05-16 16:04:26
Original
1212 Leute haben es durchsucht

Eine Formulareinführung

In HTML wird das Formular durch das

-Element dargestellt, während das Formular in JavaScript dem Typ HTMLFormElement entspricht;

//HTMLFormElement erbt HTMLElement; daher verfügt es über die Standardattribute von HTML-Elementen und außerdem über eigene Attribute und Methoden;
HTMLFormElement-Eigenschaften und -Methoden
Attribut- oder Methodenbeschreibung
AcceptCharset Der Zeichensatz, den der Server verarbeiten kann;
Aktion akzeptiert die angeforderte URL;
Elemente Eine Sammlung aller Steuerelemente im Formular;
enctype angeforderter Codierungstyp;
Länge Die Anzahl der Steuerelemente im Formular;
Methode Der Typ der zu sendenden HTTP-Anfrage, normalerweise „get“ oder „post“;
name Der Name des Formulars;
Zielfenstername, der zum Senden von Anfragen und Empfangen von Antworten verwendet wird;
reset() setzt alle Formulare zurück;
send() Formular abschicken;

1. Holen Sie sich das Formular-Objekt;
document.getElementById('myForm'); // ID verwenden, um das abzurufen; document.getElementsByTagName('form')[0]; // Zum Abrufen des ersten Elements in der Formularelementsammlung verwenden;
document.forms[0]; // Verwenden Sie den numerischen Index von Formularen, um das Element zu erhalten;
document.forms['myForm']; // Verwenden Sie den Namensindex des Formulars, um das Element abzurufen;

2. Senden Sie das Formular ab

(1). Über das Ereignisobjekt können Sie das Standardverhalten des Übermittlungsereignisses verhindern

Code kopieren Der Code lautet wie folgt:
​ addEvent(fm,'submit',function(evt){
          preDef(evt);
});


(2). Wir können die Submit-Methode verwenden, um das Auslösen des Submit-Ereignisses anzupassen

Code kopieren Der Code lautet wie folgt: If(e.ctrlKey && e.keyCode ==13){
                                                                                                                                                                         }
// PS: Vermeiden Sie die Verwendung von Namen wie „submit“ oder „submit“ im Formular. Dies führt zu Konflikten mit der Methode „submit()“ und führt zu einem Fehler beim Absenden


(3). Wiederholen Sie die Einreichung
// Wenn Daten an den Server übermittelt werden, kommt es zu einer Verzögerung und für lange Zeit zu keiner Reflexion, was dazu führt, dass der Benutzer weiterhin auf „Senden“ klickt,
// Dadurch werden viele gleiche Anfragen wiederholt übermittelt oder es werden Fehler verursacht oder mehrere Teile derselben Informationen werden in die Datenbank geschrieben;


Code kopieren

Der Code lautet wie folgt: AddEvent(fm,'submit',function(evt){ // Serververzögerung simulieren;           preDef(evt); Settimeout (Funktion () {// 3 Sekunden vor der Übermittlung der Verarbeitung an den Server;                                  fm.submit();
},3000);
});

// Doppeleinreichungsplan lösen
// Der erste Typ: Deaktivieren Sie die Klickschaltfläche sofort nach der Übermittlung Document.getElementById('sub').disabled = true; // Schaltfläche deaktivieren;
// Zweiter Typ: Nach der Übermittlung werden nachfolgende Formularübermittlungsvorgänge abgebrochen var flag = false; var flag = false; //Setze eine Listening-Variable;
if(flag == true)return; // Wenn vorhanden, das Exit-Ereignis zurückgeben;
flag = true; // Andernfalls muss es das erste Mal sein, dass der Wert der Listening-Variable geändert wird



3. Formular zurücksetzen




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           对于和