Validasi Kata Sandi dalam JavaScript [Penyetelan Langkah demi Langkah Dijelaskan]

Setiap situs web yang mendukung otentikasi dan otorisasi selalu meminta nama pengguna dan kata sandi melalui login. Jika tidak, pengguna perlu mendaftar dan membuat kata sandi untuk masuk ke sesi berikutnya, dan karenanya situs web cenderung menyediakan protokol atau parameter tertentu. Parameter berikut biasanya digunakan untuk validasi kata sandi dalam bentuk apa pun.

• Hanya input alfanumerik yang diterima di bidang kata sandi.
• Itu harus dimulai dengan alfabet huruf besar.
• Setidaknya satu kata sandi alfabet huruf besar.
• Kata sandi harus memiliki panjang tertentu.
• Satu nilai numerik harus digunakan dalam kata sandi.
• Kata sandi harus memiliki panjang minimum dan maksimum.

Validasi kata sandi dalam JavaScript memastikan bahwa parameter ini diikuti saat pengguna membuat kata sandi. Kondisi yang diberikan harus dipenuhi untuk pembentukan kata sandi yang cukup kuat. Struktur kata sandi dapat divalidasi dengan ekspresi reguler menggunakan kode JavaScript.

Untuk memproses validasi kata sandi menggunakan JavaScript di bidang kata sandi, langkah-langkah di bawah ini akan diikuti.

Validasi Kata Sandi dalam Javascript

1. Buat Formulir HTML

Formulir harus memiliki bidang dasar seperti email, nomor telepon, dan kata sandi. Mari kita lihat contoh kode HTML untuk mendefinisikan struktur form.

<! DOCTYPE html >

< html lang = “en” >

< kepala >

< meta charset = “UTF-8” >

< meta name = “viewport” content = “width=device-width, initial-scale=1.0” >

< judul > Formulir </ judul >

</ kepala >

< tubuh >

< div class = “wadah” >

< form action = “/action_page.php” >

< label for = “nama pengguna” > Alamat Email </ label >

< tipe input = "teks" id = "nama pengguna" nama = "nama pengguna" diperlukan >

< label for = “psw” > Password </ label >

< input type = “password” id = “psw” name = “psw” pattern = “(?=.*\d)(?=.*[az])(?=.*[AZ]).{8, }” title = “Harus mengandung setidaknya satu angka dan satu huruf besar dan kecil, dan setidaknya 8 karakter atau lebih” diperlukan >

< tipe input = “kirim” nilai = “Kirim” >

</ bentuk >

</ div >

< div id = “pesan” >

< h3 > Kata sandi harus berisi yang berikut: </ h3 >

< p id = “huruf” class = “tidak sah” > A < b > huruf kecil </ b > huruf </ p >

< p id = “kapital” class = “tidak sah” > A < b > kapital (huruf besar) </ b > huruf </ p >

< p id = “angka” class = “tidak valid” > A < b > angka </ b ></ p >

< p id = “panjang” class = “tidak valid” > Minimum < b > 16 karakter </ b ></ p >

</ div >

</ tubuh >

</ html >

2. Tambahkan CSS

masukan {

lebar : 100% ;

bantalan : 12px ;

batas : 1px solid #ccc ;

batas-radius : 4px ;

ukuran kotak : border-box ;

margin-atas : 6px ;

margin-bawah : 16px ;

}

/* Gaya tombol kirim */

masukan [ ketik = kirim ] {

warna-latar belakang : #4CAF50 ;

warna : putih ;

}

/* Gaya wadah untuk input */

.wadah {

warna-latar belakang : #f1f1f1 ;

bantalan : 20 piksel ;

}

#pesan {

tampilan : tidak ada ;

latar belakang : #f1f1f1 ;

warna : #000 ;

posisi : relatif ;

bantalan : 20 piksel ;

margin-atas : 10px ;

}

#pesan hal {

bantalan : 10px 35px ;

ukuran font : 18px ;

}

.valid {

warna : rgb ( 3 , 184 , 190 );

}

.valid:sebelum {

posisi : relatif ;

kiri : -35px ;

isi : “&#10004;” ;

}

.tidak sah {

warna : merah ;

}

.tidak valid:sebelum {

posisi : relatif ;

kiri : -35px ;

isi : “&#10006;” ;

}

