JavaScript'te Parola Doğrulama [Adım Adım Kurulum Açıklaması]

Kimlik doğrulama ve yetkilendirmeyi destekleyen herhangi bir web sitesi, oturum açma yoluyla her zaman bir kullanıcı adı ve şifre ister. Değilse, kullanıcının bir sonraki oturumda oturum açmak için kaydolması ve bir parola oluşturması gerekir ve bu nedenle web siteleri belirli protokoller veya parametreler sağlama eğilimindedir. Aşağıdaki parametreler, herhangi bir biçimde parola doğrulaması için yaygın olarak kullanılır.

• Parola alanında yalnızca alfanümerik girişler kabul edilir.
• Büyük harfle başlamalıdır.
• En az bir büyük harfli alfabe şifresi.
• Parola belirli bir uzunlukta olmalıdır.
• Şifrede bir sayısal değer kullanılmalıdır.
• Şifrenin minimum ve maksimum uzunluğu olmalıdır.

JavaScript'te parola doğrulama, kullanıcı bir parola oluşturduğunda bu parametrelerin izlenmesini sağlar. Makul derecede güçlü bir parolanın oluşturulması için verilen koşulların karşılanması gerekir. Şifrenin yapısı, JavaScript kodu kullanılarak normal ifadeyle doğrulanabilir.

Şifre alanında JavaScript kullanarak şifre doğrulama işlemini gerçekleştirmek için aşağıdaki adımlar izlenecektir.

Javascript'te Şifre Doğrulama

1. Bir HTML Formu Oluşturun

Formda e-posta, telefon numarası ve şifre gibi temel alanlar bulunmalıdır. Formun yapısını tanımlamak için bir HTML kodu örneği görelim.

<! DOCTYPE html >

< html lang = “tr” >

< kafa >

< meta karakter kümesi = “UTF-8” >

< meta adı = "görünüm alanı" içerik = "genişlik=cihaz genişliği, başlangıç ​​ölçeği=1.0" >

< başlık > Form </ başlık >

</ kafa >

< gövde >

< div sınıfı = "konteyner" >

< form eylemi = “/action_page.php” >

< için etiket = “usrname” > E-posta Adresi </ etiketi >

< input type = “metin” kimliği = “usrname” name = “usrname” gerekli >

< için etiket = “psw” > Şifre </ etiketi >

< giriş türü = "parola" kimliği = "psw" adı = "psw" kalıbı = "(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “En az bir rakam ve bir büyük ve küçük harf içermeli ve en az 8 veya daha fazla karakter içermeli” gerekli >

< giriş türü = "gönder" değeri = "Gönder" >

</ formu >

</ div >

< div kimliği = "mesaj" >

< h3 > Şifre şunları içermelidir: </ h3 >

< p id = “harf” sınıfı = “geçersiz” > A < b > küçük harf </ b > harf </ p >

< p id = “büyük harf” sınıfı = “geçersiz” > A < b > büyük harf (büyük harf) </ b > harf </ p >

< p id = “sayı” sınıfı = “geçersiz” > A < b > sayı </ b ></ p >

< p id = “uzunluk” sınıfı = “geçersiz” > Minimum < b > 16 karakter </ b ></ p >

</ div >

</ gövde >

</ html >

2. CSS'yi ekleyin

girdi {

genişlik : %100 ;

dolgu : 12 piksel ;

kenarlık : 1px düz #ccc ;

sınır yarıçapı : 4 piksel ;

kutu boyutlandırma : border-box ;

üst kenar boşluğu : 6 piksel ;

kenar-alt : 16 piksel ;

}

/* Gönder düğmesinin stilini belirleyin */

giriş [ tür = gönder ] {

arka plan rengi : #4CAF50 ;

renk : beyaz ;

}

/* Girdiler için kapsayıcıyı stillendir */

.konteyner {

arka plan rengi : #f1f1f1 ;

dolgu : 20 piksel ;

}

#mesaj {

ekran : yok ;

arka plan : #f1f1f1 ;

renk : #000 ;

pozisyon : göreceli ;

dolgu : 20 piksel ;

üst kenar boşluğu : 10 piksel ;

}

#mesaj p {

dolgu : 10px 35px ;

yazı tipi boyutu : 18 piksel ;

}

.geçerli {

renk : rgb ( 3 , 184 , 190 );

}

.valid:önce {

pozisyon : göreceli ;

sol : -35 piksel ;

içerik : “&#10004;” ;

}

.geçersiz {

renk : kırmızı ;

}

.invalid:önce {

pozisyon : göreceli ;

sol : -35 piksel ;

içerik : “&#10006;” ;

}

