Echtzeit-Formularüberprüfung: Subtile Verbesserungen zur Verbesserung der Benutzererfahrung
Kernpunkte:
- JavaScript kann zur Implementierung der Echtzeit-Formformüberprüfung verwendet werden, die Benutzern sofortiges Feedback zur Gültigkeit der Eingänge bietet, wodurch die Benutzererfahrung verbessert und die Datenintegrität aufrechterhalten wird, um sicherzustellen, dass nur gültige Daten übermittelt werden.
- HTML5 -Attribute
pattern
undrequired
können verwendet werden, um den gültigen Eingangsbereich von Formularelementen zu definieren. Wenn der Browser diese Eigenschaften nicht unterstützt, können seine Werte als Grundlage für Populatoren für JavaScript -Kompatibilität verwendet werden.
Das Attribut -
aria-invalid
kann verwendet werden, um anzuzeigen, ob das Feld ungültig ist. Diese Eigenschaft bietet Informationen zu Barrierefreiheit und kann als CSS -Hook verwendet werden, um ein ungültiges Feld visuell anzuzeigen. - JavaScript -Funktion
instantValidation()
Testen Sie das Feld und führen Sie die tatsächliche Überprüfung durch, wodurch das Attributaria-invalid
gesteuert wird, um den Status des Feldes anzuzeigen. Diese Funktion kann an das Ereignisonchange
gebunden werden, um eine Echtzeit-Formularvalidierung bereitzustellen.
HTML5 führt mehrere neue Eigenschaften für die Implementierung der Browser-basierten Formularvalidierung ein. Die Eigenschaft pattern
ist ein regulärer Ausdruck, der gültige Eingabebereiche für Textbereichselemente und die meisten Eingangstypen definiert. required
Attribut gibt an, ob das Feld erforderlich ist. Für ältere Browser, die diese Eigenschaften nicht unterstützen, können wir ihre Werte als Grundlage für Kompatibilitätsfüller verwenden. Wir können sie auch verwenden, um interessantere Verbesserungen zu erzielen-Echtzeit-Formularvalidierung.
Es ist zu beachten, dass Sie die Überprüfung nicht überbeanspruchen, um das normale Browserverhalten nicht zu stören und Benutzeroperationen zu behindern. Zum Beispiel habe ich einige Formulare gesehen, die ungültige Felder mithilfe der Registerkarte Schlüssel nicht hinterlassen können. JavaScript wird verwendet (genauer gesagt missbraucht), um den Fokus zu zwingen, in dem Feld zu bleiben, bis es gültig ist. Dies ist für die Benutzererfahrung sehr ungünstig und verstößt direkt gegen die Richtlinien für die Zugänglichkeit.
In diesem Artikel wird eine weniger invasive Implementierungsmethode eingeführt. Es ist nicht einmal eine vollständige Client -Validierung - es ist nur eine leichte Benutzererfahrungsverstärkung, die auf zugängliche Weise implementiert wird, und als ich das Skript getestet habe, war es fast dasselbe wie die aktuelle native Implementierung von Firefox!
Grundlegendes Konzept
In der neuesten Version von Firefox zeigt das Feld einen roten Rand, wie in der folgenden Abbildung gezeigt:
, wenn das erforderliche Feld leer ist oder sein Wert nicht übereinstimmt:
onchange
Natürlich wird dies nicht sofort passieren. In diesem Fall wird der Grenze für jedes erforderliche Feld standardmäßig angezeigt. Stattdessen werden diese Grenzen erst angezeigt, nachdem Sie mit dem Feld interagieren, was im Grunde genommen (wenn auch nicht genau) ähnlich dem Ereignis ist.
Daher werden wir onchange
als Triggerereignis verwenden. Alternativ können wir das Ereignis oninput
verwenden, das so lange abfeuert, wie wir einen beliebigen Wert im Feld eingeben oder einfügen. Dies ist jedoch wirklich zu "sofort", da es beim schnellen Abschluss leicht wiederholt ausgelöst werden kann, was zu einem flackernden Effekt führt, der von einigen Benutzern gelangweilt oder abgelenkt werden kann. Und trotzdem löst oninput
nicht aus dem Programmiereingang aus, und onchange
wird ausgelöst. Möglicherweise müssen wir Vorgänge wie Autokaponete von Plugins von Drittanbietern verarbeiten.
Definieren Sie HTML und CSS
Schauen wir uns unsere Implementierung an, beginnend mit dem HTML, das auf:
basiert:<form action="#" method="post"> <fieldset> <legend><strong>Add your comment</strong></legend> <p> <label for="author">Name <abbr title="Required">*</abbr></label> <input aria-required="true" id="author" name="author" pattern="^([- \w\d\u00c0-\u024f]+)$" required="required" size="20" spellcheck="false" title="Your name (no special characters, diacritics are okay)" type="text" value="" > </p> <p> <label for="email">Email <abbr title="Required">*</abbr></label> <input aria-required="true" id="email" name="email" pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" required="required" size="30" spellcheck="false" title="Your email address" type="email" value="" > </p> <p> <label for="website">Website</label> <input id="website" name="website" pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$" size="30" spellcheck="false" title="Your website address" type="url" value="" > </p> <p> <label for="text">Comment <abbr title="Required">*</abbr></label> <textarea aria-required="true" cols="40" id="text" name="text" required="required" rows="10" spellcheck="true" title="Your comment" ></textarea> </p> </fieldset> <fieldset> <input name="preview" type="submit" value="Preview"> <input name="save" type="submit" value="Submit Comment"> </fieldset> </form>
required
Dieses Beispiel ist ein einfaches Kommentarformular, in dem einige Felder erforderlich sind, einige Felder verifiziert werden und einige Felder beide Bedingungen erfüllen. Felder mit aria-required
Attributen haben auch
Die aria-invalid
aria -Spezifikation definiert auch das Attribut aria-invalid
, mit dem wir angeben, ob das Feld ungültig ist (es gibt kein äquivalentes Attribut in HTML5). Die
input[aria-invalid="true"], textarea[aria-invalid="true"] { border: 1px solid #f00; box-shadow: 0 0 4px 0 #f00; }
box-shadow
Wir können nur box-shadow
verwenden, ohne sich um Grenzen zu kümmern.
add JavaScript
Jetzt, da wir statischen Code haben, können wir Skripte hinzufügen. Erstens brauchen wir eine grundlegende addEvent()
Funktion:
function addEvent(node, type, callback) { if (node.addEventListener) { node.addEventListener(type, function(e) { callback(e, e.target); }, false); } else if (node.attachEvent) { node.attachEvent('on' + type, function(e) { callback(e, e.srcElement); }); } }
Als nächstes benötigen wir eine Funktion, um zu bestimmen, ob ein bestimmtes Feld validiert werden sollte, wodurch nur getestet wird, dass es weder deaktiviert noch schreibgeschützt ist und dass es ein pattern
oder required
Attribut hat:
function shouldBeValidated(field) { return ( !(field.getAttribute("readonly") || field.readonly) && !(field.getAttribute("disabled") || field.disabled) && (field.getAttribute("pattern") || field.getAttribute("required")) ); }Die ersten beiden Bedingungen mögen ausführlich erscheinen, sind jedoch notwendig, da die Eigenschaften eines Elements
und disabled
ihren Attributzustand nicht unbedingt widerspiegeln. In der Opera gibt es beispielsweise Felder mit hartcodiertem Attribut readonly
noch readonly="readonly"
für ihr readonly
Attribut zurück (das Punktattribut stimmt nur mit dem Status überein, den das Skript durch das Skript festgelegt hat). undefined
function instantValidation(field) { if (shouldBeValidated(field)) { var invalid = (field.getAttribute("required") && !field.value) || (field.getAttribute("pattern") && field.value && !new RegExp(field.getAttribute("pattern")).test(field.value)); if (!invalid && field.getAttribute("aria-invalid")) { field.removeAttribute("aria-invalid"); } else if (invalid && !field.getAttribute("aria-invalid")) { field.setAttribute("aria-invalid", "true"); } } }, wenn das Feld erforderlich ist, aber keinen Wert hat oder es Muster und Wert hat, aber der Wert nicht mit dem Muster übereinstimmt, ist das Feld ungültig.
Da das Muster die Zeichenfolgeform des regulären Ausdrucks bereits definiert, müssen wir die Zeichenfolge nur an den
-Konstruktor übergeben, und er erstellt ein reguläres Ausdrucksobjekt, das wir für diesen Wert testen können. Wir müssen jedoch den Wert vorlegen, um sicherzustellen, dass er nicht leer ist, damit der Regex selbst die leere Zeichenfolge nicht berücksichtigen muss. RegExp
Wenn wir festgestellt haben, ob das Feld ungültig ist In. Sehr einfach! Damit dies funktioniert, müssen wir die Überprüfungsfunktion an das Ereignis aria-invalid
binden. Es sollte einfach so sein: onchange
Um dies zu funktionieren, muss das Ereignis
<form action="#" method="post"> <fieldset> <legend><strong>Add your comment</strong></legend> <p> <label for="author">Name <abbr title="Required">*</abbr></label> <input aria-required="true" id="author" name="author" pattern="^([- \w\d\u00c0-\u024f]+)$" required="required" size="20" spellcheck="false" title="Your name (no special characters, diacritics are okay)" type="text" value="" > </p> <p> <label for="email">Email <abbr title="Required">*</abbr></label> <input aria-required="true" id="email" name="email" pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$" required="required" size="30" spellcheck="false" title="Your email address" type="email" value="" > </p> <p> <label for="website">Website</label> <input id="website" name="website" pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$" size="30" spellcheck="false" title="Your website address" type="url" value="" > </p> <p> <label for="text">Comment <abbr title="Required">*</abbr></label> <textarea aria-required="true" cols="40" id="text" name="text" required="required" rows="10" spellcheck="true" title="Your comment" ></textarea> </p> </fieldset> <fieldset> <input name="preview" type="submit" value="Preview"> <input name="save" type="submit" value="Submit Comment"> </fieldset> </form>Ereignis
nicht auf Bubble onchange
. Wir können diese Browser ignorieren, aber ich denke, es wäre eine Schande, besonders wenn das Problem so einfach zu lösen ist. Es bedeutet nur, dass der Code etwas komplexer ist - wir müssen eine Sammlung von Eingabe- und Textbereichselementen erhalten, durch sie iterieren und das onchange
Ereignis separat an jedes Feld binden:
onchange
input[aria-invalid="true"], textarea[aria-invalid="true"] { border: 1px solid #f00; box-shadow: 0 0 4px 0 #f00; }
Es ist das-eine einfache und nicht-invasive Echtzeit-Verifizierungsverifizierung, die zugängliche und intuitive Tipps bietet, um den Benutzern die Ausführung von Formularen zu unterstützen.
Nachdem dieses Skript implementiert wurde, können wir in nur wenigen Schritten ein vollständiges Kompatibilitätsfüllerprogramm absolvieren. Ein solches Skript liegt außerhalb des Rahmens dieses Artikels. Wenn Sie es jedoch weiterentwickeln möchten, werden alle grundlegenden Module hier getest und das Bindungsauslöserereignis.Ich muss zugeben, ich bin mir nicht sicher, ob es sich wirklich lohnt! Wenn Sie diese Verbesserung bereits haben (die in IE7 und allen modernen Browsern funktioniert) und überlegen Verwendet sie für die Überprüfung vor der Untersuchung.
required
Das obige ist der detaillierte Inhalt vonSofortformularvalidierung mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

Dieses Tutorial zeigt Ihnen, wie Sie eine benutzerdefinierte Google -Such -API in Ihr Blog oder Ihre Website integrieren und ein raffinierteres Sucherlebnis bieten als Standard -WordPress -Themen -Suchfunktionen. Es ist überraschend einfach! Sie können die Suche auf y beschränken

Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt

Diese Artikelserie wurde Mitte 2017 mit aktuellen Informationen und neuen Beispielen umgeschrieben. In diesem JSON -Beispiel werden wir uns ansehen, wie wir einfache Werte in einer Datei mit JSON -Format speichern können. Mit der Notation des Schlüsselwertpaares können wir jede Art speichern

Nutzen Sie JQuery für mühelose Webseiten -Layouts: 8 Essential Plugins JQuery vereinfacht das Webseitenlayout erheblich. In diesem Artikel werden acht leistungsstarke JQuery -Plugins hervorgehoben, die den Prozess optimieren, insbesondere nützlich für die manuelle Website -Erstellung

Kernpunkte Dies in JavaScript bezieht sich normalerweise auf ein Objekt, das die Methode "besitzt", aber es hängt davon ab, wie die Funktion aufgerufen wird. Wenn es kein aktuelles Objekt gibt, bezieht sich dies auf das globale Objekt. In einem Webbrowser wird es durch Fenster dargestellt. Wenn Sie eine Funktion aufrufen, wird das globale Objekt beibehalten. Sie können den Kontext mithilfe von Methoden wie CALL (), Apply () und Bind () ändern. Diese Methoden rufen die Funktion mit dem angegebenen Wert und den Parametern auf. JavaScript ist eine hervorragende Programmiersprache. Vor ein paar Jahren war dieser Satz

JQuery ist ein großartiges JavaScript -Framework. Wie in jeder Bibliothek ist es jedoch manchmal notwendig, unter die Motorhaube zu gehen, um herauszufinden, was los ist. Vielleicht liegt es daran, dass Sie einen Fehler verfolgen oder nur neugierig darauf sind, wie JQuery eine bestimmte Benutzeroberfläche erreicht

Dieser Beitrag erstellt hilfreiche Cheat -Blätter, Referenzführer, schnelle Rezepte und Code -Snippets für die Entwicklung von Android-, Blackberry und iPhone -App. Kein Entwickler sollte ohne sie sein! Touch Gesten -Referenzhandbuch (PDF) Eine wertvolle Ressource für Desig


Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

MantisBT
Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
