Die Client-Seite-Formularvalidierung kann ohne JavaScript mithilfe von HTML-Attributen durchgeführt werden. 1) Verwenden Sie, um obligatorische Felder durchzusetzen. 2) Validieren Sie E -Mails und URLs mit Typattributen wie E -Mail oder URL oder verwenden Sie Muster mit Regex für benutzerdefinierte Formate. 3) Begrenzen Sie die Werte unter Verwendung von Min, Max, Minlenl?nge und MaxLength. 4) Passen Sie Fehlermeldungen mit der API zur Beschr?nkungsvalidierung an, obwohl diese nur begrenzt und clientseitig sind. Validieren Sie die Daten immer erneut auf der Serverseite für Sicherheit und Genauigkeit.

Die validierende Formformular für die Kunden ist ein wesentlicher Bestandteil des Erstellens benutzerfreundlicher und sicherer Webformulare. Die guten Nachrichten? Sie brauchen nicht immer JavaScript, um es zu tun. HTML verfügt über integrierte Attribute, mit denen Sie grundlegende Benutzereingaben direkt im Browser validieren k?nnen. Hier erfahren Sie, wie Sie sie effektiv einsetzen k?nnen, ohne Dinge zu überkomplizieren.

Verwenden Sie für obligatorische Felder required

Das einfachste und h?ufigste Validierungsattribut ist required . Wenn der Browser zu einem Eingabefeld hinzugefügt wird, muss der Benutzer es ausfüllen, bevor er das Formular einreicht.

Zum Beispiel:

 <Eingabe type = "text" name = "userername" erforderlich>

Dies funktioniert gut für Felder wie Namen, E -Mails und Passw?rter - alles, wo es leer bleibt, würde den n?chsten Schritt brechen. Browser zeigen eine Standardnachricht an, wenn jemand versucht, sie einzureichen, ohne sie auszufüllen.

Pro -Tipp: Kombinieren Sie mit anderen Attributen für eine st?rkere Validierung required , z. B. sicherzustellen, dass eine E -Mail wie eine tats?chliche E -Mail -Adresse aussieht.

Validieren Sie E -Mail- und URL -Eingaben mit type und pattern

HTML5 führte mehrere Eingangstypen wie email , url und number ein, die automatisch prüfen, ob das Format übereinstimmt, was erwartet wird.

Zum Beispiel:

 <Eingabe type = "E -Mail" name = "E -Mail" erforderlich>

Dies stellt sicher, dass der Benutzer etwas eingibt, das wie eine E -Mail aussieht (wie user@example.com). Gleiches gilt für URLs. Wenn Sie noch mehr Kontrolle wünschen, wie beispielsweise ein bestimmtes Format durchzusetzen, verwenden Sie das pattern mit einem regul?ren Ausdruck.

Beispiel:

 <Eingabe type = "text" name = "zipcode" muster = "\ d {5}" erforderlich>

Diese Linie akzeptiert nur 5-stellige Postleitzahlen. Denken Sie daran, dass Regex zwar praktisch ist, aber schwierig werden kann - testen Sie Ihre Muster sorgf?ltig.

Stellen Sie die minimalen und maximalen Werte mit min , max und minlength / maxlength ein

Manchmal müssen Sie einschr?nken, wie viel oder wie klein jemand eintreten kann. Für Zahlen, Daten oder Textl?nge sind diese Attribute Ihre Freunde:

• min und max arbeiten an Number- und Datumseing?ngen
• minlength und maxlength -Set-Zeichengrenzen für textbasierte Eing?nge

Beispiele:

 <Eingabe type = "number" name = "Alter" min = "18" max = "99">
<Eingabe type = "text" name = "userername" minLength = "3" maxLength = "20">

Diese helfen, Randf?lle wie absurd lange Benutzernamen oder Alterswerte zu verhindern, die keinen Sinn ergeben.

Ein paar Dinge, an die man sich erinnern sollte:

• Diese Schecks erfolgen nur bei der Einreichung von Formular.
• Benutzer k?nnen weiterhin ungültige Werte eingeben, aber das Formular wird erst dann durchgeführt, wenn sie sie beheben.

Passen Sie Fehlermeldungen an (mit einigen Einschr?nkungen)

Standardm??ig zeigen Browser ihre eigenen Fehlermeldungen an, wenn die Validierung fehlschl?gt. Sie k?nnen diese Nachrichten jedoch mithilfe der Einschr?nkungs -Validierungs -API von JavaScript optimieren.

Hier ist eine schnelle M?glichkeit, die Nachricht zu ?ndern:

 <Eingabe type = "E -Mail" id = "E -Mail" erforderlich>
<Script>
  const E -Mail -INput = document.getElementById (&#39;E -Mail&#39;);
  E -MailInput.AdDeVentListener (&#39;Ungültig&#39;, Funktion (e) {
    E.Target.SetCustomvality (&#39;Bitte geben Sie eine gültige E -Mail -Adresse ein.&#39;);
  });
</script>

Beachten Sie, dass dies keine vollst?ndige Validierung ersetzt-Benutzer k?nnen die Client-Seite-überprüfungen weiterhin vollst?ndig umgehen. überprüfen Sie also auch Daten auf der Serverseite.

Grunds?tzlich bieten Ihnen HTML -Formularvalidierungsattribute mit minimalem Aufwand viel Macht. Sie sind gro?artig für einfache überprüfungen und die Verbesserung der Benutzererfahrung, ohne benutzerdefinierte Skripte zu schreiben. Verlassen Sie sich einfach nicht allein auf sie aus Sicherheitsgründen oder komplexer Logik - dafür ist die Backend -Validierung gedacht.

Das obige ist der detaillierte Inhalt vonImplementierung der Client-Seite-Formularvalidierung mithilfe von HTML-Attributen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!