suchen
HeimWeb-Frontendjs-TutorialSofortformularvalidierung mit JavaScript

Echtzeit-Formularüberprüfung: Subtile Verbesserungen zur Verbesserung der Benutzererfahrung

Instant Form Validation Using JavaScript

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 und required 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 Attribut aria-invalid gesteuert wird, um den Status des Feldes anzuzeigen. Diese Funktion kann an das Ereignis onchange 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:

Instant Form Validation Using JavaScript

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

Attribute, um Fallback -Semantik für assistive Technologien bereitzustellen, die keine neuen Eingabetypen unterstützen.

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

-Mobilie bietet offensichtlich Informationen zu Barrierefreiheit, kann aber auch als CSS -Haken verwendet werden, um rote Ränder anzuwenden:
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

Sobald wir diese Dienstprogramme haben, können wir die Hauptvalidierungsfunktion definieren, die das Feld testet, und dann die tatsächliche Validierung nach Bedarf durchführen:

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

aufblasen (unter Verwendung einer Technologie, die allgemein als Ereignisdelegierter bezeichnet wird), aber im Internet Explorer 8 und früher kommt das
<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

Schlussfolgerung und potenzielle
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

(Der FAQ-Abschnitt zur Echtzeitüberprüfung kann hier hinzugefügt werden. Der Inhalt entspricht dem FAQS-Abschnitt im Originaldokument)

Das obige ist der detaillierte Inhalt vonSofortformularvalidierung mit JavaScript. 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
Die Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheDie Ursprünge von JavaScript: Erforschung seiner ImplementierungsspracheApr 29, 2025 am 12:51 AM

JavaScript stammt aus dem Jahr 1995 und wurde von Brandon Ike erstellt und realisierte die Sprache in C. 1.C-Sprache bietet Programmierfunktionen auf hoher Leistung und Systemebene für JavaScript. 2. Die Speicherverwaltung und die Leistungsoptimierung von JavaScript basieren auf C -Sprache. 3. Die plattformübergreifende Funktion der C-Sprache hilft JavaScript, auf verschiedenen Betriebssystemen effizient zu laufen.

Hinter den Kulissen: Welche Sprache macht JavaScript?Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.

Die Zukunft von Python und JavaScript: Trends und VorhersagenDie Zukunft von Python und JavaScript: Trends und VorhersagenApr 27, 2025 am 12:21 AM

Zu den zukünftigen Trends von Python und JavaScript gehören: 1. Python wird seine Position in den Bereichen wissenschaftlicher Computer und KI konsolidieren. JavaScript wird die Entwicklung der Web-Technologie fördern. Beide werden die Anwendungsszenarien in ihren jeweiligen Bereichen weiter erweitern und mehr Durchbrüche in der Leistung erzielen.

Python vs. JavaScript: Entwicklungsumgebungen und ToolsPython vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AM

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.

Ist JavaScript in C geschrieben? Prüfung der BeweiseIst JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenJavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteC und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptVon Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

MantisBT

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.

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung