Weryfikacja hasła w JavaScript [Objaśnienie konfiguracji krok po kroku]

Każda witryna internetowa obsługująca uwierzytelnianie i autoryzację zawsze prosi o podanie nazwy użytkownika i hasła podczas logowania. Jeśli tak nie jest, użytkownik musi się zarejestrować i utworzyć hasło, aby zalogować się do następnej sesji, a zatem strony internetowe mają tendencję do dostarczania określonych protokołów lub parametrów. Poniższe parametry są powszechnie używane do sprawdzania poprawności hasła w dowolnej formie.

• W polu hasła akceptowane są tylko dane alfanumeryczne.
• Powinien zaczynać się od wielkich liter.
• Co najmniej jedno hasło pisane wielkimi literami.
• Hasło powinno mieć określoną długość.
• W haśle należy użyć jednej wartości liczbowej.
• Hasło musi mieć minimalną i maksymalną długość.

Sprawdzanie poprawności hasła w JavaScript zapewnia, że ​​te parametry są przestrzegane, gdy użytkownik tworzy hasło. Aby utworzyć dość silne hasło, muszą być spełnione podane warunki. Strukturę hasła można zweryfikować za pomocą wyrażenia regularnego przy użyciu kodu JavaScript.

Aby przetworzyć walidację hasła za pomocą JavaScript w polu hasła, wykonaj poniższe kroki.

Weryfikacja hasła w JavaScript

1. Utwórz formularz HTML

Formularz powinien zawierać podstawowe pola, takie jak e-mail, numer telefonu i hasło. Zobaczmy przykład kodu HTML, aby zdefiniować strukturę formularza.

<! DOCTYPE html >

< html lang = “en” >

< głowa >

< zestaw znaków meta = „UTF-8” >

< meta name = „viewport” content = „width=device-szerokość, początkowa skala=1.0” >

< title > Formularz </ title >

</ głowa >

< ciało >

< div class = „kontener” >

< forma działania = „/action_page.php” >

< label for = „usrname” > Adres e-mail </ label >

< input type = „text” id = „usrname” name = „usrname” wymagane >

< label for = „psw” > Hasło </ label >

< input type = „password” id = „psw” name = „psw” pattern = „(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = „Musi zawierać co najmniej jedną cyfrę i jedną wielką i małą literę oraz co najmniej 8 lub więcej znaków” wymagane >

< typ wejścia = wartość „prześlij” = „Prześlij” >

</ formularz >

</ div >

< div id = „wiadomość” >

< h3 > Hasło musi zawierać następujące elementy: </ h3 >

< p id = „litera” class = „nieprawidłowa” > A < b > mała litera </ b > litera </ p >

< p id = „kapitał” class = „nieprawidłowy” > A < b > duże (wielkie) </ b > litera </ p >

< p id = „number” class = „invalid” > A < b > liczba </ b ></ p >

< p id = „długość” class = „invalid” > Minimum < b > 16 znaków </ b ></ p >

</ div >

</ ciało >

</ html >

2. Dodaj CSS

wejście {

szerokość : 100% ;

dopełnienie : 12px ;

obramowanie : 1px stałe #ccc ;

promień obramowania : 4px ;

rozmiar pudełka : obramowanie-pudełko ;

margines górny : 6px ;

margines-dolny : 16px ;

}

/* Stylizacja przycisku przesyłania */

dane wejściowe [ typ = prześlij ] {

kolor tła : #4CAF50 ;

kolor : biały ;

}

/* Styl kontenera dla danych wejściowych */

.kontener {

kolor tła : #f1f1f1 ;

dopełnienie : 20px ;

}

#wiadomość {

wyświetlacz : brak ;

tło : #f1f1f1 ;

kolor : #000 ;

pozycja : względna ;

dopełnienie : 20px ;

margines górny : 10px ;

}

#wiadomość p {

dopełnienie : 10px 35px ;

rozmiar czcionki : 18px ;

}

.ważny {

kolor : rgb ( 3 , 184 , 190 );

}

.ważne:przed {

pozycja : względna ;

lewy : -35px ;

zawartość : „&#10004;” ;

}

.nieprawidłowy {

kolor : czerwony ;

}

.invalid:przed {

pozycja : względna ;

lewy : -35px ;

zawartość : „&#10006;” ;

}

Zamówienie: najlepsze frameworki JavaScript w 2021 r.

3. Dodaj JavaScript

var myInput = dokument . getElementById ( „psw” );

var litera = dokument . getElementById ( „litera” );

var kapitał = dokument . getElementById ( „kapitał” );

