Formularvalidierung auf der Clientseite

Client -Formularvalidierung ist von entscheidender Bedeutung. Sie spart Zeit und Bandbreite und bietet mehr Optionen, um darauf hinzuweisen, wo Benutzer beim Ausfüllen von Formularen Fehler machen. Davon abgesehen bedeutet dies nicht, dass Sie keine serverseitige Überprüfung benötigen. Benutzer, die Ihre Website besuchen, haben möglicherweise einen alten Browser oder ein deaktiviertes JavaScript verwendet, mit dem die Überprüfung der Kunden nur die Clients unterbrochen wird. Client- und serverseitige Überprüfung ergänzen sich, sodass sie wirklich nicht unabhängig verwendet werden sollten.

Warum ist die Client -Überprüfung wichtig?

Es gibt zwei gute Gründe, die Client -Authentifizierung zu verwenden:

1. Es ist eine schnelle Möglichkeit zu überprüfen: Wenn etwas schief geht, wird eine Warnung ausgelöst, wenn das Formular eingereicht wird.

2. Sie können sicher nur einen Fehler gleichzeitig anzeigen und sich auf die falschen Felder konzentrieren, um sicherzustellen, dass der Benutzer alle Details, die Sie korrekt benötigen, ausgibt.

Zwei Hauptverifizierungsmethoden

Die beiden Hauptmethoden der Client -Form -Überprüfung sind:

• Zeigen Sie jeweils einen Fehler und konzentrieren Sie sich auf die problematischen Felder
• Zeigen Sie alle Fehler gleichzeitig an, serverseitig verifizierter Stil

Wenn alle Fehler gleichzeitig angezeigt werden, ist für die serverseitige Überprüfung eine bessere Möglichkeit, den Client zu überprüfen, besteht darin, jeweils einen Fehler anzuzeigen. Dies ermöglicht es, nur Felder hervorzuheben, die falsch gefüllt wurden, was es den Besuchern wiederum erleichtert, das Formular erfolgreich zu ändern und einzureichen. Wenn Sie dem Benutzer gleichzeitig alle Fehler vorstellen, versuchen die meisten Menschen, sie gleichzeitig zu erinnern und zu korrigieren, anstatt nach jeder Korrektur erneut zu sein.

Angesichts dieser Vorteile werde ich mich nur auf die Verifizierungsmethode konzentrieren, die jeweils einen Fehler zeigt.

So überprüfen Sie das Formular

Zum Beispiel den folgenden Code -Snippet:

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

Tel.:

Was ist das Problem? Wenn Sie zuvor ein anderes Formular hinzufügen, versucht der Code, das falsche Formular zu validieren.

Ein besserer Weg ist, den Formularnamen einzubeziehen:

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

ondsubmit = "Return validatemyForm ();" & gt;

löschen wir den Formularnamen:

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

Diese letzte Methode verwendet das Objekt dies, das immer auf das aktuelle Objekt hinweist. Dies macht unseren Code tragbarer und spart die Schreibzeit.

Wie kann man das Leben der Besucher jetzt erleichtern? Konzentrieren wir uns auf die Felder, die den Fehler auslösen, anstatt sie von selbst nachzuschlagen.

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

Bei diesen Änderungen konzentriert sich der Browser auf das Ausfüllen falscher Felder und wählt sogar Text für den Besucher aus. Dies geschieht auch automatisch, wenn Scrollen erforderlich sind.

Ok, das ist großartig, aber denkst du, es gibt für jedes Feld etwas zu viel Code? Was ist, wenn wir eine einfache Bibliothek von Funktionen erstellen, mit der viel Tippen und Herunterladen von Zeit auf der Seite speichern kann? Als nächstes machen wir dies - wir werden unsere grundlegenden Funktionen definieren, um den Validierungscode kürzer zu machen.

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

Diese Funktion führt eine einfache Überprüfung der Zahlen durch - sie überprüft, ob das Feld nur Zahlen enthält, und optional, ob es sich innerhalb eines bestimmten Bereichs befindet. Sie werden feststellen, dass dieser Code eine Fehlermeldung als Parameter übergibt. Um eine solche Funktion zu verwenden, können wir sie im Grunde genommen dem Onsubmit -Handler wie folgt hinzufügen:

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit = "Return validateNumber (this.phone,
'Bitte geben Sie die Telefonnummer ein, nur numerisch', 5, 10). "

