In dit hoofdstuk bespreken we wachtwoordvalidatie met JavaScript. Elke keer dat een gebruiker een account aanmaakt op een website of app, moeten we een wachtwoord valideren. We moeten dus een geldig wachtwoord verifiëren en de wachtwoordvalidatie bevestigen. Voor een geldig wachtwoord moeten de volgende parameters aanwezig zijn om geldig te zijn:
- Een wachtwoord moet alfanumeriek zijn.
- De eerste letter van het wachtwoord moet een hoofdletter zijn.
- Het wachtwoord moet een speciaal teken bevatten (@, $, !, &, enz.).
- De wachtwoordlengte moet groter zijn dan 8 tekens.
- Een van de belangrijkste is dat de wachtwoordvelden niet leeg mogen zijn.
Wanneer een gebruiker een wachtwoord aanmaakt, is er altijd nog een veld om het wachtwoord te bevestigen. Er wordt gecontroleerd of het door de gebruiker ingevoerde wachtwoord hetzelfde is als de velden voor het bevestigen van het wachtwoord. Om een geldig wachtwoord aan te maken, moeten zowel de waarden voor het wachtwoord als het wachtwoord voor het bevestigen van het wachtwoord overeenkomen.
Eerst zullen we controleren op een geldig wachtwoord en vervolgens de wachtwoordvalidatiecontroles bevestigen.
Geldig wachtwoord Validatie
In dit voorbeeld zullen we controleren of het door de gebruiker aangemaakte wachtwoord geldig is of niet en overeenkomt met alle hierboven besproken parameters. Zie onderstaande code voor wachtwoordverificatie.
Kopieer code
hoeveel 0 op een miljard
Verification of valid Password function verifyPassword() { var pw = document.getElementById('pswd').value; //check empty password field if(pw == '') { document.getElementById('message').innerHTML = '**Fill the password please!'; return false; } //minimum password length validation if(pw.length 15) { document.getElementById('message').innerHTML = '**Password length must not exceed 15 characters'; return false; } else { alert('Password is correct'); } } <h3> Verify valid password Example </h3> <td> Full Name* </td> <span id="blankMsg"> </span> <br> <br> <td> Last Name </td> <span id="charMsg"> </span> <br> <br> <td> Create Password* </td> <span id="message1"> </span> <br> <br> <td> Confirm Password* </td> <span id="message2"> </span> <br> <br> Reset Test het nu Uitvoer
Er verschijnt een HTML-formulier op internet door de bovenstaande code uit te voeren. Voer hier de gegevens in tekstvelden in en klik op de knop Verzenden om te verwerken. Volgens validaties zal er, als de gegevens correct zijn, een waarschuwingsvenster verschijnen met een bericht: Uw wachtwoord aangemaakt met succes. Hier, wanneer u op klikt OK knop, gaat het naar een andere uitgang.
Schermafbeelding 1
Wanneer u op de OK knop in het waarschuwingsvenster, gaat het naar een eenvoudige HTML-uitvoer waar een bericht wordt weergegeven Formuliergegevens zijn succesvol verzonden .
Schermafbeelding 2
latex tafel
Uitvoer bij het opgeven van verkeerde invoer
Als u een verkeerde waarde heeft ingevoerd of een verplicht veld leeg heeft gelaten, wordt er rechts van het invoervak een foutmelding weergegeven. Deze fouten worden na de validatiecontrole één voor één weergegeven bij elke klik op het Indienen knop. Zie de fouten in onderstaande schermafbeelding:
Om te controleren of alle validaties correct werken of niet, kopieert u de code en voert u deze uit in uw JavaScript-compiler.