Ödeme: 2021'deki En İyi Javascript Çerçeveleri

3. JavaScript'i ekleyin

var myInput = belge . getElementById ( "psw" );

var letter = belge . getElementById ( "harf" );

var sermaye = belge . getElementById ( "sermaye" );

var numarası = belge . getElementById ( "sayı" );

var uzunluk = belge . getElementById ( "uzunluk" )

benimGiriş . odak = işlev () {

belge _ getElementById ( "mesaj" ). stil . ekran = “blok” ;

}

benimGiriş . onblur = işlev () {

belge _ getElementById ( "mesaj" ). stil . ekran = “yok” ;

}

benimGiriş . onkeyup = işlev () {

var lowCaseLetters = / [ az ] / g ;

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

mektup . sınıf listesi kaldır ( "geçersiz" );

mektup . sınıf listesi ekle ( "geçerli" );

} başka {

mektup . sınıf listesi kaldır ( "geçerli" );

mektup . sınıf listesi ekle ( "geçersiz" );

}

var üstCaseLetters = / [ AZ ] / g ;

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

sermaye . sınıf listesi kaldır ( "geçersiz" );

sermaye . sınıf listesi ekle ( "geçerli" );

} başka {

sermaye . sınıf listesi kaldır ( "geçerli" );

sermaye . sınıf listesi ekle ( "geçersiz" );

}

var sayılar = / [ 0-9 ] / g ;

if ( myInput . value.match ( sayılar ) ) {

sayı . sınıf listesi kaldır ( "geçersiz" );

sayı . sınıf listesi ekle ( "geçerli" );

} başka {

sayı . sınıf listesi kaldır ( "geçerli" );

sayı . sınıf listesi ekle ( "geçersiz" );

}

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

uzunluk _ sınıf listesi kaldır ( "geçersiz" );

uzunluk _ sınıf listesi ekle ( "geçerli" );

} başka {

uzunluk _ sınıf listesi kaldır ( "geçerli" );

uzunluk _ sınıf listesi ekle ( "geçersiz" );

}

}

JavaScript kodu başlangıçta kimliğe göre bir öğe alır; bundan sonra ekranda görüntülenmesini sağlar. Parolayı verilen biçimde almak için koşulları da çalıştırır. Büyük harfler, küçük harfler ve sayılar, kodda oluşturulan normal ifade aracılığıyla doğrulanır.

4. Normal İfadeler/REGEX

Normal ifadeler, alanda geçirilen orijinal değişmezlerin birleşimiyle eşleşen kalıplardır. Şifre doğrulamada, JavaScript'in normal ifadesinin kullanılması, dizenin ve verilen biçimde olup olmadığının belirlenmesinde önemli bir rol oynar. Normal ifadeler JavaScript nesneleridir. Bu normal ifadeler, parola doğrulaması için JavaScript kodunda eğik çizgiler arasına yazılır.

Örnek: let re=/ac-b/

Normal İfade Kullanarak JavaScript'te Parola Doğrulama Nasıl Yazılır?

Normal bir ifade, özel karakterlerle birleştirilmiş basit karakterlerden oluşur. Normal ifade, güçlü bir parolanın parametrelerine veya kısıtlamalarına göre oluşturulur. Dizelerin veya karakterlerin zorlu bir eşleşmesi olduğunda özel karakterler kullanılır.

Yukarıda gösterilen JavaScript kodu, büyük harfli alfabeleri, küçük harfli alfabeleri ve sayıları bulmak için normal ifadelerden yararlandı. İfade, farklı diziler ve alt diziler ile yapılır. Normal ifadede kullanılan her karakter için belirli kurallar vardır.

Örnek: sayı=/[0-9]/g olsun. 0-9 aralığındaki sayıları kabul eder.

Ödeme: Github'da Javascript Projeleri

Dünyanın En İyi Üniversitelerinden Online Yazılım Kursları Öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Çözüm

Parola doğrulama, kullanıcının güçlü bir parola oluşturmasına izin verdiği ve olası parola kırılmalarını önlediği için çok önemlidir. JavaScript kullanarak, etkileşim eklenebilir ve bu nedenle, parola herhangi bir sırada gerekli tüm karakterlere sahip olana kadar kullanıcıyı bilgilendirebilir. JavaScript'te kodlanan normal ifade, dizileri tanımlamada önemli bir rol oynar. Yazılan parametreleri JavaScript koduna getirir.

Full-stack geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saat zorlu eğitim, 9+ proje ve ödev sunan Full-stack Yazılım Geliştirmede Yönetici PG Programına göz atın , IIIT-B Mezun statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.