JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung

JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung

In diesem Artikel wird der spezifische Code von JavaScript zur zufälligen Generierung von Bestätigungscodes und zur Überprüfung als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Geben Sie den Bestätigungscode ein (Groß-/Kleinschreibung beachten) und klicken Sie zur Bestätigung auf „Bestätigen“. Popup-Fenster fordert Sie auf, wenn ein Fehler auftritt

Klicken Sie hier, um einen zufälligen Bestätigungscode neu zu generieren

Nachfrage, wenn der Verifizierungscode falsch eingegeben wurde

<Text>
    <div Klasse="v_code">
        <div Klasse="Code anzeigen">
            <span class="code" id="checkCode"></span>
            <a href="#" id="linkbt">Kann nicht klar sehen, ändere eins</a>
        </div>
        <div Klasse="Eingabecode">
            <label for="inputCode">Bestätigungscode:</label>
            <Eingabetyp="Text" id="Eingabecode">
            <span id="text_show"></span>
        </div>
        <input type="button" id="Button1" value="Bestätigen">
    </div>
    <Skript>
        // 1. Generiere einen Bestätigungscode // 6 Ziffern 0-9 af. Generiere zufällig 6 Ziffern, müssen 0-9 af sein. string // Array-Index 0, 1, 2... Index 0-15 zufällig aus dem Array // 2. Überprüfe und klicke auf „Bestätigen“, um zu vergleichen. window.onload = function() {
            const randomWord = () => {
                lass Code = '';
                für (var i = 0; i < 6; i++) {
                    var Typ = getRandom(1,3);
                    Schalter(Typ) {
                        Fall 1:
                            Code += String.fromCharCode(getRandom(48,57)) // digitaler Umbruch;
                        Fall 2:
                            Code += String.fromCharCode(getRandom(65,90)); //Großbuchstaben;
                        Fall 3:
                            Code += String.fromCharCode(getRandom(97,122)); //Kleinbuchstaben trennen;
                    }
                }
                Rückgabecode;
            }
            Funktion getRandom(min, max) {
                gibt Math.round(Math.random()*(max-min)+min) zurück
            }

            //Datenabruffunktion aufrufen const rand = randomWord();
            //console.log(rand);
            var checkCode = document.getElementById('checkCode');
            checkCode.innerText = rand;
        
        // Klicken, um die Zufallszahl zu wechseln var linkbt = document.getElementById('linkbt');
            linkbt.addEventListener('klicken', function() {
                checkCode.innerText = zufälligesWord();
            })

        // Zum Vergleich abschicken document.getElementById('Button1').onclick = function() {
                var Eingabecode = document.querySelector('#Eingabecode');
                wenn (EingabeCode.Wert != PrüfCode.innerText) {
                    alert('Der von Ihnen eingegebene Bestätigungscode ist falsch');
                    EingabeCode.Wert = '';
                    gibt false zurück;
                } anders {
                    alert('Eingabe ist korrekt');
                }
            }
        }
    </Skript>
</body>

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:
  • JS implementiert die zufällige Generierung von Bestätigungscodes
  • JavaScript implementiert die Generierung eines 4-stelligen zufälligen Bestätigungscodes
  • JavaScript klickt auf die Schaltfläche, um einen 4-stelligen zufälligen Bestätigungscode zu generieren
  • JavaScript-Funktion kapselt zufälligen Farbüberprüfungscode (vollständiger Code)

<<:  Erläuterung der Docker Compose-Netzwerkeinstellungen

>>:  Mysql Workbench - Abfragemethode für MySQL-Datenbanken

Artikel empfehlen

JavaScript implementiert einfaches Scrollfenster

In diesem Artikelbeispiel wird der spezifische Ja...

Kurze Einführung und Verwendung von Table und div

Web-Frontend 1 Studierendenausweis Name Geschlech...

So erstellen Sie schnell einen FTP-Dateidienst mit FileZilla

Um die Speicherung und den Zugriff auf Dateien zu...

Detaillierte Einführung in den MySQL-Datenbankindex

Inhaltsverzeichnis Mindmap Einfaches Verständnis ...

Detaillierte Erläuterung der Cache-Konfiguration von Nginx Proxy_Cache

Vorwort: Aufgrund meiner Arbeit beschäftige ich m...

Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien

Originallink: https://vien.tech/article/138 Vorwo...

Reines CSS zum Hinzufügen von Stil zur ausgewählten Implementierung (kein Skript)

Ändern Sie den Standardstil der Auswahl, normalerw...

Einrichten der React-Native-Umgebung und grundlegende Einführung

Umgebungsvorbereitung 1. Umweltkonstruktion React...

CSS-Animation kombiniert mit SVG zur Erzeugung eines Energieflusseffekts

Der endgültige Effekt ist wie folgt: Die Animatio...

So entwerfen Sie MySQL-Statistikdatentabellen

Inhaltsverzeichnis Ist eine Echtzeitaktualisierun...

Mehrere Möglichkeiten zur manuellen Implementierung von HMR in Webpack

Inhaltsverzeichnis 1. Einleitung 2. GitHub 3. Gru...