Lihat: Kerangka Kerja Javascript Teratas pada tahun 2021

3. Tambahkan JavaScript

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

var surat = dokumen . getElementById ( "surat" );

var modal = dokumen . getElementById ( "modal" );

var nomor = dokumen . getElementById ( "angka" );

var panjang = dokumen . getElementById ( "panjang" )

masukan saya . fokus = fungsi () {

dokumen . getElementById ( "pesan" ). gaya . tampilan = “blok” ;

}

masukan saya . kabur = fungsi () {

dokumen . getElementById ( "pesan" ). gaya . tampilan = “tidak ada” ;

}

masukan saya . onkeyup = fungsi () {

var lowerCaseLetters = / [ az ] / g ;

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

surat . daftar kelas . hapus ( "tidak sah" );

surat . daftar kelas . tambahkan ( "sah" );

} lain {

surat . daftar kelas . hapus ( "sah" );

surat . daftar kelas . tambahkan ( "tidak valid" );

}

var upperCaseLetters = / [ AZ ] / g ;

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

modal . daftar kelas . hapus ( "tidak sah" );

modal . daftar kelas . tambahkan ( "sah" );

} lain {

modal . daftar kelas . hapus ( "sah" );

modal . daftar kelas . tambahkan ( "tidak valid" );

}

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

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

nomor . daftar kelas . hapus ( "tidak sah" );

nomor . daftar kelas . tambahkan ( "sah" );

} lain {

nomor . daftar kelas . hapus ( "sah" );

nomor . daftar kelas . tambahkan ( "tidak valid" );

}

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

panjang . daftar kelas . hapus ( "tidak sah" );

panjang . daftar kelas . tambahkan ( "sah" );

} lain {

panjang . daftar kelas . hapus ( "sah" );

panjang . daftar kelas . tambahkan ( "tidak valid" );

}

}

Kode JavaScript awalnya mendapatkan elemen dengan id; setelah itu, memungkinkan untuk ditampilkan di layar. Itu juga menjalankan kondisi untuk mendapatkan kata sandi dalam format yang diberikan. Huruf besar, huruf kecil, dan angka divalidasi melalui ekspresi reguler yang dibuat dalam kode.

4. Ekspresi Reguler/REGEX

Ekspresi reguler adalah pola yang cocok dengan kombinasi asli literal yang diteruskan di bidang. Dalam validasi kata sandi, menggunakan ekspresi reguler JavaScript memainkan peran penting dalam mengidentifikasi string dan apakah itu dalam format yang diberikan atau tidak. Ekspresi reguler adalah objek JavaScript. Ekspresi reguler ini ditulis di antara garis miring dalam kode JavaScript untuk validasi kata sandi.

Contoh: misalkan re=/ac-b/

Bagaimana Menulis Validasi Kata Sandi di JavaScript Menggunakan Ekspresi Reguler?

Ekspresi reguler terbentuk dari karakter sederhana yang dikombinasikan dengan karakter khusus. Ekspresi reguler dibentuk sesuai dengan parameter atau batasan kata sandi yang kuat. Karakter khusus digunakan ketika ada kecocokan string atau karakter yang sulit.

Kode JavaScript yang digambarkan di atas menggunakan ekspresi reguler untuk menemukan huruf besar, huruf kecil, dan angka. Ekspresi dibuat dengan sequence dan subsequence yang berbeda. Ada aturan tertentu untuk setiap karakter yang digunakan dalam ekspresi reguler.

Contoh: misalkan bilangan=/[0-9]/g. Ia menerima angka-angka dalam kisaran 0-9.

Checkout: Proyek Javascript di Github

Pelajari Kursus Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Kesimpulan

Validasi kata sandi sangat penting karena memungkinkan pengguna untuk membuat kata sandi yang kuat dan menghindari kemungkinan retak kata sandi. Menggunakan JavaScript, seseorang dapat menambahkan interaktivitas dan karenanya memberi tahu pengguna hingga kata sandi memiliki semua karakter yang diperlukan dalam urutan apa pun. Ekspresi reguler yang dikodekan dalam JavaScript memainkan peran kunci dalam menentukan urutan. Ini menurunkan parameter tertulis ke kode JavaScript.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan tumpukan penuh, lihat Program PG Eksekutif upGrad & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek, dan tugas , Status Alumni IIIT-B, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.