Bekräfta lösenordsfält är nödvändiga att inkludera när du gör onlineformulär som ber användare att ange ett lösenord. Lösenordsfältet döljer användarens inmatning som standard vilket gör det nödvändigt att ha någon form av mekanism som tillåter användare att bekräfta att de har skrivit rätt lösenord utan att göra några stavfel. Bekräfta lösenordsfältet uppmanar användaren att kontrollera sitt lösenord igen om de skriver fel tecken och fälten för lösenord och bekräftelse av lösenord inte stämmer överens.
I det här inlägget är vårt mål att skapa ett HTML-formulär som matchar användarens inmatning i Lösenord och Bekräfta lösenord fält för att bekräfta om användaren har skrivit rätt lösenord eller har gjort några stavfel.
Steg 1: HTML-formulär
Det första steget är att skapa ett HTML-formulär som tar användarens input:
< Centrum >
< h2 > Linux tips h2 >
< form >
< sid > Skriv in lösenord sid >
< inmatning typ = 'Lösenord' id = 'passera' > < br >< br >
< sid > Bekräfta lösenord sid >
< inmatning typ = 'Lösenord' id = 'bekräfta pass' > < br >< br >
< knapp typ = 'Skicka in' onclick = 'lösenordsbekräftelse()' > Logga i knapp >
form >
Centrum >
Vi har skapat ett enkelt HTML-formulär som har två inmatningsfält av typen lösenord och en inloggningsknapp som anropar lösenordsbekräftelse() funktion när den klickas.
Steg 2: JavaScript-formulärvalidering
Nu kommer vi att skriva JavaScript-kod inuti lösenordsbekräftelse() funktion som validerar lösenordet:
fungera lösenordsbekräftelse ( ) {
var lösenord = document.getElementById ( 'passera' ) .värde;
var confirmPassword = document.getElementById ( 'bekräfta pass' ) .värde;
om ( lösenord == '' ) {
varna ( 'Fel: Lösenordsfältet är tomt.' ) ;
} annan om ( lösenord == bekräftaLösenord ) {
varna ( 'Inloggad' ) ;
} annan {
varna ( 'Se till att dina lösenord matchar.' )
}
}
Inuti lösenordsbekräftelse() funktion får vi först värdena för lösenord och bekräfta lösenordsfält och lagrar dem i variabler. Vi använder sedan villkorliga uttalanden för att kontrollera olika fall.
Fall 1: Lösenordsfältet är tomt
Det första villkoret kontrollerar om lösenordsfältet är tomt. Vi ber användaren att skriva in lösenordet om fältet är tomt:
Fall 2: Lösenord matchar
Om lösenorden matchar loggar användaren in:
Fall 3: Lösenord stämmer inte överens
Om lösenorden inte stämmer överens ber vi användaren att skriva in lösenorden igen och se till att de matchar:
JavaScript och HTML-koden tillsammans ser ut ungefär så här:
< html >
< kropp >
< Centrum >
< h2 > Linux tips h2 >
< form >
< sid > Skriv in lösenord sid >
< inmatning typ = 'Lösenord' id = 'passera' > < br >< br >
< sid > Bekräfta lösenord sid >
< inmatning typ = 'Lösenord' id = 'bekräfta pass' > < br >< br >
< knapp typ = 'Skicka in' onclick = 'lösenordsbekräftelse()' > Logga i knapp >
form >
Centrum >
kropp >
< manus >
fungera lösenordsbekräftelse ( ) {
var lösenord = document.getElementById ( 'passera' ) .värde;
var confirmPassword = document.getElementById ( 'bekräfta pass' ) .värde;
om ( lösenord == '' ) {
varna ( 'Fel: Lösenordsfältet är tomt.' ) ;
} annan om ( lösenord == bekräftaLösenord ) {
varna ( 'Inloggad' ) ;
} annan {
varna ( 'Se till att dina lösenord matchar.' )
}
}
manus >
html >
Slutsats
Människor kan ofta göra misstag men det borde inte hindra dem från att logga in på sina konton. Även det minsta misstag i att ange ett lösenord kan begränsa en användares åtkomst till sitt konto. Så det är alltid en bra idé att dubbelkolla en användares lösenord för att bekräfta att de har angett rätt.