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
CSS zum Erzielen von leuchtendem Text und ein paar JS-Spezialeffekten
Umsetzungsideen: Verwenden Sie text-shadow in CSS...
Detaillierte Erklärung der Anwendung von CSS Sprite
CSS Sprite, auch bekannt als CSS Sprite, ist eine...
So verwenden Sie Docker zum Erstellen einer einheitlichen OpenLDAP+phpLDAPadmin-Benutzerauthentifizierung
1. Hintergrund Verwenden Sie LDAP, um betriebs- u...
Der Unterschied zwischen div und span in HTML (Gemeinsamkeiten und Unterschiede)
Gemeinsamkeiten: Das DIV-Tag und das SPAN-Tag beh...
MySql 8.0.16-win64 Installations-Tutorial
1. Entpacken Sie die heruntergeladene Datei wie u...
Erfahrungen bei der Neugestaltung der Homepage von TOM.COM
<br />Ohne Vorwarnung sah ich auf cnBeta Neu...
Installieren Sie das Linux-System automatisch basierend auf Cobbler
1. Komponenten installieren yum install epel-rpm-...
Lebenszyklus und Hook-Funktionen in Vue
Inhaltsverzeichnis 1. Was ist der Lebenszyklus 2....
Detaillierte Erläuterung der Clientkonfiguration für die Entwicklung von vue3 + electron12 + dll
Inhaltsverzeichnis Ändern der Repository-Quelle S...
So konfigurieren Sie MGR Single Master und mehrere Slaves in MySQL 8.0.15
1. Einleitung MySQL Group Replication (kurz MGR) ...
Wann ist die Verwendung von dl, dt und dd sinnvoll?
dl: Definitionsliste Definitionsliste dt: Definiti...
Analyse der Implementierungsschritte für die Docker-Containerverbindung
Im Allgemeinen verwenden wir nach dem Start des C...
Adaptive HTML-Tabellenmethode
<body style="scroll:no"> <Tabe...
Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen
Der Container wurde bereits erstellt. So erfahren...
So lösen Sie das Problem des verstümmelten MySQL-Inserts
Problembeschreibung: Beim Einfügen chinesischer Z...