I campi di conferma password sono necessari da includere quando si creano moduli online che chiedono agli utenti di impostare una password. Il campo della password nasconde l'input dell'utente per impostazione predefinita, rendendo necessario un qualche tipo di meccanismo che consenta agli utenti di confermare di aver scritto la password corretta senza errori di battitura. Il campo di conferma della password richiede all'utente di ricontrollare la propria password se ha digitato in modo errato dei caratteri e la password e i campi di conferma della password non corrispondono.
In questo post il nostro obiettivo è creare un modulo HTML che corrisponda all'input dell'utente nel file Parola d'ordine e Conferma password campi per confermare se l'utente ha digitato la password corretta o ha commesso errori di battitura.
Passaggio 1: modulo HTML
Il primo passo è creare un modulo HTML che accetti l'input dell'utente:
< centro >
< h2 > Suggerimento Linux h2 >
< modulo >
< p > Inserire la password p >
< ingresso genere = 'parola d'ordine' id = 'passaggio' > < fr >< fr >
< p > Conferma password p >
< ingresso genere = 'parola d'ordine' id = 'conferma il passaggio' > < fr >< fr >
< pulsante genere = 'Sottoscrivi' al clic = 'conferma password()' > Tronco d'albero in pulsante >
modulo >
centro >
Abbiamo creato un semplice modulo HTML che ha due campi di input di tipo password e un pulsante Login che richiama il file conferma password() funzione quando viene cliccato.
Passaggio 2: convalida del modulo JavaScript
Ora scriveremo il codice JavaScript all'interno del file conferma password() funzione che convalida la password:
funzione conferma password ( ) {
var password = document.getElementById ( 'passaggio' ) .valore;
var confirmPassword = document.getElementById ( 'conferma il passaggio' ) .valore;
Se ( password == '' ) {
mettere in guardia ( 'Errore: il campo della password è vuoto.' ) ;
} altro Se ( password == confermaPassword ) {
mettere in guardia ( 'Connesso' ) ;
} altro {
mettere in guardia ( 'Assicurati che le tue password corrispondano.' )
}
}
Dentro il conferma password() funzione otteniamo prima i valori della password e confermiamo i campi della password e li memorizziamo all'interno delle variabili. Utilizziamo quindi le istruzioni condizionali per verificare casi diversi.
Caso 1: il campo della password è vuoto
Il primo condizionale controlla se il campo della password è vuoto. Chiediamo all'utente di digitare la password se il campo è vuoto:
Caso 2: le password corrispondono
Nel caso in cui le password corrispondano, l'utente accede correttamente:
Caso 3: le password non corrispondono
Se le password non corrispondono, chiediamo all'utente di ridigitare le password e assicurarsi che corrispondano:
Il codice JavaScript e HTML insieme assomiglia a questo:
< html >
< corpo >
< centro >
< h2 > Suggerimento Linux h2 >
< modulo >
< p > Inserire la password p >
< ingresso genere = 'parola d'ordine' id = 'passaggio' > < fr >< fr >
< p > Conferma password p >
< ingresso genere = 'parola d'ordine' id = 'conferma il passaggio' > < fr >< fr >
< pulsante genere = 'Sottoscrivi' al clic = 'conferma password()' > Tronco d'albero in pulsante >
modulo >
centro >
corpo >
< sceneggiatura >
funzione conferma password ( ) {
var password = document.getElementById ( 'passaggio' ) .valore;
var confirmPassword = document.getElementById ( 'conferma il passaggio' ) .valore;
Se ( password == '' ) {
mettere in guardia ( 'Errore: il campo della password è vuoto.' ) ;
} altro Se ( password == confermaPassword ) {
mettere in guardia ( 'Connesso' ) ;
} altro {
mettere in guardia ( 'Assicurati che le tue password corrispondano.' )
}
}
sceneggiatura >
html >
Conclusione
Gli esseri umani possono spesso commettere errori, ma ciò non dovrebbe impedire loro di accedere ai propri account. Anche il minimo errore nell'inserimento di una password può limitare l'accesso di un utente al proprio account. Quindi, è sempre una buona idea ricontrollare la password di un utente per confermare di aver inserito quella giusta.