Bekræft adgangskodefelter er nødvendige at inkludere, når du laver onlineformularer, som beder brugere om at angive en adgangskode. Adgangskodefeltet skjuler brugerens input som standard, hvilket gør det nødvendigt at have en form for mekanisme, der gør det muligt for brugere at bekræfte, at de har skrevet den rigtige adgangskode uden at lave nogen stavefejl. Bekræft adgangskode-feltet beder brugeren om at kontrollere sin adgangskode igen, hvis de skriver forkerte tegn, og felterne for adgangskode og bekræftelse af adgangskode ikke stemmer overens.
I dette indlæg er vores mål at lave en HTML-formular, som matcher brugerens input i Adgangskode og Bekræft kodeord felter for at bekræfte, om brugeren har indtastet den rigtige adgangskode eller har lavet stavefejl.
Trin 1: HTML-formular
Det første trin er at lave en HTML-formular, som tager brugerens input:
< centrum >
< h2 > Linux tip h2 >
< form >
< s > Indtast adgangskode s >
< input type = 'adgangskode' id = 'passere' > < br >< br >
< s > Bekræft kodeord s >
< input type = 'adgangskode' id = 'bekræft pass' > < br >< br >
< knap type = 'Indsend' onclick = 'Kodeords bekræftelse()' > Log i knap >
form >
centrum >
Vi har lavet en simpel HTML-formular, som har to indtastningsfelter af typen adgangskode og en Login-knap, som kalder Kodeords bekræftelse() funktion, når der klikkes på den.
Trin 2: JavaScript-formularvalidering
Nu vil vi skrive JavaScript-kode inde i Kodeords bekræftelse() funktion, der validerer adgangskoden:
fungere Kodeords bekræftelse ( ) {
var password = document.getElementById ( 'passere' ) .værdi;
var confirmPassword = document.getElementById ( 'bekræft pass' ) .værdi;
hvis ( adgangskode == '' ) {
alert ( 'Fejl: Adgangskodefeltet er tomt.' ) ;
} andet hvis ( password == bekræftPassword ) {
alert ( 'Logget ind' ) ;
} andet {
alert ( 'Sørg venligst for, at dine adgangskoder matcher.' )
}
}
Inde i Kodeords bekræftelse() funktion får vi først værdierne af adgangskode og bekræfter adgangskodefelter og gemmer dem inde i variabler. Vi bruger derefter betingede udsagn til at kontrollere for forskellige tilfælde.
Tilfælde 1: Adgangskodefeltet er tomt
Den første betingede kontrollerer, om adgangskodefeltet er tomt. Vi beder brugeren om at indtaste adgangskoden, hvis feltet er tomt:
Tilfælde 2: Adgangskoder matcher
Hvis adgangskoderne matcher, logger brugeren ind:
Tilfælde 3: Adgangskoder stemmer ikke overens
Hvis adgangskoderne ikke stemmer overens, beder vi brugeren om at indtaste adgangskoden igen og sikre, at de matcher:
JavaScript og HTML-koden sammen ser nogenlunde sådan ud:
< html >
< legeme >
< centrum >
< h2 > Linux tip h2 >
< form >
< s > Indtast adgangskode s >
< input type = 'adgangskode' id = 'passere' > < br >< br >
< s > Bekræft kodeord s >
< input type = 'adgangskode' id = 'bekræft pass' > < br >< br >
< knap type = 'Indsend' onclick = 'Kodeords bekræftelse()' > Log i knap >
form >
centrum >
legeme >
< manuskript >
fungere Kodeords bekræftelse ( ) {
var password = document.getElementById ( 'passere' ) .værdi;
var confirmPassword = document.getElementById ( 'bekræft pass' ) .værdi;
hvis ( adgangskode == '' ) {
alert ( 'Fejl: Adgangskodefeltet er tomt.' ) ;
} andet hvis ( password == bekræftPassword ) {
alert ( 'Logget ind' ) ;
} andet {
alert ( 'Sørg venligst for, at dine adgangskoder matcher.' )
}
}
manuskript >
html >
Konklusion
Mennesker kan ofte lave fejl, men det bør ikke forhindre dem i at logge ind på deres konti. Selv den mindste fejl ved at indtaste en adgangskode kan begrænse en brugers adgang til deres konto. Så det er altid en god idé at dobbelttjekke en brugers adgangskode for at bekræfte, at de har indtastet den rigtige.