Implementierung von Kennwortfeld-Verifizierungsinformationen basierend auf JavaScript
|
In diesem Artikelbeispiel wird der spezifische JavaScript-Code zur Implementierung von Informationen zur Kennwortfeldüberprüfung zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
div {
Breite: 600px;
Rand: 100px automatisch;
}
.Nachricht {
Anzeige: Inline-Block;
Schriftgröße: 12px;
Farbe: #999;
Hintergrund: URL (./img/1.png) keine Wiederholung links Mitte;
Polsterung links: 10px;
}
.falsch {
Farbe: rot;
Hintergrundbild: URL (img/2.png);
}
.Rechts {
Farbe: grün;
Hintergrundbild: URL (img/3.png);
}
</Stil>
</Kopf>
<Text>
<div Klasse="registrieren">
<input type="password" class="ipt">
<p class="message">Bitte geben Sie ein 6-16-stelliges Passwort ein</p>
</div>
<Skript>
//Element abrufen var ipt = document.querySelector('.ipt');
var Nachricht = document.querySelector('.message');
//Ereignis registrieren ipt.onblur = function() {
//Entsprechend der Länge der Form valueif (this.value.length < 6 || this.value.length > 16) {
message.className = 'Nachricht falsch';
message.innerHTML = „Die Anzahl der eingegebenen Ziffern ist falsch“;
} anders {
message.className = 'Nachricht rechts';
message.innerHTML = 'Kostenlos eingeben';
}
}
</Skript>
</body>
</html>Ergebnisse der Operation
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:
|
<<: Grundprinzipien des skalierbaren MySQL-Designs
>>: Detaillierte Erläuterung des Bereitstellungsprozesses von Docker Alibaba Cloud RocketMQ 4.5.1
Artikel empfehlen
Implementierung einer verschiebbaren Komponente zum Teilen des linken und rechten Bedienfelds in Vue3
Inhaltsverzeichnis Komponenten zerlegen Linkes Fe...
So zeigen Sie die Ausführungszeit von MySQL-Anweisungen über Query Profiler an
Im vorherigen Artikel wurden zwei Methoden zum Üb...
So ändern Sie den Hostnamen in Linux
1. Den aktuellen Hostnamen anzeigen [root@fangjia...
Über die Rolle von Metadaten in HTML (aus dem Internet gesammelt und sortiert)
W3Cschool erklärt es so Das <meta>-Element l...
Kompilieren Sie CPP-Dateien mit G++ in Ubuntu
Als ich die CPP-Datei zum ersten Mal mit G++ komp...
Die Fallstricke beim Erlernen von Vue.js
Inhaltsverzeichnis Klasse void zeigen ES6-Pfeilfu...
Detaillierter Installationsprozess und Konfiguration von mysql5.7.19 zip
Offizielle Version von MySQL v5.7.19 (32/64-Bit-I...
So verwenden Sie die Shell, um Batchvorgänge auf mehreren Servern auszuführen
Inhaltsverzeichnis SSH-Protokoll SSH Verbindungsp...
Detaillierte Erläuterung der Schritte zur Konfiguration des Centos7-Bridge-Netzwerks unter VMware
Die vollständigen Schritte zur Konfiguration des ...
Implementierungsmethode für horizontale und vertikale MySQL-Tabellenkonvertierungsvorgänge
Dieser Artikel veranschaulicht anhand von Beispie...
Zusammenfassung der Erfahrungen mit der Entwicklung von HTML+CSS-Projekten (empfohlen)
Ich habe mein Blog seit mehreren Tagen nicht aktu...
So verwenden Sie worker_threads zum Erstellen neuer Threads in nodejs
Einführung Wie im vorherigen Artikel erwähnt, gib...
Detaillierte Erklärung des Vue-Lebenszyklus
Inhaltsverzeichnis Warum den Lebenszyklus versteh...
Lösung für das Problem, dass der Server bei der Installation des Pagoda Panels keine Remoteverbindung zur Datenbank herstellen kann
Ich plane, meine eigene Website zu erstellen, als...
Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode
In diesem Artikelbeispiel wird der spezifische Co...