ValidityState: tooShort Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.

Die schreibgeschützte tooShort Eigenschaft des ValidityState Interfaces zeigt an, ob der Wert eines <input>, <button>, <select>, <output>, <fieldset> oder <textarea>, nachdem er vom Benutzer bearbeitet wurde, kürzer ist als die minimale Codeeinheitlänge, die durch das minlength Attribut des Elements festgelegt wurde.

Wert

Ein boolescher Wert, der true ist, wenn der ValidityState nicht den Bedingungen entspricht.

Beispiele

Eingabe mit zu kurzem Zeichenfolgenwert

Das folgende Beispiel überprüft die Gültigkeit eines Text-Eingabeelements. Ein Zwang wurde mit dem minlength Attribut hinzugefügt, sodass die Eingabe eine Zeichenkette mit mindestens 4 Zeichen erwartet. Wenn der Benutzer eine zu kurze Zeichenkette eingibt, schlägt die Validierung der Bedingung fehl und die Stile, die der :invalid CSS-Pseudoklasse entsprechen, werden angewendet.

css

input:invalid {
  outline: red solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<pre id="log">Validation logged here...</pre>
<input type="text" id="userText" minlength="4" />

const userInput = document.getElementById("userText");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.tooShort) {
    log("Not enough characters entered.");
  } else {
    log("Input is valid…");
  }
});

Spezifikationen

Spezifikation
HTML # dom-validitystate-tooshort-dev

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden