Es scheint, dass das minlength
Attribut für ein <input>
Feld nicht funktioniert.
Gibt es ein anderes Attribut in HTML5, mit dessen Hilfe ich die minimale Länge eines Werts für Felder festlegen kann?
html
html5-validation
Emilan
quelle
quelle
Antworten:
Sie können das
pattern
Attribut verwenden . Dasrequired
Attribut wird ebenfalls benötigt, andernfalls wird ein Eingabefeld mit einem leeren Wert von der Einschränkungsüberprüfung ausgeschlossen .Wenn Sie die Option erstellen möchten, das Muster für "leer oder Mindestlänge" zu verwenden, können Sie Folgendes tun:
quelle
oninvalid="this.setCustomValidity('Your message')"
setCustomValidity
, wird die Fehlermeldung auch dann angezeigt, wenn Sie die Eingabe korrigiert haben. Sie können die folgendeonchange
Methode verwenden, um dem entgegenzuwirken.oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
Es ist eine
minlength
Eigenschaft in HTML5 - Spezifikation jetzt, sowie dievalidity.tooShort
Schnittstelle.Beide sind jetzt in neueren Versionen aller modernen Browser aktiviert. Weitere Informationen finden Sie unter https://caniuse.com/#search=minlength .
quelle
minlength
Attribute seit Version 51 .Hier ist eine reine HTML5-Lösung (wenn Sie eine Validierung mit einer Länge von 5 und einer maximalen Länge von 10 Zeichen wünschen)
http://jsfiddle.net/xhqsB/102/
quelle
title
Attribut mit der erforderlichen Nachricht hinzu.pattern
Antwort wurde einige Monate zuvor gegeben . Wie ist diese Antwort besser?Ja, da ist es. Es ist wie maximale Länge. W3.org-Dokumentation: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength
Falls
minlength
dies nicht funktioniert, verwenden Sie daspattern
von @ Pumbaa80 angegebene Attribut für dasinput
Tag.Für Textbereich: Zum Einstellen von max; benutze
maxlength
und gehe für min zu diesem Link .Sie finden hier sowohl für max als auch für min.
quelle
Ich habe Maxlength und Minlength mit oder ohne verwendet
required
und es hat bei HTML5 sehr gut funktioniert.`
quelle
Das minLength-Attribut (im Gegensatz zu maxLength) ist in HTML5 nicht nativ vorhanden. Es gibt jedoch einige Möglichkeiten, ein Feld zu überprüfen, wenn es weniger als x Zeichen enthält.
Ein Beispiel wird mit jQuery unter diesem Link gegeben: http://docs.jquery.com/Plugins/Validation/Methods/minlength
quelle
Nicht HTML5, aber trotzdem praktisch: Wenn Sie AngularJS verwenden , können Sie es sowohl
ng-minlength
für Eingaben als auch für Textbereiche verwenden. Siehe auch diesen Plunk .quelle
data-ng-minlength
aber warum sollte sich ein Entwickler für Standards interessieren? > __>data-ng-minlength
auch .Meine Lösung für Textbereiche mit jQuery und der Kombination von HTML5 erforderte eine Validierung, um die Mindestlänge zu überprüfen.
minlength.js
HTML
quelle
minlength
Das Attribut wird mittlerweile in den meisten Browsern weitgehend unterstützt .Aber wie bei anderen HTML5-Funktionen fehlt IE11 in diesem Panorama. Wenn Sie also eine breite IE11-Benutzerbasis haben, sollten Sie das
pattern
HTML5-Attribut verwenden, das in den meisten Browsern (einschließlich IE11) fast überall unterstützt wird .Um eine schöne und einheitliche Implementierung zu haben und möglicherweise erweiterbar oder dynamisch (basierend auf dem Framework, das Ihren HTML-Code generiert), würde ich für das
pattern
Attribut stimmen :Es gibt immer noch einen kleinen Usability-Haken bei der Verwendung
pattern
. Der Benutzer sieht bei der Verwendung eine nicht intuitive (sehr allgemeine) Fehler- / Warnmeldungpattern
. Siehe diese jsfiddle oder unten:In Chrome (aber in den meisten Browsern ähnlich) werden beispielsweise die folgenden Fehlermeldungen angezeigt:
mit
minlength
undmit
pattern
.quelle
Neue Version:
Es erweitert die Verwendung (Textbereich und Eingabe) und behebt Fehler.
quelle
Ich stelle fest, dass in Chrome manchmal, wenn das automatische Ausfüllen aktiviert ist und die Felder von der eingebauten Methode des automatischen Füllbrowsers Feld sind, die Validierungsregeln für die Mindestlänge umgangen werden. In diesem Fall müssen Sie das automatische Ausfüllen durch das folgende Attribut deaktivieren:
autocomplete = "aus"
quelle
Siehe http://caniuse.com/#search=minlength . Einige Browser unterstützen dieses Attribut möglicherweise nicht.
Wenn der Wert des "Typs" einer von ihnen ist:
Text, E-Mail, Suche, Passwort, Telefon oder URL (Warnung: Nummer nicht angeben | Keine Browserunterstützung "Tel" jetzt - 2017.10)
Verwenden Sie das Attribut minlength (/ maxlength), um die Mindestanzahl von Zeichen anzugeben.
z.B.
oder verwenden Sie das Attribut "Muster":
Wenn der "Typ" eine Zahl ist und die minimale Länge (/ maxlength) nicht unterstützt wird, können Sie min verwenden stattdessen das Attribut (/ max) verwenden.
z.B.
quelle
Ich habe diesen JavaScript-Code [minlength.js] geschrieben:
quelle
Wenn Sie dieses Verhalten ausführen möchten, zeigen Sie
immer ein kleines Präfix im Eingabefeld an, oder der Benutzer kann ein Präfix nicht löschen :
quelle
Ich habe dann Max und Min verwendet und es hat bei mir sehr gut funktioniert, aber ich bin mir nicht sicher, ob es sich um eine Codierungsmethode handelt. Ich hoffe, es hilft
quelle
In meinem Fall, in dem ich am meisten manuell und mit Firefox (43.0.4) validiere
minlength
undvalidity.tooShort
leider nicht verfügbar bin .Da ich nur minimale Längen speichern muss, um fortzufahren, besteht eine einfache und praktische Möglichkeit darin, diesen Wert einem anderen gültigen Attribut des Eingabe-Tags zuzuweisen. In diesem Fall ist, dann können Sie verwenden
min
,max
undstep
Eigenschaften von [type = „Anzahl“] Eingänge.Anstatt diese Grenzwerte in einem Array zu speichern, ist es einfacher, sie in derselben Eingabe zu finden, als die Element-ID so abzurufen, dass sie mit dem Array-Index übereinstimmt.
quelle
Fügen Sie sowohl einen Max- als auch einen Min-Wert hinzu. Sie können den Bereich der zulässigen Werte angeben:
quelle