Website pada umumnya terdapat form yang berkaitan dengan pengisian data pada suatu kegiatan dimana data tersebut akan kita simpan pada suatu database. Biasanya form yang sering digunakan adalah form tentang data pengguna seperti nama, email, password dll. Berbicara mengenai password, biasanya pada form pengisian akan terdapat suatu peringatan untuk mengisi password dengan minimal karakter atau harus kombinasi dengan angka dan banyak lagi contohnya. Pada kesempatan kali ini kita akan mencoba membuat notifikasi kekuatan password dengan Jquery.

Jadi pada prakteknya nanti kita akan membuat sebuah form password, jika password kalian terlalu pendek maka akan notifikasi sebuah bar dan label menyatakan bahwa password kalian terlalu lemah. Untuk membuat fungsi tersebut kita menggunakan Jquery UI untuk progress bar dan sedikit pemrograman dari Jquery. Untuk langkah-langkahnya kalian bisa ikuti contoh code dibawah ini.

password.html

Setelah sudah kalian bisa save filenya dengan format .html. Jika berhasil maka tampilanya akan seperti ini.

Terdapat form tentang mengisi password, kalian bisa mencoba ketikan 3 buah karakter untuk melihat seperti apa hasilnya jika menuliskan sedikit karakter.

Hasilnya bisa kalian lihat seperti gambar diatas. Akan muncul progress bar dari Jquery UI yang sudah kita modifikasi dan juga muncul tulisan too weak sebagai peringatan bahwa passwordnya terlalu sedikit. Jika kalian mengetikan banyaka karakter, maka progress barnya juga akan ikut bertambah seperti gambar dibawah ini.

Point penting pada contoh kali ini adalah pada script jquery untuk memproses data apa yang kita masukan ikut merubah isi dari nilai progress bar.

Kalian bisa modifikasi script diatas sesuai dengan keinginan kalian. Mudah bukan ?

Sekian pembahasan mengenai membuat notifikasi kekuatan password dengan Jquery. Semoga bermanfaat.