Belajar JavaScript - Membuat Validasi Password
Sekarang buka kode editor kalian masing-masing, di sini saya akan menggunakan
Visual Studio Code.
Buatlah dahulu sebuah folder yang berisi file html, css, dan js yang nanti
akan kita gunakan. Kita akan menggunakan file index untuk file html, style
untuk css dan script untuk javascriptnya.
Kita buat dahulu form input password dan validasinya di index.html
Jika saya jalankan, maka hasilnya akan seperti ini:
Lalu kita styling di style.css supaya lebih menarik, di sini kita akan
gunakan font Poppins dan styling untuk form passwordnya.
Kalian save, maka tampilannya akan seperti di bawah ini
Sekarang kita akan tambah icon mata di dalam form password untuk hide and show
password. Pertama kita tambah dulu link CDN dari Font Awesome supaya bisa
memakai icon dari Font Awesome. Tambahkan kode ini di index.html di atas
element title
Lalu kita tambah styling untuk icon show password, tambah kode css ini di file
style.css
Sekarang tampilannya akan seperti ini
Sudah ada icon matanya, tapi itu belum berfungsi apa-apa. Sekarang kita akan
tambahkan fungsi javascript di script.js. Kita akan import dulu file
script.js di index.html. Tambahkan kode berikut di akhir element sebelum
</body>
Lalu kita tambahkan kode JavaScript berikut ke script.js
Maka hasilnya akan seperti ini
Sekarang kita akan buat styling untuk validasinya dan juga menambahkan matanya
menjadi silang jika show password.
Setelah itu kita tambahkan function javascript untuk validasi passwordnya.
Pertama kita tambahkan functionnya di element input dahulu dengan melempar
parameter sebuah value yaitu berupa text yang kita ketik di form password
nantinya
Lalu terakhir kita buat function checkPassword di script.js dengan menerima
parameter yang tadi kita lempar di index.html. Disini kita juga akan
menggunakan regular expression untuk membuat validasi password sesuai yang
kita buat di index.html
Dan hasil akhirnya akan seperti ini✨
Saya lampirkan keseluruhan kodenya di bawah ini ya
Kita sudah sampai dipenghujung artikel. Bagaimana? Mudah atau susah? Jika ada
error silahkan komentar di bawah ya. Semoga bermanfaat dan kalian menyukainya.
Jangan lupa bagikan ilmu ini ke yang lainnya juga ya!
0 comments
Posting Komentar