numer zmiennej = dokument . getElementById ( „liczba” );

zmienna długość = dokument . getElementById ( „długość” )

moje wejście . onfocus = funkcja () {

dokument . getElementById ( „wiadomość” ). styl . wyświetlacz = „blok” ;

}

moje wejście . rozmycie = funkcja () {

dokument . getElementById ( „wiadomość” ). styl . wyświetlacz = „brak” ;

}

moje wejście . onkeyup = funkcja () {

var małe litery liter = / [ az ] / g ;

if ( myInput . value . match ( lowerCaseLetters )) {

list . lista klas . usuń ( „nieprawidłowy” );

list . lista klas . dodaj ( „prawidłowy” );

} jeszcze {

list . lista klas . usuń ( „prawidłowy” );

list . lista klas . dodaj ( „nieprawidłowy” );

}

var wielkie litery = / [ AZ ] / g ;

if ( myInput . value . match ( upperCaseLetters ) ) {

kapitał . lista klas . usuń ( „nieprawidłowy” );

kapitał . lista klas . dodaj ( „prawidłowy” );

} jeszcze {

kapitał . lista klas . usuń ( „prawidłowy” );

kapitał . lista klas . dodaj ( „nieprawidłowy” );

}

liczby var = / [ 0-9 ] / g ;

if ( myInput . value . match ( liczby )) {

numer . lista klas . usuń ( „nieprawidłowy” );

numer . lista klas . dodaj ( „prawidłowy” );

} jeszcze {

numer . lista klas . usuń ( „prawidłowy” );

numer . lista klas . dodaj ( „nieprawidłowy” );

}

if ( myInput . value . length >= 8 ) {

długość . lista klas . usuń ( „nieprawidłowy” );

długość . lista klas . dodaj ( „prawidłowy” );

} jeszcze {

długość . lista klas . usuń ( „prawidłowy” );

długość . lista klas . dodaj ( „nieprawidłowy” );

}

}

Kod JavaScript początkowo pobiera element według identyfikatora; po tym pozwala na wyświetlanie na ekranie. Uruchamia również warunki, aby uzyskać hasło w podanym formacie. Wielkie litery, małe litery i liczby są sprawdzane za pomocą wyrażenia regularnego utworzonego w kodzie.

4. Wyrażenia regularne/REGEX

Wyrażenia regularne to wzorce pasujące do oryginalnej kombinacji literałów przekazanych w polu. W walidacji hasła użycie wyrażeń regularnych JavaScriptu odgrywa kluczową rolę w identyfikowaniu ciągu i czy jest on w podanym formacie, czy nie. Wyrażenia regularne to obiekty JavaScript. Te wyrażenia regularne są zapisywane między ukośnikami w kodzie JavaScript w celu sprawdzenia poprawności hasła.

Przykład: niech re=/ac-b/

Jak napisać walidację hasła w JavaScript za pomocą wyrażeń regularnych?

Wyrażenie regularne składa się z prostych znaków połączonych ze znakami specjalnymi. Wyrażenie regularne jest tworzone zgodnie z parametrami lub ograniczeniami silnego hasła. Znaki specjalne są używane, gdy istnieje trudne dopasowanie ciągów lub znaków.

Przedstawiony powyżej kod JavaScript używa wyrażeń regularnych do wyszukiwania wielkich i małych liter oraz liczb. Ekspresja składa się z różnych sekwencji i podsekwencji. Dla każdego znaku używanego w wyrażeniu regularnym obowiązują pewne zasady.

Przykład: niech liczba=/[0-9]/g. Przyjmuje liczby z zakresu 0-9.

Zamówienie: projekty JavaScript na Github

Ucz się kursów oprogramowania online z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Wniosek

Sprawdzanie poprawności hasła ma kluczowe znaczenie, ponieważ pozwala użytkownikowi utworzyć silne hasło i zapobiega potencjalnym złamaniom hasła. Korzystając z JavaScript, można dodać interaktywność i tym samym powiadamiać użytkownika, dopóki hasło nie będzie zawierało wszystkich wymaganych znaków w dowolnej kolejności. Wyrażenie regularne zakodowane w JavaScript odgrywa kluczową rolę w definiowaniu sekwencji. Sprowadza zapisane parametry do kodu JavaScript.

Jeśli chcesz dowiedzieć się więcej o rozwoju pełnego stosu, zapoznaj się z programem Executive PG UpGrad i IIIT-B w zakresie programowania pełnego stosu, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów i zadań , status absolwentów IIIT-B, praktyczne, praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.