Bevestig wachtwoordvelden zijn nodig om op te nemen bij het maken van online formulieren waarin gebruikers worden gevraagd een wachtwoord in te stellen. Het wachtwoordveld verbergt standaard de invoer van de gebruiker, waardoor het nodig is om een soort mechanisme te hebben waarmee gebruikers kunnen bevestigen dat ze het juiste wachtwoord hebben geschreven zonder typfouten te maken. In het veld wachtwoord bevestigen wordt de gebruiker gevraagd zijn wachtwoord opnieuw te controleren als hij tekens verkeerd invoert en de velden voor wachtwoord en bevestigingswachtwoord niet overeenkomen.
In dit bericht is ons doel om een HTML-formulier te maken dat overeenkomt met de invoer van de gebruiker in de Wachtwoord en bevestig wachtwoord velden om te bevestigen of de gebruiker het juiste wachtwoord heeft getypt of typfouten heeft gemaakt.
Stap 1: HTML-formulier
De eerste stap is het maken van een HTML-formulier dat de invoer van de gebruiker nodig heeft:
< centrum >
< h2 > Linux-tip: h2 >
< het formulier >
< p > Voer wachtwoord in p >
< invoer type = 'wachtwoord' ID kaart = 'slagen voor' > < br >< br >
< p > bevestig wachtwoord p >
< invoer type = 'wachtwoord' ID kaart = 'bevestigen' > < br >< br >
< knop type = 'indienen' bij klikken = 'wachtwoordbevestiging()' > Logboek in knop >
het formulier >
centrum >
We hebben een eenvoudig HTML-formulier gemaakt met twee invoervelden van het type wachtwoord en een Login-knop die de . aanroept wachtwoordbevestiging() functie wanneer erop wordt geklikt.
Stap 2: JavaScript-formuliervalidatie
Nu zullen we JavaScript-code schrijven in de wachtwoordbevestiging() functie die het wachtwoord valideert:
functie wachtwoordbevestiging ( ) {
var wachtwoord = document.getElementById ( 'slagen voor' ) .waarde;
var confirmPassword = document.getElementById ( 'bevestigen' ) .waarde;
als ( wachtwoord == '' ) {
alarmeren ( 'Fout: het wachtwoordveld is leeg.' ) ;
} anders als ( wachtwoord == bevestigWachtwoord ) {
alarmeren ( 'Ingelogd' ) ;
} anders {
alarmeren ( 'Zorg er alstublieft voor dat uw wachtwoorden overeenkomen.' )
}
}
Binnen in de wachtwoordbevestiging() functie krijgen we eerst de waarden van wachtwoord en bevestigen wachtwoordvelden en slaan ze op in variabelen. Vervolgens gebruiken we voorwaardelijke uitspraken om te controleren op verschillende gevallen.
Geval 1: Wachtwoordveld is leeg
De eerste voorwaarde controleert of het wachtwoordveld leeg is. We vragen de gebruiker om het wachtwoord in te voeren als het veld leeg is:
Case 2: Wachtwoorden komen overeen
Als de wachtwoorden overeenkomen, logt de gebruiker met succes in:
Geval 3: Wachtwoorden komen niet overeen
Als de wachtwoorden niet overeenkomen, vragen we de gebruiker om de wachtwoorden opnieuw in te voeren en ervoor te zorgen dat ze overeenkomen:
De JavaScript- en HTML-code zien er samen ongeveer zo uit:
< html >
< lichaam >
< centrum >
< h2 > Linux-tip: h2 >
< het formulier >
< p > Voer wachtwoord in p >
< invoer type = 'wachtwoord' ID kaart = 'slagen voor' > < br >< br >
< p > bevestig wachtwoord p >
< invoer type = 'wachtwoord' ID kaart = 'bevestigen' > < br >< br >
< knop type = 'indienen' bij klikken = 'wachtwoordbevestiging()' > Logboek in knop >
het formulier >
centrum >
lichaam >
< script >
functie wachtwoordbevestiging ( ) {
var wachtwoord = document.getElementById ( 'slagen voor' ) .waarde;
var confirmPassword = document.getElementById ( 'bevestigen' ) .waarde;
als ( wachtwoord == '' ) {
alarmeren ( 'Fout: het wachtwoordveld is leeg.' ) ;
} anders als ( wachtwoord == bevestigWachtwoord ) {
alarmeren ( 'Ingelogd' ) ;
} anders {
alarmeren ( 'Zorg er alstublieft voor dat uw wachtwoorden overeenkomen.' )
}
}
script >
html >
Conclusie
Mensen kunnen vaak fouten maken, maar dat zou hen er niet van moeten weerhouden om in te loggen op hun accounts. Zelfs de kleinste fout bij het invoeren van een wachtwoord kan de toegang van een gebruiker tot zijn account beperken. Het is dus altijd een goed idee om het wachtwoord van een gebruiker nogmaals te controleren om te bevestigen dat hij het juiste wachtwoord heeft ingevoerd.