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 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:

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!