Heim > Artikel > Web-Frontend > Einführung in die Art und Weise, wie JavaScript Code implementiert, der die Formularübermittlung verhindert

Einführung in die Art und Weise, wie JavaScript Code implementiert, der die Formularübermittlung verhindert

巴扎黑Original: 2017-08-18 10:08:051748Durchsuche

In diesem Artikel wird hauptsächlich die JavaScript-Methode zur Verhinderung der Formularübermittlung vorgestellt. Er erklärt anhand von Codebeispielen, worauf Sie beim Verhindern der Formularübermittlung achten müssen, und erläutert den Unterschied zwischen onSubmit und check() es

<body>
 <form action="clock.html" method="post" onsubmit="return checkLength()">
  <p>name:<input type="text" name="user" id="user"></p>
  <input type="submit" id="submit" name="submit"> 
 </form>
</body>
</html>

HTML-Seite.

Die erste Methode: Verwenden Sie den standardmäßigen Ereignisblockierungsmechanismus von event, rufen Sie das Submit-Element ab, nachdem die Seite geladen wurde, und registrieren Sie dann eine Klickantwortfunktion zum Senden, wobei der Parameter der ist Ereignisereignis.
Nachdem der Benutzer auf „Senden“ geklickt hat, um die Antwortfunktion auszulösen, verhindert event.preventDefault(); direkt, dass das Standardereignis vom Formular springt.

Zweite Methode: Fügen Sie das Attribut checkLength()"
unter dem Attribut onsubmit="return checkLength()" oder das Eingabe-Tag mit id="submit" unter dem Formular-Tag hinzu Verhindern Sie in der Funktionsfunktion, dass die Formularübermittlung „false“ zurückgibt;
Verhindern Sie, dass der Code in der Funktion eine Abwärtsrückgabe ausführt;

Das Folgende sind zwei Ereignisse von

1 .form

submit, senden Sie das Formular. Wenn Sie diese Funktion direkt aufrufen, wird das Formular direkt gesendet.
onSubmit Wenn Sie auf die Schaltfläche „Senden“ klicken wird zuerst ausgelöst und dann wird das Submit-Ereignis ausgelöst, standardmäßig wird true zurückgegeben, sodass das Formular immer gesendet werden kann

erfolgt durch die Verwendung von in JS >, um jede Eingabe vom Benutzer zu erhalten, sie zu überprüfen und TRUE zurückzugeben, wenn sie vollständig übergeben wurde, andernfalls wird false zurückgegeben

document.myform.name.value3. Seitencode-Implementierung

4. JS-Implementierung

/*
<form name="testform" action="hello.html" method="post" onSubmit="return check();">
 <input type="text" name="name">
 <input type="submit" value="提交">
</form>
*/

Hinweis

function check(){
 if (document.testform.name.value=="admin") {  
  alert("姓名不正确");  
  return false; 
  }
 else{
  return true;
  }
}

Nicht auf Senden als: „check()“ schreiben, damit das Formular nicht übermittelt wird, wenn der Test fehlschlägt

Das obige ist der detaillierte Inhalt vonEinführung in die Art und Weise, wie JavaScript Code implementiert, der die Formularübermittlung verhindert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Methode zum Hochladen von Dateien ohne Aktualisierung in JavaScriptNächster Artikel：Einführung in die Methode zum Hochladen von Dateien ohne Aktualisierung in JavaScript

In Verbindung stehende Artikel

Mehr sehen