JavaScript implementiert die Eingabeüberprüfung im Kennwortfeld
|
Manchmal ist es notwendig, bei Benutzereingaben eine einfache Überprüfung auf der Front-End-Seite durchzuführen, um den Druck auf den Server zu verringern So begrenzen Sie beispielsweise die Eingabelänge eines Felds: Nach dem Eingabefeld wird eine Eingabeaufforderung für den Eingabebereich angezeigt. Wenn Sie die falsche Länge eingeben, wird eine Fehlermeldung angezeigt. Wenn Sie die richtige Länge eingeben, wird die richtige Eingabeaufforderung angezeigt. Umsetzungsideen 1. Schreiben Sie zuerst die Eingabeaufforderungsinformationen. Beispielcode
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Eingabeaufforderung für Passwortfeld</title>
<Stil>
div {
Breite: 600px;
Rand: 100px automatisch;
}
Eingabe {
Gliederung: keine;
}
.Nachricht {
Anzeige: Inline-Block;
Schriftgröße: 12px;
Farbe: #999;
Hintergrund: URL (Bilder/提示.png) keine Wiederholung links Mitte/16px 16px;
Polsterung links: 20px;
}
.falsch {
Hintergrundbild: URL (Bilder/Fehler.png);
Farbe: rot;
}
.Rechts {
Hintergrundbild: URL (Bilder/korrekt.png);
Farbe: grün;
}
</Stil>
</Kopf>
<Text>
<div Klasse="registrieren">
<input type="password" class="inp">
<p class="message">Bitte geben Sie ein 8-18-stelliges Passwort ein</p>
</div>
<Skript>
var Passwort = document.querySelector('.inp');
var Nachricht = document.querySelector('.message');
Passwort.onblur = function() {
wenn (diese.Wertlänge < 8 || diese.Wertlänge > 18) {
message.innerHTML = „Die Passwortlänge ist falsch, sie sollte 8 bis 18 Zeichen lang sein“;
message.className = 'Nachricht falsch';
} anders {
message.innerHTML = „Die Passwortlänge ist korrekt“;
message.className = 'Nachricht rechts';
}
}
</Skript>
</body>
</html>Seiteneffekt:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erklärung, wo die von Docker abgerufenen Bilder gespeichert werden
>>: Was bedeutet das n nach int(n) in MySQL?
Artikel empfehlen
Einführung in den Prozess zum Erstellen einer TCP-Verbindung im Linux-System
Inhaltsverzeichnis Schritte zum Erstellen von TCP...
Detaillierte Erläuterung zur Verwendung von JS, um den Effekt einer PS-Radiergummi-Rubbelkarte auf der Leinwand zu erzielen
Inhaltsverzeichnis Wirkungsdemonstration:Hauptimp...
CSS implementiert die Funktion zum Ausblenden des Suchfelds (Animation in Vorwärts- und Rückwärtssequenz).
Das Platzieren eines Suchfelds in der oberen Menü...
Reagieren Sie mit Beispielcode zur Implementierung des Anmeldeformulars
Als Vue-Benutzer ist es an der Zeit, React zu erw...
100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)
Vorwort „Wenn es um Bildbearbeitung geht, denken ...
W3C Tutorial (12): W3C Soap Aktivität
Bei Webdiensten geht es um die Kommunikation zwis...
So importieren Sie CSS-Stile in externe HTML-Stylesheets
Der Link-In-Stil besteht darin, alle Stile in ein...
Lösen Sie das Problem, dass der MySQL-Verbindungsport belegt ist und Dateipfadfehler verursacht
Heute Morgen hatte ich vor, mit Wampserver eine P...
Anpassungsmethode des Linux-Peripheriedateisystems
Vorwort Wenn wir von Linux-Systemen sprechen, mei...
Div-CSS-Benennungsstandards, CSS-Klassenbenennungsregeln (entsprechend SEO-Standards)
Bei der Suchmaschinenoptimierung (SEO) sind viele ...
Vue verwendet Filter zum Formatieren von Daten
In diesem Artikelbeispiel wird der spezifische Co...
Windows kann den MySQL-Dienst nicht starten und meldet Fehler 1067 – Lösung
Als ich mich bei MySQL anmeldete, wurde mir plötz...
Lösen Sie schnell das Problem der weißen Lücke (Flash-Bildschirm), wenn CSS @keyframes verwendet, um Bilder für den ersten Zyklus zu laden
Problemerklärung: Wenn Sie die CSS-Eigenschaft „a...
Detailliertes Tutorial zur Installation von mysql8.0.22 auf Alibaba Cloud centos7
1. Laden Sie das MySQL-Installationspaket herunte...
Pessimistisches Sperren und optimistisches Sperren in MySQL
In relationalen Datenbanken sind pessimistisches ...