Eine andere Möglichkeit, die Zahlen zu überprüfen, besteht darin, dass sie in einem bestimmten Bereich befinden. Damit die Funktion eine solche Validierung durchführt, ändern Sie einfach die Scheckzeile in:

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

Wenn Sie mehrere Überprüfungen auf ein Formular anwenden möchten, können Sie mehrere Regeln in den ONSUBMIT -Handler einbinden. Stellen Sie sich zum Beispiel vor, dass wir zusätzlich zur Telefonnummer auch unseren ersten und Nachnamen eingeben müssen:

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

onsubmit = "return (

ValidateNumber (this.phone, Bitte geben Sie das Telefon
ein Nummer, Nummer nur ', 5, 10) &&
validateString (this.firstname, 'Bitte geben Sie
ein Dein Name ', 3, 15) &&
validateString (this.lastName, 'Bitte geben Sie
ein Dein Nachname ', 3, 15)
); "& gt; Der Code verlangt, dass alle Validierungsregeln als wahr bewertet werden (unter Verwendung von Logik und - &&). Ein genauerer Blick zeigt, dass es sehr einfach ist, einen solchen Code aus der Server -Skriptsprache zu generieren ... aber dies ist ein weiterer Artikel.

<code>function validateNumber(field, msg, min, max) {  <br>
if (!min) { min = 0 }  <br>
if (!max) { max = 255 }  <br>
  <br>
if ( (parseInt(field.value) != field.value) ||   <br>
        field.value.length  max) {  <br>
alert(msg);  <br>
field.focus();  <br>
field.select();  <br>
return false;  <br>
}  <br>
  <br>
return true;  <br>
}</code>

Wie Sie sehen, sehen Sie die String -Validierungsfunktionen mehr oder weniger gleich aus.

Ein gemeinsames Feld ist in vielen Formularen im Web erforderlich, nämlich der E -Mail -Adresse des Benutzers. Ich habe viele Funktionen gesehen, die dies tun, aber normalerweise ist der einfachste und einfachste Weg, E -Mail -Adressen zu überprüfen, indem sie regelmäßige Ausdrücke verwenden.

Jetzt werden wir unsere Funktion so erweitern, dass sie Felder als optional definieren können.

<code></code>

Um die erforderliche E -Mail zu überprüfen, sollten Sie sie als:

nennen

<code>if ((parseInt(field.value) != field.value) ||   <br>
field.value  max) {</code>

Wenn Sie es auf optional einstellen möchten:

<code></code>

JavaScript kann nicht allein zur Überprüfung verwendet werden, aber es kann von großer Hilfe sein, wenn Sie es haben. Je kompakter der Code, den Sie in HTML eingebettet haben, desto besser spart er Download -Zeit und Suchmaschinen werden Sie mögen!

häufig gestellte Fragen zur Form des Formularverifizierung (FAQ)

Was ist der Unterschied zwischen Client-Überprüfung und serverseitiger Überprüfung?

Client -Überprüfung erfolgt im Browser des Benutzers unter Verwendung von JavaScript, bevor die Formulardaten an den Server gesendet werden. Es bietet sofortiges Feedback und verbessert die Benutzererfahrung. Es kann jedoch umgangen werden, indem JavaScript deaktiviert oder der Code manipuliert wird, sodass er nicht ganz sicher ist.

Andererseits wird auf dem Server die serverseitige Überprüfung durchgeführt, nachdem die Formulardaten gesendet wurden. Es ist sicherer, weil Benutzer es nicht umgehen können. Es erfordert jedoch eine Roundreise zum Server, die die Leistung und die Benutzererfahrung beeinflussen kann. Daher wird empfohlen, sowohl die Client- als auch die serverseitige Überprüfung für die beste Sicherheits- und Benutzererfahrung zu verwenden.

Wie implementieren Sie die Formularvalidierung in PHP?

PHP bietet eine Vielzahl von Formularvalidierungsfunktionen. Beispielsweise können Sie die Funktion filter_var () mit verschiedenen Filtern verwenden, um die Eingabedaten zu validieren und zu reinigen. Hier ist ein einfaches Beispiel für die Überprüfung einer E -Mail -Adresse:

$ mail = $ _post ["E -Mail"]; if (! filter_var ($ mail, filter_validate_email)) { echo "Ungültiges E -Mail -Format"; } Dieser Code prüft, ob die eingereichte E -Mail -Adresse korrekt formatiert ist. Wenn nicht, wird eine Fehlermeldung angezeigt.

Was sind einige häufige Überprüfungstechniken?

Einige häufige Überprüfungstechniken umfassen die erforderlichen Felder, Längengrenzen, Musteranpassung und Datentypprüfung. Erforderliche Felder stellen sicher, dass der Benutzer alle erforderlichen Informationen ausgibt. Längengrenzen begrenzen die Anzahl der Zeichen, die eingegeben werden können. Muster entsprechen Überprüfungen, wenn die Eingabe mit einem bestimmten Muster übereinstimmt, z. B. eine E -Mail -Adresse oder Telefonnummer. Die Prüfung des Datentyps stellt sicher, dass die Eingabe der richtige Typ ist, z. B. eine Nummer oder ein Datum.

Wie kann ich Überprüfungsfehlermeldung anzeigen?

Sie können JavaScript verwenden, um die Client-Überprüfung oder die serverseitige Überprüfung mithilfe von PHP zur Anzeige von Überprüfungsfehlermeldungen zu verwenden. In JavaScript können Sie mit der Methode SetCustOMvality () eine benutzerdefinierte Validierungsnachricht einrichten. In PHP können Sie Fehlermeldungen in Variablen speichern und in Form einer Form anzeigen.

Wie überprüfen Sie das Kontrollkästchen?

Sie können das Kontrollkästchen überprüfen, indem Sie überprüfen, ob das Kontrollkästchen ausgewählt ist. In JavaScript können Sie die geprüfte Eigenschaft verwenden. In PHP können Sie überprüfen, ob der Kontrollkästchen -Wert in $ _post oder $ _get angezeigt wird.

Wie überprüfen Sie die Dropdown-Liste?

Sie können die Dropdown-Liste überprüfen, indem Sie überprüfen, ob die gültige Option ausgewählt ist. In JavaScript können Sie die Eigenschaft SelectedIndex verwenden. In PHP können Sie überprüfen, ob sich der ausgewählte Wert in einem Array gültiger Werte befindet.

Wie überprüfen Sie Optionsfelder?

Sie können das Optionsfeld überprüfen, indem Sie überprüfen, ob eine der Optionen ausgewählt ist. In JavaScript können Sie die Optionsfelder durchlaufen und die geprüfte Eigenschaft verwenden. In PHP können Sie prüfen, ob der Optionsschaltfläche in $ _post oder $ _get angezeigt wird.

Wie überprüfen Sie das Datum?

Sie können das Datum überprüfen, indem Sie prüfen, ob das Datum korrekt formatiert ist und ob es sich um ein echtes Datum handelt. In JavaScript können Sie das Datumsobjekt verwenden. In PHP können Sie die Funktion checkDate () verwenden.

Wie überprüfen Sie das Datei -Upload?

Sie können Datei -Uploads überprüfen, indem Sie die Dateigröße, den Dateityp und die Dateierweiterung überprüfen. In JavaScript können Sie die Dateieneigenschaft verwenden. In PHP können Sie das $ _Files -Array verwenden.

Wie kann man die SQL -Injektion verhindern?

Sie können die SQL -Injektion unter Verwendung vorbereiteter Anweisungen oder parametrisierter Abfragen verhindern, die SQL -Code von Daten trennen. Dies verhindert, dass die Daten als Code interpretiert werden. In PHP können Sie PDO- oder MySQLI -Erweiterungen verwenden, um Vorverarbeitungsanweisungen auszuführen.

Das obige ist der detaillierte Inhalt vonFormularvalidierung auf der Clientseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!