Pola potwierdzenia hasła są niezbędne podczas tworzenia formularzy online, które proszą użytkowników o ustawienie hasła. Pole hasła domyślnie ukrywa dane wprowadzone przez użytkownika, przez co konieczne jest posiadanie pewnego rodzaju mechanizmu, który pozwala użytkownikom potwierdzić, że wpisali właściwe hasło bez literówek. Pole potwierdzenia hasła monituje użytkownika o ponowne sprawdzenie hasła, jeśli błędnie wpisze jakieś znaki, a pola hasła i potwierdzenia hasła nie pasują do siebie.
W tym poście naszym celem jest stworzenie formularza HTML, który pasuje do danych wprowadzonych przez użytkownika w Hasło oraz Potwierdź hasło pola, aby potwierdzić, czy użytkownik wpisał prawidłowe hasło lub popełnił jakieś literówki.
Krok 1: Formularz HTML
Pierwszym krokiem jest stworzenie formularza HTML, który pobiera dane wejściowe użytkownika:
< środek >
< h2 > Wskazówka dotycząca Linuksa h2 >
< Formularz >
< p > Wprowadź hasło p >
< Wejście rodzaj = 'hasło' ID = 'podawać' > < br >< br >
< p > Potwierdź hasło p >
< Wejście rodzaj = 'hasło' ID = 'potwerdź hasło' > < br >< br >
< przycisk rodzaj = 'Zatwierdź' na kliknięcie = 'Potwierdzenie hasła()' > Dziennik w przycisk >
Formularz >
środek >
Stworzyliśmy prosty formularz HTML, który ma dwa pola wejściowe typu hasło i przycisk logowania, który wywołuje Potwierdzenie hasła() funkcja po kliknięciu.
Krok 2: Walidacja formularza JavaScript
Teraz napiszemy kod JavaScript wewnątrz Potwierdzenie hasła() funkcja walidująca hasło:
funkcjonować Potwierdzenie hasła ( ) {
var hasło = document.getElementById ( 'podawać' ) .wartość;
var ConfirmPassword = document.getElementById ( 'potwerdź hasło' ) .wartość;
jeśli ( hasło == '' ) {
alarm ( „Błąd: pole hasła jest puste”. ) ;
} w przeciwnym razie jeśli ( hasło == potwierdź hasło ) {
alarm ( 'Zalogowany' ) ;
} w przeciwnym razie {
alarm ( 'Proszę się upewnić, że hasła są takie same.' )
}
}
W środku Potwierdzenie hasła() funkcja najpierw pobieramy wartości hasła i potwierdzamy pola hasła i przechowujemy je wewnątrz zmiennych. Następnie używamy instrukcji warunkowych, aby sprawdzić różne przypadki.
Przypadek 1: Pole hasła jest puste
Pierwszy warunek sprawdza, czy pole hasła jest puste. Prosimy użytkownika o wpisanie hasła, jeśli pole jest puste:
Przypadek 2: Hasła pasują
W przypadku, gdy hasła pasują, użytkownik loguje się pomyślnie:
Przypadek 3: Hasła nie pasują
Jeśli hasła się nie zgadzają, prosimy użytkownika o ponowne wpisanie haseł i upewnienie się, że są zgodne:
Kod JavaScript i HTML razem wygląda mniej więcej tak:
< html >
< ciało >
< środek >
< h2 > Wskazówka dotycząca Linuksa h2 >
< Formularz >
< p > Wprowadź hasło p >
< Wejście rodzaj = 'hasło' ID = 'podawać' > < br >< br >
< p > Potwierdź hasło p >
< Wejście rodzaj = 'hasło' ID = 'potwerdź hasło' > < br >< br >
< przycisk rodzaj = 'Zatwierdź' na kliknięcie = 'Potwierdzenie hasła()' > Dziennik w przycisk >
Formularz >
środek >
ciało >
< scenariusz >
funkcjonować Potwierdzenie hasła ( ) {
var hasło = document.getElementById ( 'podawać' ) .wartość;
var ConfirmPassword = document.getElementById ( 'potwerdź hasło' ) .wartość;
jeśli ( hasło == '' ) {
alarm ( „Błąd: pole hasła jest puste”. ) ;
} w przeciwnym razie jeśli ( hasło == potwierdź hasło ) {
alarm ( 'Zalogowany' ) ;
} w przeciwnym razie {
alarm ( 'Proszę się upewnić, że hasła są takie same.' )
}
}
scenariusz >
html >
Wniosek
Ludzie często popełniają błędy, ale nie powinno to uniemożliwiać im logowania się na swoje konta. Nawet najmniejszy błąd we wpisaniu hasła może ograniczyć dostęp użytkownika do jego konta. Dlatego zawsze dobrze jest dokładnie sprawdzić hasło użytkownika, aby potwierdzić, że wprowadził on właściwe.